/* * Themes — Sprint 21 (Premium feature) * * Toggle by setting `data-theme="dark"` on . The theme manager * (assets/js/theme.js) handles persistence via wordBeeProfile.preferences.theme. * * Strategy: override the design tokens defined in style.css `:root`. * Every component that uses var(--ink), var(--base), etc. picks up the dark * version automatically. No per-component CSS needed. */ [data-theme="dark"] { /* Surfaces — warm dark, not pure black */ --base: #1B1611; --surface: #25201A; --elevated: #2E2820; --comb-wash: rgba(245, 166, 35, 0.10); /* Honey accent stays vivid against the dark backdrop */ --comb: #F5A623; --comb-deep: #FFB849; --comb-light: #4A3E26; /* dim variant for subtle highlights */ /* Text — high-contrast warm tones */ --ink: #F5EFE3; --ink-muted: #BFB29C; --ink-light: #877B65; /* Borders */ --border: #3D352A; --border-subtle: #322B22; /* States */ --play: #FF8650; --play-deep: #E86A2E; --success: #6FBC83; --warning: #F5C16C; --error: #E96B61; /* Shadows: less visible on dark, lean on borders instead */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); } /* Body bg + colour fallback for elements that don't use tokens */ [data-theme="dark"] body { background: var(--base); color: var(--ink); } /* Pages with their own gradient backgrounds — unify under dark */ [data-theme="dark"] body::before { filter: brightness(0.18) saturate(0.6); } /* Hard-coded colors in inline styles — best-effort overrides */ [data-theme="dark"] [style*="background: white"], [data-theme="dark"] [style*="background:#fff"], [data-theme="dark"] [style*="background-color: white"], [data-theme="dark"] [style*="background-color:#fff"] { background-color: var(--surface) !important; color: var(--ink); } [data-theme="dark"] [style*="color: #2C2416"], [data-theme="dark"] [style*="color:#2C2416"] { color: var(--ink) !important; } [data-theme="dark"] [style*="color: #6B5D4D"], [data-theme="dark"] [style*="color:#6B5D4D"] { color: var(--ink-muted) !important; } [data-theme="dark"] [style*="background: #FFF8ED"], [data-theme="dark"] [style*="background:#FFF8ED"] { background-color: var(--elevated) !important; } [data-theme="dark"] [style*="background: #FDFAF5"], [data-theme="dark"] [style*="background:#FDFAF5"] { background-color: var(--base) !important; } /* Ad containers — match dark surface */ [data-theme="dark"] .wb-ad { background: var(--elevated); border-color: var(--border); } [data-theme="dark"] .wb-ad__label { color: var(--ink-light); } /* Game-specific tweaks */ [data-theme="dark"] .game-card, [data-theme="dark"] .blog-card { background: var(--surface); border-color: var(--border); color: var(--ink); } [data-theme="dark"] .game-card * { color: inherit; } [data-theme="dark"] .game-card-name, [data-theme="dark"] .blog-card h2 { color: var(--ink); } [data-theme="dark"] .game-card-desc, [data-theme="dark"] .blog-card p, [data-theme="dark"] .blog-date { color: var(--ink-muted); } /* Wordle tiles & spelling bee hexagons keep their own palettes — they're the "stage" and need to read on any background. Don't override. */ /* Force-light option for users who set OS to dark but want the warm theme */ [data-theme="light"] { /* Re-apply the defaults from :root by leaving the values alone — the :root cascade wins because [data-theme="light"] doesn't redefine them. This block exists so theme.js can still write data-theme="light" to express an explicit choice (defeats prefers-color-scheme). */ } /* Smooth transition between themes */ html { transition: background-color 0.2s ease, color 0.2s ease; } body, .game-card, .blog-card, .wb-ad { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }