Files
Polaris/static/assets/css/themes.css
T
2023-07-18 08:00:16 -04:00

153 lines
3.8 KiB
CSS

body[data-theme='dark'] {
--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%, #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: #4242424b;
--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='crimsion'] {
--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 crimsion-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;
}
}