@media (prefers-color-scheme: dark) {
    :root {
        --theme-color-1: #141414;
        --theme-color-2: #1b1b1b;
        --theme-color-3: #dfdfdf;
        --theme-color-4: #bfbfbf;
        --theme-color-5: #723fe7;
        --theme-color-6: #5b32b8;
    }
}

@media (prefers-color-scheme: light) {
    :root {
        --theme-color-1: #fbfbfb;
        --theme-color-2: #f3f3f3;
        --theme-color-3: #080808;
        --theme-color-4: #545454;
        --theme-color-5: #723fe7;
        --theme-color-6: #5b32b8;
    }

    html[data-theme="default"] #nav li a.active,
    html[data-theme="default"] #nav li button.active,
    html[data-theme="default"] .card-icon-component div:first-child i,
    html[data-theme="default"] .btn-component,
    html[data-theme="default"] .checkbox-component input:checked + svg {
        color: var(--theme-color-1);
    }

    html[data-theme="default"] .checkbox-component svg {
        color: var(--theme-color-4);
    }

    html[data-theme="default"] .checkbox-component input {
        background-color: var(--theme-color-4);
    }

    html[data-theme="default"] .checkbox-component input:checked {
        background-color: var(--theme-color-5);
    }

    html[data-theme="default"] .bg-toggle.start-6 {
        background-color: var(--theme-color-1);
    }

    html[data-theme="default"]
        div.dt-container
        .dt-paging
        .dt-paging-button.current {
        color: var(--theme-color-1) !important;
    }
}

html[data-theme="dark"] {
    --theme-color-1: #141414;
    --theme-color-2: #1b1b1b;
    --theme-color-3: #dfdfdf;
    --theme-color-4: #bfbfbf;
    --theme-color-5: #723fe7;
    --theme-color-6: #5b32b8;
}

html[data-theme="light"] {
    --theme-color-1: #fbfbfb;
    --theme-color-2: #f3f3f3;
    --theme-color-3: #080808;
    --theme-color-4: #545454;
    --theme-color-5: #723fe7;
    --theme-color-6: #5b32b8;
}

html[data-theme="light"] #nav li a.active,
html[data-theme="light"] #nav li button.active,
html[data-theme="light"] .card-icon-component div:first-child i,
html[data-theme="light"] .btn-component,
html[data-theme="light"] .checkbox-component input:checked + svg {
    color: var(--theme-color-1);
}

html[data-theme="light"] .checkbox-component svg {
    color: var(--theme-color-4);
}

html[data-theme="light"] .checkbox-component input {
    background-color: var(--theme-color-4);
}

html[data-theme="light"] .checkbox-component input:checked {
    background-color: var(--theme-color-5);
}

html[data-theme="light"] .bg-toggle.start-6 {
    background-color: var(--theme-color-1);
}

html[data-theme="light"] div.dt-container .dt-paging .dt-paging-button.current {
    color: var(--theme-color-1) !important;
}