Polaris/static/assets/css/themes.css

body[data-theme='dark'] {
    --background-color: rgba(0, 0, 0, 0.8);
    --background-darker: rgba(0, 0, 0, 0.9);
    --text: #fff;
    --sidebar-bg: #161f2eef;
    --button-bg: #1c1c1c69;
    --shadow-color: #000;
    --switch-color: #42424259;
    --switch-active: #2196F3;
    --scrollbar-color: #ffffff59;
    --solid: #1b2735;
    --hover: #757575;
    --hr-style: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));

    background: radial-gradient(at center bottom, rgb(27, 39, 53) 0%, rgb(9, 10, 15) 100%);
    background-repeat: no-repeat;
}

body[data-theme='light'] {
    --background-color: #fff;
    --background-darker: var(--background-color);
    --text: #000;
    --hover: #757575;
    --sidebar-bg: #e9e9e9ee;
    --button-bg: #ecececee;
    --shadow-color: #c9c9c9;
    --switch-color: #111111b0;
    --switch-active: #2196F3;
    --scrollbar-color: #4242424b;
    --solid: #ffffffee;
    --hover: #757575;
    --hr-style: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.75), rgba(255, 255, 255, 0));

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

body[data-theme='flamingo'] {
    --background-color: rgba(0, 0, 0, 0.8);
    --background-darker: rgba(0, 0, 0, 0.9);
    --text: #fff;
    --sidebar-bg: #e75166ee;
    --button-bg: #00000059;
    --shadow-color: #000;
    --switch-color: #959595;
    --switch-active: #FB5E4C;
    --scrollbar-color: rgba(0, 0, 0, 0.8);
    --solid: #FB5E4C;
    --hover: #ed58b4;
    background: linear-gradient(304deg, rgb(255, 136, 0), rgb(245, 7, 226)) 0% 0% / 120% 120%;
    animation: 12s ease 0s infinite normal none running flamingo-gradient;

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

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

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

body[data-theme='frost'] {
    --background-color: rgba(0, 0, 0, 0.8);
    --background-darker: rgba(0, 0, 0, 0.9);
    --text: #fff;
    --sidebar-bg: #293a6bee;
    --button-bg: #42424259;
    --shadow-color: #000;
    --switch-color: #42424259;
    --switch-active: #056181;
    --scrollbar-color: #ffffff59;
    --solid: #056181;
    --hover: #6491fa;
    background: linear-gradient(304deg, rgb(0, 0, 0), rgb(8, 193, 255)) 0% 0% / 120% 120%;
    animation: 12s ease 0s infinite normal none running frost-gradient;

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

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

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

body[data-theme='crimson'] {
    --background-color: rgba(0, 0, 0, 0.8);
    --background-darker: rgba(0, 0, 0, 0.9);
    --text: #fff;
    --sidebar-bg: #a74c4cee;
    --button-bg: #00000059;
    --shadow-color: #000;
    --switch-color: #42424259;
    --switch-active: #B90F32;
    --scrollbar-color: #ffffff59;
    --solid: #940C28;
    --hover: #fc3f42;
    background: linear-gradient(90deg, rgba(255, 106, 111, 1) 0%, rgba(148, 0, 17, 1) 85%);
    animation: crimsion-gradient 12s ease infinite;

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

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

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

body[data-theme='inferno'] {
    --background-color: rgba(0, 0, 0, 0.8);
    --background-darker: rgba(0, 0, 0, 0.9);
    --text: #fff;
    --sidebar-bg: #871a13;
    --button-bg: #00000059;
    --shadow-color: #210000;
    --switch-color: #42424259;
    --switch-active: #B90F32;
    --scrollbar-color: #ffffff59;
    --solid: #210200;
    --hover: #fc3f42;
    background: linear-gradient(90deg, rgba(252, 19, 3, 1) 0%, rgba(33, 2, 0, 1) 85%);
    animation: inferno-gradient 12s ease infinite;

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

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

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

body[data-theme='indigo'] {
    --background-color: rgba(0, 0, 0, 0.8);
    --background-darker: rgba(0, 0, 0, 0.9);
    --text: #fff;
    --sidebar-bg: #9247fc;
    --button-bg: #482579;
    --shadow-color: #2A1B55;
    --switch-color: #9759e3;
    --switch-active: #bf97f0;
    --scrollbar-color: #ffffff59;
    --solid: #9b6aeb;
    --hover: #b07df0;
    background: linear-gradient(90deg, #51305e 0%, #0f084e 85%);
    animation: indigo-gradient 12s ease infinite;

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

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

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

body[data-theme='violet'] {
    --background-color: #000000;
    --background-darker: rgba(0, 0, 0, 0.9);
    --text: #fff;
    --sidebar-bg: #000000;
    --button-bg: #000000;
    --shadow-color: #d100d1;
    --switch-color: #660a6b;
    --switch-active: #f759ff;
    --scrollbar-color: #000000;
    --solid: #000000;
    --hover: #b07df0;
    background: linear-gradient(90deg, rgba(255, 33, 255, 1) 0%, rgba(0, 0, 0, 1) 85%);
    animation: violet-gradient 12s ease infinite;

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

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

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

body[data-theme='cyan'] {
    --background-color: rgba(0, 0, 0, 0.8);
    --background-darker: rgba(0, 0, 0, 0.9);
    --text: #fff;
    --sidebar-bg: #000000;
    --button-bg: #000000;
    --shadow-color: #1f4e4c;
    --switch-color: #00404b;
    --switch-active: #00fff2;
    --scrollbar-color: #000000;
    --solid: #000000;
    --hover: #8fe0dc;
    background: linear-gradient(90deg, rgb(94, 255, 247) 0%, rgb(78, 138, 157) 85%);
    animation: cyan-gradient 12s ease infinite;

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

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

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

body[data-theme='bronze'] {
    --background-color: rgba(0, 0, 0, 0.8);
    --background-darker: rgba(0, 0, 0, 0.9);
    --text: #fff;
    --sidebar-bg: #000000;
    --button-bg: #000000;
    --shadow-color: #4c2b04;
    --switch-color: #643c00;
    --switch-active: #ffa318;
    --scrollbar-color: #000000;
    --solid: #000000;
    --hover: #ffb74a;
    background: linear-gradient(90deg, rgb(253, 135, 1) 0%, rgb(58, 32, 3));
    animation: bronze-gradient 12s ease infinite;

    @keyframes bronze-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;
        --background-darker: var(--background-color);
        --text: #000;
        --hover: #757575;
        --sidebar-bg: #ffffffee;
        --button-bg: #ecececee;
        --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;
    }
}

@media screen and (prefers-color-scheme: dark) {
    body[data-theme='system-default'] {
        --background-color: rgba(0, 0, 0, 0.8);
        --background-darker: rgba(0, 0, 0, 0.9);
        --text: #fff;
        --sidebar-bg: #161f2eef;
        --button-bg: #1c1c1c69;
        --shadow-color: #000;
        --switch-color: #42424259;
        --switch-active: #2196F3;
        --scrollbar-color: #ffffff59;
        --solid: #1b2735;
        --hover: #757575;
        background: radial-gradient(at center bottom, rgb(27, 39, 53) 0%, rgb(9, 10, 15) 100%);
        background-repeat: no-repeat;
    }
}