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

2
assets/css/010_typography.css
View file

@ -92,7 +92,7 @@ sup {
small,
.text--small
{
color: var(--gray4);
color: var(--text-color-secondary);
font-weight: normal;
font-size: var(--text-s);
letter-spacing: 0.01em;