@media (prefers-color-scheme: dark) {
    .color-scheme-auto,
    [data-color-scheme='auto'] friends-rss {
        color-scheme: dark;
        /* Text */
        --contactus-form-text-title-color: #f3f4f6;
        --contactus-form-text-description-color: #9ca3af;
        --contactus-form-text-selected-color: #d1fae5;
        --contactus-form-text-contactus-formed-color: #bfdbfe;
        --contactus-form-text-error-color: #fca5a5;
        --contactus-form-text-button-color: #dbeafe;
        --contactus-form-icon-color: #9ca3af;

        /* Background */
        --contactus-form-background-primary-color: #1f2937;
        --contactus-form-background-secondary-color: #374151;
        --contactus-form-background-tertiary-color: #4b5563;
        --contactus-form-background-selected-color: #065f46;
        --contactus-form-background-contactus-formed-color: #1e40af;
        --contactus-form-background-progress-color: rgba(75, 85, 99, 0.6);
        --contactus-form-background-progress-contactus-formed-color: rgba(59, 130, 246, 0.4);
        --contactus-form-background-button-color: #2563eb;
        --contactus-form-background-button-hover-color: #1d4ed8;
        --contactus-form-background-tag-color: #374151;
        --contactus-form-background-contactus-formed-tag-color: #1e3a8a;

        /* Border */
        --contactus-form-border-color: #4b5563;
        --contactus-form-border-selected-color: #10b981;
        --contactus-form-border-contactus-formed-color: #2563eb;

        /* Shadow */
        --contactus-form-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.2);

        /* PK Progress Bar */
        --contactus-form-pk-option1-bg: #3b82f6;
        --contactus-form-pk-option2-bg: #f97316;
        --contactus-form-pk-progress-text-color: #ffffff;
    }
}

.color-scheme-dark,
.dark,
[data-color-scheme='dark'] friends-rss {
    color-scheme: dark;
    /* Text */
    --contactus-form-text-title-color: #f3f4f6;
    --contactus-form-text-description-color: #9ca3af;
    --contactus-form-text-selected-color: #d1fae5;
    --contactus-form-text-contactus-formed-color: #bfdbfe;
    --contactus-form-text-error-color: #fca5a5;
    --contactus-form-text-button-color: #dbeafe;
    --contactus-form-icon-color: #9ca3af;

    /* Background */
    --contactus-form-background-primary-color: #1f2937;
    --contactus-form-background-secondary-color: #374151;
    --contactus-form-background-tertiary-color: #4b5563;
    --contactus-form-background-selected-color: #065f46;
    --contactus-form-background-contactus-formed-color: #1e40af;
    --contactus-form-background-progress-color: rgba(75, 85, 99, 0.6);
    --contactus-form-background-progress-contactus-formed-color: rgba(59, 130, 246, 0.4);
    --contactus-form-background-button-color: #2563eb;
    --contactus-form-background-button-hover-color: #1d4ed8;
    --contactus-form-background-tag-color: #374151;
    --contactus-form-background-contactus-formed-tag-color: #1e3a8a;

    /* Border */
    --contactus-form-border-color: #4b5563;
    --contactus-form-border-selected-color: #10b981;
    --contactus-form-border-contactus-formed-color: #2563eb;

    /* Shadow */
    --contactus-form-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.2);

    /* PK Progress Bar */
    --contactus-form-pk-option1-bg: #3b82f6;
    --contactus-form-pk-option2-bg: #f97316;
    --contactus-form-pk-progress-text-color: #ffffff;
}