Polaris/static/assets/css/themes.css

body[data-theme='dark'] {
    --background-color: #233147;
    --text: #fff;
    --sidebar-bg: #161f2eef;
    --button-bg: #42424259;
    --shadow-color: #4242424b;
    --switch-color: #42424259;
    --switch-active: #2196F3;
    --scrollbar-color: #ffffff59;
    --solid: #1b2735;
    --hover: #757575;
    background: radial-gradient(circle, rgba(58, 61, 96, 1) 0%, rgba(45, 40, 51, 1) 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: #e75166;
    --text: #fff;
    --sidebar-bg: #e75166ee;
    --button-bg: #00000059;
    --shadow-color: #F949724b;
    --switch-color: #959595;
    --switch-active: #FB5E4C;
    --scrollbar-color: #ffffff59;
    --solid: #FB5E4C;
    --hover: #ed58b4;
    background: linear-gradient(122deg, rgba(255, 41, 191, 1) 0%, rgba(215, 67, 46, 1) 85%);
    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: #293a6bee;
    --text: #fff;
    --sidebar-bg: #293a6bee;
    --button-bg: #42424259;
    --shadow-color: #0561814b;
    --switch-color: #42424259;
    --switch-active: #056181;
    --scrollbar-color: #ffffff59;
    --solid: #056181;
    --hover: #6491fa;
    background: linear-gradient(90deg, #6491fa 0%, rgba(49, 49, 129) 84%);
    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: #a74c4cee;
    --text: #fff;
    --sidebar-bg: #a74c4cee;
    --button-bg: #00000059;
    --shadow-color: #940C284b;
    --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: #d40000;
    --text: #fff;
    --sidebar-bg: #d40000;
    --button-bg: #00000059;
    --shadow-color: #940C284b;
    --switch-color: #42424259;
    --switch-active: #B90F32;
    --scrollbar-color: #ffffff59;
    --solid: #940C28;
    --hover: #fc3f42;
    background: linear-gradient(90deg, rgba(255, 106, 111, 1) 0%, rgba(252, 19, 3, 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%;
        }
    }
}

@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: #233147;
        --text: #fff;
        --sidebar-bg: #161f2eef;
        --button-bg: #42424259;
        --shadow-color: #4242424b;
        --switch-color: #42424259;
        --switch-active: #2196F3;
        --scrollbar-color: #ffffff59;
        --solid: #1b2735;
        --hover: #757575;
        background: radial-gradient(circle, rgba(58, 61, 96, 1) 0%, rgba(45, 40, 51, 1) 100%);
        background-repeat: no-repeat;
    }
}