eryn/hugo-theme-termlite
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Colors: Allow setting the color scheme explicitly

Browse source 
In addition to the color scheme changing based on the system setting, enable
setting the color scheme explicitly by adding a color-scheme="light | dark" attribute
on the <html> element.

Doing this was a bit tricky. I originally implemented the grayscale ramp by
reversing it when prefers-color-scheme: dark. This was convenient, but meant that
setting the color scheme explicitly didn't work.

Along the way I discovered the light-dark() CSS function. Deploy that as the preferred
style if the browser supports it. Otherwise, fall back on the prefers-color-scheme
media queries. This function only works if color-scheme: light dark is set on the
:root element.
This commit is contained in:
Eryn Wells 2024-07-27 22:59:56 -07:00
parent cb8ad426d5
commit 8a00cc6de9
8 changed files with 53 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

51
assets/css/010_colors.css
View file

@ -22,29 +22,48 @@
--lilac: rgb(187 121 245);
--purple: rgb(197 141 244);
--background-color: var(--gray7);
--hr-color: var(--gray1);
--text-color: var(--text-color-primary);
--text-color-primary: var(--gray1);
--text-color-secondary: var(--gray4);
--text-color-light: var(--gray5);
color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
@media screen and (prefers-color-scheme: light) {
:root {
/* Reverse the grayscale ramp in dark mode. */
--gray7: rgb(17 19 28);
--gray6: rgb(28 32 48);
--gray5: rgb(53 59 82);
--gray4: rgb(86 96 121);
--gray3: rgb(139 144 164);
--gray2: rgb(206 207 214);
--gray1: rgb(255 253 249);
--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);
color: var(--text-color-primary);
}
hr {