/** * Dark mode (§18). * * Opt-in: set [data-theme="dark"] on . Purely additive — there are NO * light-mode rules here, so light rendering is unchanged. * * Strategy: flip the THEME's semantic surface/text/border tokens. The chrome is * built on these (--header-surface = --color-surface, footer = --color-surface-subtle, * nav/links = --color-text), so header, nav, footer wells, and content all go dark * coherently from one place. Brand-colored surfaces (e.g. the maroon footer-above) * and --color-text-inverse are deliberately left as-is. The page-section color * schemes flip separately via the plugin's schemes.css ([data-theme="dark"] blocks). */ [data-theme='dark'] { --color-surface: var(--color-neutral-900, #1a1b1c); --color-text: var(--color-neutral-100, #f8f8f8); --color-surface-subtle: var(--color-neutral-800, #333435); --color-surface-overlay: var(--color-black-alpha-800, rgb(0 0 0 / 85%)); --color-border-soft: var(--color-neutral-700, #4d4e50); --color-border-muted: var(--color-neutral-700, #4d4e50); --gray-xlight: var(--color-neutral-800, #333435); --gray-light: var(--color-neutral-700, #4d4e50); --gray: var(--color-neutral-600, #66686a); } /* Page canvas. (body already sets color: var(--color-text), which now flips.) */ [data-theme='dark'] body { background-color: var(--color-surface); } /* Main content: headings/links take the scheme roles (the rest inherits the flipped --color-text). Schemed page-sections re-point --ftm-scheme-* themselves. */ [data-theme='dark'] .site-main :is(h1, h2, h3, h4, h5, h6) { color: var(--ftm-scheme-heading, #fff); } [data-theme='dark'] .site-main a { color: var(--ftm-scheme-link, #e68f87); }