/** * GC Theme — Dark Mode * * Dark mode is implemented as a CSS variable override layer. * When [data-theme="dark"] is set on (by JS toggle), * the variables defined in base/variables.css are reassigned * to dark equivalents — and all 27 component CSS files * automatically re-paint without per-component patches. * * Brand colors (teal, navy) intentionally stay constant for * brand consistency. Only surfaces, text, and borders flip. * * @package GC_Theme */ /* ═══════════════════════════════════════════════════════ * Theme toggle button (sun/moon icon switcher) * Lives in the site header, swaps icon based on data-theme. * ═══════════════════════════════════════════════════════ */ .theme-toggle { background: none; border: none; cursor: pointer; padding: 8px; color: var(--gc-text-muted); border-radius: var(--radius); display: flex; align-items: center; transition: color 0.2s, background 0.2s; } .theme-toggle:hover { color: var(--gc-primary); background: var(--gc-primary-soft); } /* Light mode: show sun, hide moon */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } /* Dark mode: hide sun's hidden state, show sun */ [data-theme="dark"] .theme-toggle .icon-moon { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } /* ═══════════════════════════════════════════════════════ * Dark mode variable overrides * * This is the core of dark mode. By overriding the same * variable names defined in base/variables.css, every * component that uses var(--gc-*) automatically adapts * with zero per-component changes. * * Color choices use the slate scale (Tailwind-inspired) * for clean neutrals that pair well with the teal brand. * ═══════════════════════════════════════════════════════ */ [data-theme="dark"] { /* ── Surfaces ── */ --gc-bg: #0F172A; /* slate-900 — body */ --gc-bg-soft: #1E293B; /* slate-800 — cards */ --gc-bg-card: #1E293B; /* cards (alias used across slot/policy templates) */ --gc-bg-softer: #334155; /* slate-700 — nested */ /* ── Text ── */ --gc-text: #E2E8F0; /* slate-200 */ --gc-text-muted: #94A3B8; /* slate-400 */ --gc-text-faint: #64748B; /* slate-500 */ --gc-text-inverse: #0F172A; /* dark text on bright bgs */ /* ── Borders ── */ --gc-border: #334155; /* slate-700 */ --gc-border-soft: #1E293B; /* slate-800 */ --gc-border-strong: #475569; /* slate-600 */ /* ── Navy adjusts (was nearly-black on light, needs lift on dark) ── */ --gc-navy: #E2E8F0; /* navy → light text role */ --gc-navy-deep: #CBD5E1; /* ── State text colors lifted for dark (light values are too dark to read on a dark bg → softer, modern muted tints, not neon) ── */ --gc-success: #6EE7B7; /* emerald-300, soft modern green */ --gc-warning: #FCD34D; --gc-danger: #FDA4AF; --gc-info: #93C5FD; /* ── State soft tints darker for contrast ── */ --gc-primary-soft: #134E4A; /* teal-900 tint */ --gc-success-soft: #14532D; /* green-900 */ --gc-warning-soft: #451A03; /* amber-950 */ --gc-warning-text: #FCD34D; /* lift up for readability */ --gc-danger-soft: #450A0A; /* red-950 */ --gc-info-soft: #172554; /* blue-950 */ /* ── Shadows stronger on dark ── */ --gc-shadow-xs: rgba(0, 0, 0, 0.20); --gc-shadow-sm: rgba(0, 0, 0, 0.30); --gc-shadow-md: rgba(0, 0, 0, 0.40); --gc-shadow-lg: rgba(0, 0, 0, 0.50); /* ── Legacy aliases auto-update (they reference --gc-*) ── */ /* Nothing to do — they cascade from above. */ /* ── Color scheme hint to browser (form controls, scrollbars) ── */ color-scheme: dark; } /* ═══════════════════════════════════════════════════════ * Targeted dark mode tweaks * * Cases where pure variable override isn't enough — usually * elements with hardcoded white text, gradients, or images * that need filter/opacity adjustments. * ═══════════════════════════════════════════════════════ */ /* Footer accent line stays teal but slightly subdued */ [data-theme="dark"] .footer-accent { opacity: 0.7; } /* Footer compliance/trust logos in dark mode — invert + greyscale so the dark-coloured logos all read as one uniform soft grey on the dark surface, regardless of their original colours (Option A, uniform). */ [data-theme="dark"] .badge-row img { filter: grayscale(1) brightness(0) invert(0.72); transition: filter 0.2s ease; } [data-theme="dark"] .badge-link:hover img { filter: grayscale(1) brightness(0) invert(0.9); } /* GPWA + DMCA are already light/white logos — inverting them turns them into solid grey blocks. Just desaturate and soften instead. */ [data-theme="dark"] .badge-gpwa img, [data-theme="dark"] .badge-dmca img { filter: grayscale(1) brightness(1.1) opacity(0.7); } [data-theme="dark"] .badge-gpwa:hover img, [data-theme="dark"] .badge-dmca:hover img { filter: grayscale(1) brightness(1.2) opacity(0.9); } /* Compliance bar shadows soft on dark */ [data-theme="dark"] .gc-compliance-bar { box-shadow: 0 1px 2px var(--gc-shadow-sm); } /* Smooth transition when toggling */ html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: background-color 0.3s ease, border-color 0.3s ease, color 0.2s ease !important; }