52 lines
1.8 KiB
Plaintext
52 lines
1.8 KiB
Plaintext
// There's a site color, a page color, and an accent. In light mode, brightness increases from a black 8 -> to a white 0, and in dark mode, brightness increases from 0 -> 8
|
|
// I would recommend avoiding --8 and --0 if possible, but sometimes you just need black or white! It is what it is.
|
|
// I would also recommend sticking to these colors as much as you can, and if you add anything else, make sure to check it in both light and dark mode.
|
|
|
|
:root {
|
|
--8: oklch(0 0 0);
|
|
--0: oklch(1 0 0);
|
|
--blue-1: oklch(0.96 0.02 270);
|
|
--blue-2: oklch(0.92 0.04 270);
|
|
--blue-3: oklch(0.79 0.11 270);
|
|
--blue-4: oklch(0.71 0.16 270);
|
|
--blue-5: oklch(0.62 0.14 270);
|
|
--blue-6: oklch(0.41 0.1 270);
|
|
--blue-7: oklch(0.3 0.07 270);
|
|
--gold-1: oklch(96.098% 0.02042 91.593);
|
|
--gold-2: oklch(0.92 0.04 90);
|
|
--gold-3: oklch(0.79 0.11 90);
|
|
--gold-4: oklch(0.71 0.16 90);
|
|
--gold-5: oklch(0.61 0.14 90);
|
|
--gold-6: oklch(0.41 0.1 90);
|
|
--gold-7: oklch(0.3 0.07 90);
|
|
--pink-1: oklch(0.97 0.02 330);
|
|
--pink-2: oklch(0.92 0.04 330);
|
|
--pink-3: oklch(0.8 0.11 330);
|
|
--pink-4: oklch(0.73 0.16 330);
|
|
--pink-5: oklch(0.63 0.14 330);
|
|
--pink-6: oklch(0.42 0.1 330);
|
|
--pink-7: oklch(0.31 0.07 330);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--8: oklch(1 0 0);
|
|
--0: oklch(0 0 0);
|
|
--blue-7: oklch(0.96 0.02 270);
|
|
--blue-6: oklch(0.92 0.04 270);
|
|
--blue-5: oklch(0.79 0.11 270);
|
|
--blue-4: oklch(0.71 0.16 270);
|
|
--blue-3: oklch(0.62 0.14 270);
|
|
--blue-2: oklch(0.41 0.1 270);
|
|
--blue-1: oklch(0.3 0.07 270);
|
|
--pink-7: oklch(0.97 0.02 330);
|
|
--pink-6: oklch(0.92 0.04 330);
|
|
--pink-5: oklch(0.8 0.11 330);
|
|
--pink-4: oklch(0.73 0.16 330);
|
|
--pink-3: oklch(0.63 0.14 330);
|
|
--pink-2: oklch(0.42 0.1 330);
|
|
--pink-1: oklch(0.31 0.07 330);
|
|
}
|
|
}
|
|
|