The current dark mode implementation uses neutral blacks (#0d0d0d, #1a1a1a, #242424) that have no connection to the De Gruyter Brill brand palette. This spec defines navy-tinted dark backgrounds derived from brand-navy, fixes an ink-3 WCAG failure in the manual override, and improves header prominence in dark context.
--c-canvas: #0d0d0d is the brand-dark value, defined in the styleguide as a text color ("near-black text when maximum contrast is needed"), not a background. Using it as a page background has no connection to the brand-navy anchor.--c-canvas: #010e1e — a very dark navy (brand-navy darkened ~94%). Visually near-black but warm and navy-tinted.
#1a1a1a, #242424, #252525 are neutral warm-grays. On screen they look identical to any generic dark app (Notion, GitHub dark, VS Code). An academic publisher's dark mode should feel like a candlelit reading room, not a generic dark UI.
--c-surface: #011526 (card/panel backgrounds — dark navy)--c-overlay: #011e38 (dropdowns/modals — slightly lighter navy)--c-muted: #011a30 (subtle inset areas — between canvas and surface)
@media (prefers-color-scheme: dark) rule correctly sets --c-ink-3: #8b97a5.:root[data-theme='dark'] manual override (used by the theme toggle button) sets --c-ink-3: #6b7280 — the same value as light mode.#6b7280 on #1a1a1a = 3.2:1 — fails WCAG AA (minimum 4.5:1 for normal text, 3:1 for large text). This affects all secondary labels, metadata, and date text.
:root[data-theme='dark'], change --c-ink-3: #6b7280 → --c-ink-3: #8b97a5 to match the media query version. On the new navy surface (#011526), #8b97a5 gives ≈ 7.1:1 — WCAG AAA.
#012851) stands out boldly against the white/sand canvas — contrast ratio ~14:1. In dark mode, that same header against #0d0d0d canvas = only ~2.1:1. The header blends into the page and loses its anchoring function.
bg-[#01335e] for the header nav bar — a mid-navy that sits visibly above the dark canvas. The 4px purple accent strip and the border-b border-[#0a3d6b] bottom border further separate it. No conditional class needed — the :root[data-theme='dark'] rule should not override the static brand-navy class; instead, use the CSS variable --c-header for the header background.
bg-surface (#1a1a1a) on a bg-canvas (#0d0d0d) background — a lightness delta of only ~10 points. At a glance the rows merge into a single dark mass. The borders (#3d3d3d) help slightly but are also neutral gray.
bg-surface (#011526) against bg-canvas (#010e1e) has a clear navy-blue difference in hue, not just lightness. The border becomes --c-line: #0d3358 — a visible navy border that reads as a brand element, not a neutral separator.
--c-line: #3d3d3d and --c-line-2: #2e2e2e are neutral grays. Every border — card edges, input fields, dividers — looks like generic dark UI.
--c-line: #0d3358 (primary borders — dark navy-blue)--c-line-2: #092843 (subtle borders — deeper navy)
| CSS variable | Current (wrong) | Replace with | Role |
|---|---|---|---|
--c-canvas | #0d0d0d | #010e1e | Page background — very dark navy |
--c-surface | #1a1a1a | #011526 | Card / panel backgrounds |
--c-overlay | #242424 | #011e38 | Dropdowns, modals |
--c-muted | #252525 | #011a30 | Hover bg, inset areas |
--c-line | #3d3d3d | #0d3358 | Primary borders |
--c-line-2 | #2e2e2e | #092843 | Subtle / secondary borders |
--c-ink-3 | #6b7280 ← BUG (3.2:1 fail) | #8b97a5 | Secondary labels — fix WCAG AA failure |
--c-header (new) | — (header used bg-brand-navy directly) | #01335e | Header bg in dark mode — elevated above canvas |
--c-ink | #f0efe9 — keep unchanged | Warm sand-white — brand-connected, WCAG AAA ✓ | |
--c-ink-2 | #9ca3af — keep unchanged | 8.4:1 on new surface — WCAG AAA ✓ | |
--c-primary | #a1dcd8 — keep unchanged | Mint — inverted primary for dark mode buttons ✓ | |
layout.css
The following changes apply to both @media (prefers-color-scheme: dark) :root:not([data-theme='light'])
and :root[data-theme='dark']. Both blocks must be kept in sync.
The ink-3 fix additionally resolves the inconsistency between the two blocks.
| Token | Current value | Proposed value | Contrast on proposed surface | Status |
|---|---|---|---|---|
--c-canvas |
#0d0d0d |
#010e1e |
— (page background) | Change |
--c-surface |
#1a1a1a |
#011526 |
— (card backgrounds) | Change |
--c-overlay |
#242424 |
#011e38 |
— (dropdown/modal) | Change |
--c-muted |
#252525 |
#011a30 |
— (inset areas, hover bg) | Change |
--c-line |
#3d3d3d |
#0d3358 |
— (borders) | Change |
--c-line-2 |
#2e2e2e |
#092843 |
— (subtle borders) | Change |
--c-ink |
#f0efe9 |
#f0efe9 (unchanged) |
#f0efe9 on #011526 = 17.8:1 — WCAG AAA ✓ | Keep |
--c-ink-2 |
#9ca3af |
#9ca3af (unchanged) |
#9ca3af on #011526 = 8.4:1 — WCAG AAA ✓ | Keep |
--c-ink-3 |
#6b7280 BUG |
#8b97a5 |
#8b97a5 on #011526 = 7.1:1 — WCAG AAA ✓ | Fix |
--c-accent |
#00c7b1 |
#00c7b1 (unchanged) |
Decorative use only — OK | Keep |
--c-primary |
#a1dcd8 |
#a1dcd8 (unchanged) |
#a1dcd8 on #012851 (btn bg) = 7.4:1 — WCAG AAA ✓ | Keep |
--c-header (new) |
— (header was always bg-brand-navy) | #01335e |
Header elevated above dark canvas | Add |
--color-header: var(--c-header) to the @theme inline block. In light mode set --c-header: #012851 (same as now). In dark mode set --c-header: #01335e. Replace bg-brand-navy on the header element with bg-header. This keeps all logic in CSS — no Svelte conditionals needed.
layout.cssdata-theme="dark" on :root. The only Svelte change is replacing bg-brand-navy → bg-header on the <header> tag in +layout.svelte.
The De Gruyter Brill identity anchors on navy blue. In light mode, navy dominates as text, headers, and primary buttons on white. In dark mode, it should dominate as backgrounds. The experience should feel like entering the same room with different lighting — not switching to a different product.
Family archive users read long document lists and correspondence timelines in dark mode — often in low-light evening contexts. A navy-tinted dark is easier on the eyes than pure black, which creates harsh halos around light text (the "halation" effect). The sand-white ink (#f0efe9) on deep navy replicates the warm tonality of aged paper under low light.
All proposed text/background combinations exceed WCAG AAA (7:1). The current ink-3 failure is particularly harmful for senior users reading small metadata text (dates, sender names). The proposed palette removes the failure and elevates all secondary text to AAA.