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/050_quotations.css
View file

@ -11,7 +11,7 @@ blockquote {
--border-width: var(--space-xs);
--inline-padding: var(--space-l);
border-inline-start: var(--border-width) solid var(--gray4);
border-inline-start: var(--border-width) solid var(--text-color-light);
margin-inline: 0 var(--inline-padding);
padding-inline-start: calc(var(--inline-padding) - var(--border-width));
}