body[data-theme='dark'] {
    --background-color: #000;
    --text: #fff;
    --sidebar-bg: #404040;
    --button-bg: #42424259;
    --shadow-color: #4242424b;
    --switch-color: #42424259;
    --switch-active: #2196F3;
    --scrollbar-color: #ffffff59;
    --solid: #1b2735;
    --hover: #757575;

    background: radial-gradient(ellipse at bottom, #1b2735 0%, #171820 100%);
    background-repeat: no-repeat;
}
body[data-theme='light'] {
    --background-color: #fff;
    --text: #000;
    --hover: #757575;
    --sidebar-bg: #ffffffee;
    --button-bg: #ffffffee;
    --shadow-color: #c9c9c9;
    --switch-color: #111111b0;
    --switch-active: #2196F3;
    --scrollbar-color: #4242424b;
    --solid: #ffffffee;
    --hover: #757575;

    background: radial-gradient(ellipse at bottom, #b1b1b1 0%, #f6f5f0 100%);
    background-repeat: no-repeat;
}

body[data-theme='flamingo'] {
    --background-color: #FB5E4C;
    --text: #fff;
    --sidebar-bg: #000000ee;
    --button-bg: #00000059;
    --shadow-color: #F949724b;
    --switch-color: #959595;
    --switch-active: #FB5E4C;
    --scrollbar-color: #ffffff59;
    --solid: #FB5E4C;
    --hover: #ed58b4;
    background: linear-gradient(304deg, #ff8800, #f507e2);
    animation: flamingo-gradient 12s ease infinite;

    @keyframes flamingo-gradient {
        0% {
            background-position: 0% 50%;
        }

        50% {
            background-position: 100% 50%;
        }

        100% {
            background-position: 0% 50%;
        }
    }
}

body[data-theme='frost'] {
    --background-color: #000;
    --text: #fff;
    --sidebar-bg: #000000ee;
    --button-bg: #42424259;
    --shadow-color: #0561814b;
    --switch-color: #42424259;
    --switch-active: #056181;
    --scrollbar-color: #ffffff59;
    --solid: #056181;
    --hover: #6491fa;
    background: linear-gradient(304deg, #000000, #08c1ff);
    animation: frost-gradient 12s ease infinite;

    @keyframes frost-gradient {
        0% {
            background-position: 0% 50%;
        }
    
        50% {
            background-position: 100% 50%;
        }
    
        100% {
            background-position: 0% 50%;
        }
    }
}

body[data-theme='crimson'] {
    --background-color: #000;
    --text: #fff;
    --sidebar-bg: #000000ee;
    --button-bg: #00000059;
    --shadow-color: #940C284b;
    --switch-color: #42424259;
    --switch-active: #B90F32;
    --scrollbar-color: #ffffff59;
    --solid: #940C28;
    --hover: #fc3f42;
    background: linear-gradient(304deg, #000000, #dc143c);
    animation: crimsion-gradient 12s ease infinite;

    @keyframes crimson-gradient {
        0% {
            background-position: 0% 50%;
        }
    
        50% {
            background-position: 100% 50%;
        }
    
        100% {
            background-position: 0% 50%;
        }
    }
}

@media screen and (prefers-color-scheme: light) {
    body[data-theme='system default'] {
        --background-color: #fff;
        --text: #000;
        --sidebar-bg: #ffffffee;
        --button-bg: #ffffff59;
        --shadow-color: #4242424b;
        --switch-color: #111111b0;
        --switch-active: #2196F3;
        --scrollbar-color: #4242424b;
        --solid: #f6f5f0;
        --hover: #757575;
        background: radial-gradient(ellipse at bottom, #b1b1b1 0%, #f6f5f0 100%);
        background-repeat: no-repeat;
    }
}

@media screen and (prefers-color-scheme: dark) {
    body[data-theme='system default'] {
        --background-color: #000;
        --text: #fff;
        --sidebar-bg: #000000ee;
        --button-bg: #42424259;
        --shadow-color: #4242424b;
        --switch-color: #42424259;
        --switch-active: #2196F3;
        --scrollbar-color: #ffffff59;
        --solid: #1b2735;
        --hover: #757575;
        background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
        background-repeat: no-repeat;
    }
}