Fix unreadable body text in dark mode
deploy / deploy (push) Successful in 6s

--color-ink stayed dark in the dark-mode override (correct for text on
--color-bg-raised, which deliberately stays light parchment) while
--color-bg went dark — so body text, headings, and secondary text all
rendered dark-on-dark. Splits out --color-ink-on-raised for the
raised-surface case (blockquote/code/pre/input, unchanged) and flips
--color-ink/--color-ink-heading/--color-ink-soft to light for the
base-page-ground case. Verified against a local Hugo build in a
dark-mode browser, including that raised-surface elements (inline code)
kept their correct dark-on-light contrast.
This commit is contained in:
2026-08-04 05:48:39 -04:00
parent 8745705768
commit c6fe9437aa
+23 -4
View File
@@ -73,6 +73,14 @@
--color-ink-soft: #4a3f30; /* metadata, dividers, quiet secondary text */ --color-ink-soft: #4a3f30; /* metadata, dividers, quiet secondary text */
--color-border: #d8c9a3; --color-border: #d8c9a3;
/* Text sitting on a *raised* surface (blockquote/code/pre/input, all
--color-bg-raised) — split from --color-ink because dark mode keeps
raised surfaces light parchment while the page ground goes dark, so
the two contexts need opposite ink colors; identical to --color-ink
here since light mode's raised surfaces are barely different from its
page ground. */
--color-ink-on-raised: #241c14;
--color-accent: #1d4f91; /* cobalt — links, rules, emphasis */ --color-accent: #1d4f91; /* cobalt — links, rules, emphasis */
--color-accent-hover: #163b70; --color-accent-hover: #163b70;
--color-gold: #a9812e; /* ornament — drop caps, sparingly */ --color-gold: #a9812e; /* ornament — drop caps, sparingly */
@@ -104,9 +112,17 @@
:root { :root {
--color-bg: #12201a; --color-bg: #12201a;
--color-bg-raised: #efe6cd; --color-bg-raised: #efe6cd;
--color-ink: #2a2013; /* Page ground goes dark here, but raised surfaces (blockquote/code/
--color-ink-heading: #1c150c; pre/input) deliberately stay light parchment — see the
--color-ink-soft: #52432c; --color-ink-on-raised definition above for why body text and
raised-surface text can't share one variable. This was a real bug
before that split existed: --color-ink stayed dark (correct for
raised surfaces) while --color-bg went dark, so body text rendered
dark-on-dark and was nearly unreadable. */
--color-ink: #e8dfc8;
--color-ink-heading: #f5efdd;
--color-ink-soft: #a89a7c;
--color-ink-on-raised: #2a2013;
--color-border: #cabb92; --color-border: #cabb92;
--color-accent: #5b83c9; --color-accent: #5b83c9;
@@ -227,6 +243,7 @@ blockquote {
padding: var(--space-2) var(--space-3); padding: var(--space-2) var(--space-3);
border-left: 3px solid var(--color-accent); border-left: 3px solid var(--color-accent);
background-color: var(--color-bg-raised); background-color: var(--color-bg-raised);
color: var(--color-ink-on-raised);
font-style: italic; font-style: italic;
} }
@@ -268,12 +285,14 @@ code, pre {
code { code {
background-color: var(--color-bg-raised); background-color: var(--color-bg-raised);
color: var(--color-ink-on-raised);
padding: 0.1em 0.35em; padding: 0.1em 0.35em;
border-radius: 3px; border-radius: 3px;
} }
pre { pre {
background-color: var(--color-bg-raised); background-color: var(--color-bg-raised);
color: var(--color-ink-on-raised);
padding: var(--space-2); padding: var(--space-2);
overflow-x: auto; overflow-x: auto;
border-radius: 4px; border-radius: 4px;
@@ -414,7 +433,7 @@ textarea {
width: 100%; width: 100%;
font-family: var(--font-ui); font-family: var(--font-ui);
font-size: 1rem; font-size: 1rem;
color: var(--color-ink); color: var(--color-ink-on-raised);
background-color: var(--color-bg-raised); background-color: var(--color-bg-raised);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 4px; border-radius: 4px;