/* * The Puzzly — theme variants * * Each named theme is a `[data-theme="X"]` override on :root. When no theme * attribute is set, the defaults in styles.css win (cream + auto dark). * * The picker (theme.js) sets `` before paint, so the * variant applies cleanly without a flash. To force a theme: * * ?theme=paper → URL override (also stickies to localStorage) * ?theme= → clear, return to system default * ?themepicker=1 → show floating picker (sticky) * ?themepicker=0 → hide picker * * In the console: window.Theme.set('paper'), .clear(), .list(), .current() * * Adding a theme: copy a block, rename the data-theme value, add to the * THEMES list in theme.js. Every variant must override: * --bg, --bg-elev, --bg-elev-2, --bg-soft * --fg, --fg-dim, --fg-faint * --accent, --accent-2/3/4 * --accent-fill, --accent-2/3/4-fill, --accent-soft * --green/yellow/blue/purple/pink/red * --border, --border-soft * --shadow-card, --shadow-hover * --bg-glow-1/2/3 * Otherwise the default leaks through and you get muddy hybrids. */ /* ----- paper: clean newsprint, NYT-Games conservative ----- */ :root[data-theme="paper"] { --bg: #ffffff; --bg-elev: #fafaf8; --bg-elev-2: #efefea; --bg-soft: #f5f5f1; --fg: #0f1115; --fg-dim: #444a58; --fg-faint: #6f7585; --accent: #1d4ed8; --accent-2: #b91c1c; --accent-3: #047857; --accent-4: #6d28d9; --accent-fill: #fbbf24; --accent-2-fill: #ef4444; --accent-3-fill: #10b981; --accent-4-fill: #8b5cf6; --accent-soft: rgba(29, 78, 216, 0.10); --green: #059669; --yellow: #d97706; --blue: #1d4ed8; --purple: #7c3aed; --pink: #db2777; --red: #b91c1c; --border: #d8d8d0; --border-soft: #e8e8e0; --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 2px 8px rgba(15, 17, 21, 0.05), 0 1px 2px rgba(15, 17, 21, 0.04); --shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 10px 24px rgba(15, 17, 21, 0.08), 0 2px 4px rgba(15, 17, 21, 0.05); --bg-glow-1: transparent; --bg-glow-2: transparent; --bg-glow-3: transparent; } /* ----- midnight: deep theater dark, forced for everyone ----- */ :root[data-theme="midnight"] { --bg: #0a0a12; --bg-elev: #15151f; --bg-elev-2: #1f1f2c; --bg-soft: #11111b; --fg: #f5f6fb; --fg-dim: #c4c9dc; --fg-faint: #8d93ab; --accent: #ffd166; --accent-2: #ff7eb6; --accent-3: #6ee7ff; --accent-4: #a78bfa; --accent-fill: #ffd166; --accent-2-fill: #ff7eb6; --accent-3-fill: #6ee7ff; --accent-4-fill: #a78bfa; --accent-soft: rgba(255, 209, 102, 0.18); --green: #4ec77b; --yellow: #f4c542; --blue: #5aa3ff; --purple: #b07bff; --pink: #ff7eb6; --red: #ff6b6b; --border: #2a2a38; --border-soft: #1f1f2a; --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 12px 32px rgba(0, 0, 0, 0.55); --shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 18px 44px rgba(0, 0, 0, 0.65); --bg-glow-1: rgba(167, 139, 250, 0.18); --bg-glow-2: rgba(110, 231, 255, 0.14); --bg-glow-3: rgba(255, 209, 102, 0.10); } /* ----- playful: saturated arcade pop ----- */ :root[data-theme="playful"] { --bg: #fff5e0; --bg-elev: #ffffff; --bg-elev-2: #ffe5c2; --bg-soft: #fff0d0; --fg: #1a0f2e; --fg-dim: #4a3870; --fg-faint: #7a6a99; --accent: #d63384; --accent-2: #6610f2; --accent-3: #0d6efd; --accent-4: #fd7e14; --accent-fill: #ffd166; --accent-2-fill: #ff7eb6; --accent-3-fill: #6ee7ff; --accent-4-fill: #a78bfa; --accent-soft: rgba(214, 51, 132, 0.18); --green: #20c997; --yellow: #ffc107; --blue: #0d6efd; --purple: #6610f2; --pink: #ff5db1; --red: #e63946; --border: #f0c896; --border-soft: #f5dbb3; --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 6px 18px rgba(214, 51, 132, 0.12), 0 2px 4px rgba(102, 16, 242, 0.08); --shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 16px 36px rgba(214, 51, 132, 0.18), 0 3px 8px rgba(102, 16, 242, 0.12); --bg-glow-1: rgba(255, 126, 182, 0.28); --bg-glow-2: rgba(110, 231, 255, 0.22); --bg-glow-3: rgba(255, 209, 102, 0.32); } /* ----- mono: black/white/gray, no chroma noise ----- */ :root[data-theme="mono"] { --bg: #fafafa; --bg-elev: #ffffff; --bg-elev-2: #f0f0f0; --bg-soft: #f5f5f5; --fg: #0a0a0a; --fg-dim: #404040; --fg-faint: #737373; --accent: #171717; --accent-2: #262626; --accent-3: #404040; --accent-4: #525252; --accent-fill: #171717; --accent-2-fill: #404040; --accent-3-fill: #737373; --accent-4-fill: #a3a3a3; --accent-soft: rgba(23, 23, 23, 0.08); --green: #404040; --yellow: #737373; --blue: #262626; --purple: #404040; --pink: #525252; --red: #171717; --border: #d4d4d4; --border-soft: #e5e5e5; --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 1px 3px rgba(0, 0, 0, 0.06); --shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 6px 18px rgba(0, 0, 0, 0.10); --bg-glow-1: transparent; --bg-glow-2: transparent; --bg-glow-3: transparent; } /* ----- dusk: deep purple sunset ----- */ :root[data-theme="dusk"] { --bg: #1f1530; --bg-elev: #2d2042; --bg-elev-2: #3a2a55; --bg-soft: #261a3a; --fg: #fef3e7; --fg-dim: #d4bfd6; --fg-faint: #9b8aa6; --accent: #fb923c; --accent-2: #f472b6; --accent-3: #5eead4; --accent-4: #fde68a; --accent-fill: #fb923c; --accent-2-fill: #f472b6; --accent-3-fill: #5eead4; --accent-4-fill: #fde68a; --accent-soft: rgba(251, 146, 60, 0.18); --green: #5eead4; --yellow: #fde68a; --blue: #93c5fd; --purple: #c4b5fd; --pink: #f472b6; --red: #fb7185; --border: #4a3358; --border-soft: #382646; --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 10px 28px rgba(0, 0, 0, 0.45); --shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 18px 40px rgba(0, 0, 0, 0.55); --bg-glow-1: rgba(244, 114, 182, 0.22); --bg-glow-2: rgba(94, 234, 212, 0.16); --bg-glow-3: rgba(251, 146, 60, 0.18); } /* ----- forest: calm sage green ----- */ :root[data-theme="forest"] { --bg: #f4f6f0; --bg-elev: #ffffff; --bg-elev-2: #e6ebde; --bg-soft: #ecf0e4; --fg: #1a2418; --fg-dim: #4a5949; --fg-faint: #6f7d6d; --accent: #2f6f3e; --accent-2: #8b5a2b; --accent-3: #1f6f72; --accent-4: #6b3fa0; --accent-fill: #84cc16; --accent-2-fill: #f59e0b; --accent-3-fill: #14b8a6; --accent-4-fill: #a855f7; --accent-soft: rgba(47, 111, 62, 0.14); --green: #2f6f3e; --yellow: #b45309; --blue: #1f6f72; --purple: #6b3fa0; --pink: #be185d; --red: #b91c1c; --border: #cbd3c0; --border-soft: #dde2d0; --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 4px 12px rgba(26, 36, 24, 0.06); --shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 14px 30px rgba(26, 36, 24, 0.10); --bg-glow-1: rgba(132, 204, 22, 0.14); --bg-glow-2: rgba(20, 184, 166, 0.10); --bg-glow-3: transparent; } /* ---------- Theme picker UI (rendered by theme.js) ---------- */ .theme-picker { position: fixed; bottom: calc(12px + var(--safe-bottom)); right: calc(12px + var(--safe-right)); z-index: 999; background: var(--bg-elev); color: var(--fg); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-hover); font-family: var(--mono); font-size: 12px; padding: 8px; display: flex; flex-direction: column; gap: 6px; max-width: 200px; } .theme-picker__label { color: var(--fg-faint); letter-spacing: 0.08em; text-transform: uppercase; font-size: 10px; padding: 0 4px; } .theme-picker__row { display: flex; flex-wrap: wrap; gap: 4px; } .theme-picker__btn { font: inherit; font-family: var(--mono); font-size: 11px; padding: 6px 9px; min-height: 28px; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; letter-spacing: 0.02em; } .theme-picker__btn[aria-pressed="true"] { background: var(--accent-fill); color: #1a1305; border-color: transparent; font-weight: 700; } .theme-picker__close { position: absolute; top: 4px; right: 4px; background: transparent; border: 0; color: var(--fg-faint); cursor: pointer; font-size: 14px; line-height: 1; padding: 4px 6px; min-height: auto; }