73 lines
1.5 KiB
CSS
73 lines
1.5 KiB
CSS
|
|
|
|
|
|
|
|
|
|
/*********
|
|
# COLORS
|
|
*********/
|
|
|
|
:root {
|
|
--gray1: rgb(14 16 27);
|
|
--gray2: rgb(28 33 49);
|
|
--gray3: rgb(52 59 82);
|
|
--gray4: rgb(87 94 120);
|
|
--gray5: rgb(138 144 166);
|
|
--gray6: rgb(200 204 217);
|
|
--gray7: rgb(249 251 255);
|
|
|
|
--light-blue: rgb(69 212 243);
|
|
--blue: rgb(28 168 239);
|
|
--dark-blue: rgb(63 46 231);
|
|
--lilac: rgb(187 121 245);
|
|
--purple: rgb(197 141 244);
|
|
|
|
color-scheme: light dark;
|
|
}
|
|
|
|
@media screen and (prefers-color-scheme: light) {
|
|
:root {
|
|
--background-color: var(--gray7);
|
|
--hr-color: var(--gray1);
|
|
--text-color-primary: var(--gray1);
|
|
--text-color-secondary: var(--gray4);
|
|
--text-color-light: var(--gray5);
|
|
}
|
|
}
|
|
|
|
@media screen and (prefers-color-scheme: dark) {
|
|
:root {
|
|
--background-color: var(--gray1);
|
|
--hr-color: var(--gray7);
|
|
--text-color-primary: var(--gray7);
|
|
--text-color-secondary: var(--gray5);
|
|
--text-color-light: var(--gray4);
|
|
}
|
|
}
|
|
|
|
:root {
|
|
--background-color: light-dark(var(--gray7), var(--gray1));
|
|
--hr-color: light-dark(var(--gray1), var(--gray7));
|
|
--text-color-primary: light-dark(var(--gray1), var(--gray7));
|
|
--text-color-secondary: light-dark(var(--gray4), var(--gray5));
|
|
--text-color-light: light-dark(var(--gray5), var(--gray4));
|
|
}
|
|
|
|
:root[color-scheme="dark"] {
|
|
color-scheme: only dark;
|
|
}
|
|
|
|
:root[color-scheme="light"] {
|
|
color-scheme: only light;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--background-color);
|
|
color: var(--text-color-primary);
|
|
}
|
|
|
|
hr {
|
|
border: 0;
|
|
border-top: 1pt solid var(--hr-color);
|
|
color: var(--hr-color);
|
|
}
|