/* ========================================================= HBP Dark Mode ========================================================= The whole design system is already built on CSS custom properties (--hbp-primary, --hbp-gray-50..900, --text-color, --hbp-header-bg/text, --hbp-white, etc.) consumed by utility classes like .bg-hbp-white / .text-hbp-gray-700 across every template. Re-declaring those same variables under a single html.hbp-dark scope — with higher specificity than the per-page inline :root{...} block written by enqueue_scripts() / HBP_SiteMode::enqueue_assets() — flips the whole surface without touching individual templates. Toggled by adding/removing the "hbp-dark" class on . See the inline anti-flash script + toggle handler in each of the three header.php files (templates/header.php, templates/story/header.php, templates/site-mode/header.php). ========================================================= */ html.hbp-dark { --hbp-white: #12151c; --hbp-gray-50: #171b24; --hbp-gray-100: #1c212c; --hbp-gray-200: #262d3a; --hbp-gray-300: #333c4d; --hbp-gray-400: #4b5568; --hbp-gray-500: #6b7684; --hbp-gray-600: #98a2b3; --hbp-gray-700: #c1c8d4; --hbp-gray-800: #dde2ea; --hbp-gray-900: #f1f4f9; --text-color: #e7eaf1; --hbp-header-bg: #12151c; --hbp-header-text: #f1f4f9; --hbp-primary-xlight: #17233a; --hbp-primary-light: #1c2c4a; color-scheme: dark; } /* Page-level backgrounds set inline per-page (body.hbp-dashboard, body.hbp-sitemode-body) — override with higher specificity. */ html.hbp-dark body, html.hbp-dark body.hbp-dashboard, html.hbp-dark body.hbp-sitemode-body { background: #0c0e13; } /* Cards / surfaces in this codebase are almost always plain inline "background:#fff" or "background:#FFFFFF" rather than the .bg-hbp-white utility class, so re-point literal white surfaces at the dark surface color too. */ html.hbp-dark .hbp-card, html.hbp-dark [style*="background:#fff" i], html.hbp-dark [style*="background: #fff" i], html.hbp-dark [style*="background-color:#fff" i], html.hbp-dark [style*="background-color: #fff" i] { background-color: var(--hbp-gray-50) !important; border-color: var(--hbp-gray-200) !important; } /* Story-mode episode reader (templates/story/single-episode.php) has its own standalone and a couple of hardcoded #fff surfaces in story-mode.css that the generic inline-style rule above can't reach. */ html.hbp-dark .hbp-reader-body, html.hbp-dark .hbp-eplist-sheet, html.hbp-dark .hbp-eplist-head { background-color: var(--hbp-gray-50); } html.hbp-dark img, html.hbp-dark video { filter: brightness(0.92) contrast(1.02); } /* Scrollbar + form control base colors follow the same scheme */ html.hbp-dark input, html.hbp-dark select, html.hbp-dark textarea { background-color: var(--hbp-gray-50); color: var(--text-color); border-color: var(--hbp-gray-300); }