152 lines
3.9 KiB
CSS
152 lines
3.9 KiB
CSS
body[data-theme='dark'] {
|
|
--background-color: #272727;
|
|
--text: #fff;
|
|
--sidebar-bg: #15181cee;
|
|
--button-bg: #42424259;
|
|
--shadow-color: #4242424b;
|
|
--switch-color: #42424259;
|
|
--switch-active: #2196F3;
|
|
--scrollbar-color: #ffffff59;
|
|
--solid: #1b2735;
|
|
--hover: #757575;
|
|
background: radial-gradient(circle, rgba(34,36,74,1) 0%, rgba(47,39,57,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: #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(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: #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(90deg, rgba(127,120,246,1) 0%, rgba(49,49,129,1) 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: #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(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: #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;
|
|
}
|
|
}
|