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 {

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;

2
assets/css/050_figures.css
View file

@ -18,7 +18,7 @@
}
figcaption {
color: var(--gray4);
color: var(--text-color-secondary);
font-weight: normal;
font-size: var(--text-xs);
letter-spacing: 0.01em;

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));
}

2
assets/css/080_site_footer.css
View file

@ -8,7 +8,7 @@
**************/
.site-footer {
border-top: 2px dashed var(--gray6);
border-top: 2px dashed var(--text-color-light);
color: var(--text-color-secondary);
font-size: var(--text-s);
grid-column: main-start / main-end;

20
assets/css/080_site_header.css
View file

@ -2,11 +2,10 @@
# COMPONENT: SITE HEADER
*************************/
.site-header {
--color-nav-separator: var(--gray6);
font-family: var(--font-family-monospace);
margin-block: var(--space-m) var(--space-xl);
@media (prefers-color-scheme: dark) {
.site-header {
--color-nav-separator: var(--gray6);
}
}
@media (prefers-color-scheme: dark) {
@ -15,14 +14,21 @@
}
}
.site-header {
--color-nav-separator: light-dark(var(--gray6), var(--gray4));
font-family: var(--font-family-monospace);
margin-block: var(--space-m) var(--space-xl);
}
.site-header__content {
border-bottom: 2px dashed var(--gray6);
border-bottom: 2px dashed var(--color-nav-separator);
gap: var(--space-l);
grid-column: main-start / main-end;
padding-bottom: var(--space-xs);
.site-header__title {
color: var(--gray1);
color: var(--text-color-primary);
font-size: var(--text-m);
font-weight: normal;
letter-spacing: 0.05em;

1
assets/css/099_content.css
View file

@ -15,7 +15,6 @@
.codeblock {
color: var(--foreground);
background-color: var(--background);
border: 1px solid var(--gray6);
font-family: var(--font-family-monospace);
grid-column: gutter-start / gutter-end;
overflow: auto;

2
assets/css/099_page_header.css
View file

@ -26,7 +26,7 @@
}
.page-header__subtitle {
color: var(--gray3);
color: var(--text-color-secondary);
font-size: var(--text-m);
}