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

153 lines
3.9 KiB
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: #e75166;
--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%;
}
}
}
@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;
}
}