--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:
+23
-4
@@ -73,6 +73,14 @@
|
||||
--color-ink-soft: #4a3f30; /* metadata, dividers, quiet secondary text */
|
||||
--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-hover: #163b70;
|
||||
--color-gold: #a9812e; /* ornament — drop caps, sparingly */
|
||||
@@ -104,9 +112,17 @@
|
||||
:root {
|
||||
--color-bg: #12201a;
|
||||
--color-bg-raised: #efe6cd;
|
||||
--color-ink: #2a2013;
|
||||
--color-ink-heading: #1c150c;
|
||||
--color-ink-soft: #52432c;
|
||||
/* Page ground goes dark here, but raised surfaces (blockquote/code/
|
||||
pre/input) deliberately stay light parchment — see the
|
||||
--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-accent: #5b83c9;
|
||||
@@ -227,6 +243,7 @@ blockquote {
|
||||
padding: var(--space-2) var(--space-3);
|
||||
border-left: 3px solid var(--color-accent);
|
||||
background-color: var(--color-bg-raised);
|
||||
color: var(--color-ink-on-raised);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@@ -268,12 +285,14 @@ code, pre {
|
||||
|
||||
code {
|
||||
background-color: var(--color-bg-raised);
|
||||
color: var(--color-ink-on-raised);
|
||||
padding: 0.1em 0.35em;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: var(--color-bg-raised);
|
||||
color: var(--color-ink-on-raised);
|
||||
padding: var(--space-2);
|
||||
overflow-x: auto;
|
||||
border-radius: 4px;
|
||||
@@ -414,7 +433,7 @@ textarea {
|
||||
width: 100%;
|
||||
font-family: var(--font-ui);
|
||||
font-size: 1rem;
|
||||
color: var(--color-ink);
|
||||
color: var(--color-ink-on-raised);
|
||||
background-color: var(--color-bg-raised);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
|
||||
Reference in New Issue
Block a user