@media (prefers-color-scheme: dark) {
    :root {
        --background-color: var(--black-958) !important;
        --on-backgroud-color: var(--black-900) !important;
        --input-border-color: var(--black-846) !important;
        --input-color: var(--black-800) !important;

        --on-background-button: var(--black-800);
        --on-background-input: var(--black-846);

        --accent-light-background-color: var(--black-800) !important;
        --on-accent-light-background-color: var(--black-200) !important;

        --accent-color: var(--blue-500) !important;
        --accent-hover-color: var(--blue-400) !important;

        --primary-text-color: var(--black-0) !important;
        --secondary-text-color: var(--black-200) !important;
        --on-accent-text-color: var(--black-0) !important;
        --on-accent-light-text-color: var(--black-958) !important;
        --on-accent-text-filter: var(--black-0-filter) !important;


        --primary-text-filter: var(--black-0-filter) !important;
        --secondary-text-filter: var(--black-200-filter) !important;
        --on-accent-light-text-filter: var(--black-958-filter) !important;
        --on-accent-filter: var(--black-0-filter) !important;
        --on-accent-light-background-filter: var(--black-200-filter) !important;

        --green-light-background-color: var(--green-600) !important;
        --green-light-text-color: var(--green-100) !important;
        --green-light-text-filter: var(--green-100-filter) !important;

        --ai-background-color: #1677ff !important;
        --ai-light-text-color: #e6f4ff !important;
        --ai-light-text-fitler: invert(98%) sepia(44%) saturate(5378%) hue-rotate(177deg) brightness(108%) contrast(104%) !important;


        --red-light-background-color: var(--red-600) !important;
        --red-light-text-color: var(--red-100) !important;
        --red-light-text-filter: var(--red-100-filter) !important;

        --yellow-light-background-color: var(--yellow-700) !important;
        --yellow-light-text-color: var(--yellow-100) !important;
        --yellow-light-text-filter: var(--yellow-100-filter) !important;
    }

}

.dark-theme {
    --background-color: var(--black-958) !important;
    --on-backgroud-color: var(--black-900) !important;
    --input-border-color: var(--black-846) !important;
    --input-border-filter: var(--black-846-filter) !important;
    --input-color: var(--black-800) !important;


    --accent-light-background-color: var(--black-800) !important;
    --on-accent-light-background-color: var(--black-200) !important;

    --accent-color: var(--blue-500) !important;

    --primary-text-color: var(--black-0) !important;
    --secondary-text-color: var(--black-200) !important;
    --on-accent-text-color: var(--black-0) !important;
    --on-accent-light-text-color: var(--black-958) !important;


    --primary-text-filter: var(--black-0-filter) !important;
    --secondary-text-filter: var(--black-200-filter) !important;
    --on-accent-light-text-filter: var(--black-958-filter) !important;
    --on-accent-filter: var(--black-0-filter) !important;
    --on-accent-light-background-filter: var(--black-200-filter) !important;

    --green-light-background-color: var(--green-600) !important;
    --green-light-text-color: var(--green-100) !important;
    --green-light-text-filter: var(--green-100-filter) !important;

    --red-light-background-color: var(--red-600) !important;
    --red-light-text-color: var(--red-100) !important;
    --red-light-text-filter: var(--red-100-filter) !important;

    --yellow-light-background-color: var(--yellow-700) !important;
    --yellow-light-text-color: var(--yellow-100) !important;
    --yellow-light-text-filter: var(--yellow-100-filter) !important;
}