/** * Dark mode. * * Two independent triggers, same semantic tokens: * 1. System preference — `prefers-color-scheme: dark`, applied only * when the visitor hasn't made an explicit choice (no [data-theme] * attribute on ). * 2. Explicit choice — the on-page toggle (assets/js/dark-mode.js) * sets or , which * always wins over system preference and persists via localStorage. * * Only the semantic surface tokens flip. Brand colors (primary, * secondary, accent, success/warning/danger/info) stay constant across * modes — that's a deliberate brand decision, not an oversight. */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --color-bg: #10151a; --color-fg: #eef1f4; --color-surface: #171d23; --color-border: #2a323b; --color-fg-muted: #a7b0bc; } } :root[data-theme='dark'] { --color-bg: #10151a; --color-fg: #eef1f4; --color-surface: #171d23; --color-border: #2a323b; --color-fg-muted: #a7b0bc; } /* Dark-mode toggle button. Lives in header.php; icon swapped via CSS only (no extra markup/JS branching needed for the visual state). */ .dark-mode-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--wp--custom--radius--full); color: var(--color-fg); transition: background-color var(--wp--custom--transition--fast); } .dark-mode-toggle:hover { background-color: var(--color-surface); } .dark-mode-toggle__icon { width: 1.125rem; height: 1.125rem; border-radius: 50%; box-shadow: inset -0.3rem -0.05rem 0 0 currentColor; transform: rotate(0deg); transition: transform var(--wp--custom--transition--base); } :root[data-theme='dark'] .dark-mode-toggle__icon { box-shadow: none; background: currentColor; }