/** * Dark mode overrides for Frost2 theme. * * Activated by adding a `theme-dark` class to , which functions.php * does when the URL has `?theme=dark` (or a future toggle/cookie). * * Strategy: redefine the CSS custom properties the theme already uses so * we don't have to rewrite every component. Two sources of vars: * 1. WP preset palette from theme.json — `--wp--preset--color--{slug}` * 2. Shared brand tokens from tokens.css — `--bg-base`, `--text-primary`, etc. * * Both sets are remapped here. Anything that styles via `has-base-color` * etc. (WP) or `var(--bg-base)` (custom) flips automatically. * * Brand accents (--brand-digitists, --brand-codeists) deliberately stay the * same in light and dark per tokens.css ("brand accent is constant"). * * The Frost2 theme also bakes specific Tailwind utility classes into * dist/output.css (e.g., .bg-digitists-muted, .border-digitists-border) * with hardcoded RGB values — those need direct overrides because the * Tailwind output doesn't reference our custom-property tokens. * * Visual hierarchy preserved: in light mode bg-white (#fff) is the SAME * tone as the page, with bg-digitists-muted (#f5f5f5) being slightly * darker for the "card" effect. In dark mode we mirror that — bg-white * matches the page (--bg-base), bg-digitists-muted goes slightly lighter * (--bg-surface) so cards still pop. */ body.theme-dark { /* WordPress preset palette (theme.json) — flip base + contrast */ --wp--preset--color--base: #0a0a0a; --wp--preset--color--contrast: #fafafa; --wp--preset--color--neutral: #262626; /* primary/secondary stay — they're brand colours */ /* Shared digitists tokens — same values as html.dark in tokens.css */ --bg-base: #0a0a0a; --bg-surface: #171717; --bg-muted: #262626; --text-primary: #fafafa; --text-secondary: #d4d4d4; --text-muted: #a3a3a3; --border-default: #262626; --border-strong: #404040; } /* Body itself: WP block themes apply `--wp--preset--color--base` to the * editor canvas but the actual usually inherits `background: * var(--wp--preset--color--base)` via theme.json's `styles.color.background`. * Force it here in case the cascade misses. */ body.theme-dark { background-color: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); } /* =========================================================================== * Tailwind utility-class overrides * * These classes have hardcoded colour values in the compiled output.css. * Tailwind v3 compiled the colour at build time, so the only way to flip * them at runtime is direct override. Keep this list aligned with frost2's * tailwind.config.js custom palette. * * Brand classes (.bg-digitists, .text-digitists) deliberately stay red. * =========================================================================== */ /* Page-level surfaces — same tone as the body so there's no "strip" effect * where the body shows through margins between the body and content div. */ body.theme-dark .bg-white { background-color: var(--bg-base) !important; } /* Cards / muted surfaces — slightly lighter than base, mirroring the * f5f5f5-on-fff relationship in light mode. */ body.theme-dark .bg-digitists-muted, body.theme-dark .bg-gray-50, body.theme-dark .bg-gray-100, body.theme-dark .bg-neutral-50, body.theme-dark .bg-neutral-100 { background-color: var(--bg-surface) !important; } /* `.bg-digitists-dark` is already #0a0a0a — leave it. */ /* Borders */ body.theme-dark .border-digitists-border, body.theme-dark .border-gray-200, body.theme-dark .border-gray-300, body.theme-dark .border-neutral-200 { border-color: var(--border-default) !important; } /* Text — flip dark-on-light to light-on-dark, EXCEPT brand red (.text-digitists). */ body.theme-dark .text-black, body.theme-dark .text-gray-900, body.theme-dark .text-neutral-900 { color: var(--text-primary) !important; } body.theme-dark .text-gray-700, body.theme-dark .text-gray-800, body.theme-dark .text-neutral-700, body.theme-dark .text-neutral-800 { color: var(--text-secondary) !important; } body.theme-dark .text-gray-500, body.theme-dark .text-gray-600, body.theme-dark .text-neutral-500, body.theme-dark .text-neutral-600 { color: var(--text-muted) !important; } /* `.text-gray-400` is already light on light bg — leave alone in dark, it * stays a sensible mid-grey. */ /* Hover states on grey-text links — flip the direction of contrast. */ body.theme-dark .hover\:text-gray-900:hover, body.theme-dark .hover\:text-gray-600:hover { color: var(--text-primary) !important; } body.theme-dark .hover\:border-gray-400:hover { border-color: var(--border-strong) !important; }