/* ========================================================================= * 12-theme system for news.chaserich.com (followup #235, fleet theme parity). * * The chaserich reskin (custom.css) styles every surface through the --cr-* * custom properties via `html.dark ...` rules. So a theme is just a palette of * those tokens: overriding them on [data-theme="X"] (the attribute lives on * ) rethemes the whole reskinned UI with no per-component edits. * * 13 palettes: "chaserich" (emerald, the DEFAULT - preserves brand identity) * plus the 12 fleet themes shared with issues.chaserich.com (#232), * current.help (#233), and askchase.ai (#234). Palette values mirror * current.help/src/index.css; highcontrast + matrix derived from the fleet * accent+bg pair (current.help implements 10 of the 12). * * Persistence: localStorage.news_theme. Pre-paint snippet in app.html * sets data-theme before first paint (anti-FOWT). Picker: theme-picker.js. * * Known MVP limitation: only --cr-*-themed surfaces retheme. UI painted with * raw Tailwind utilities (e.g. text-gray-300, bg-slate-700) does not yet * follow the palette; light themes (daylight, parchment) are therefore only * partially light. Broadening token coverage is iterative follow-up work. * ========================================================================= */ /* Lighter accent for hovers, derived once from each theme's accent. */ [data-theme] { --cr-accent-hover: color-mix(in srgb, var(--cr-accent) 78%, white); } /* chaserich (DEFAULT) - the existing emerald/sky brand identity. */ [data-theme="chaserich"] { --cr-bg: #050505; --cr-surface: rgba(255, 255, 255, 0.03); --cr-surface-hover: rgba(255, 255, 255, 0.08); --cr-border: rgba(255, 255, 255, 0.1); --cr-muted: #a1a1aa; --cr-text: #f4f4f5; --cr-accent: #10b981; --cr-accent-hover: #34d399; --cr-secondary: #0ea5e9; } [data-theme="forest"] { --cr-bg: #0d1a14; --cr-surface: #172720; --cr-surface-hover: #253d33; --cr-border: rgba(143, 170, 154, 0.12); --cr-muted: #8faa9a; --cr-text: #d4e6dc; --cr-accent: #6b9b7a; --cr-secondary: #6a8b8a; } [data-theme="midnight"] { --cr-bg: #0a1628; --cr-surface: #142538; --cr-surface-hover: #223850; --cr-border: rgba(138, 168, 194, 0.12); --cr-muted: #8aa8c2; --cr-text: #d4e6f0; --cr-accent: #5b8cb8; --cr-secondary: #5ba8c8; } [data-theme="rose"] { --cr-bg: #1a1417; --cr-surface: #2a2224; --cr-surface-hover: #423538; --cr-border: rgba(194, 168, 173, 0.12); --cr-muted: #c2a8ad; --cr-text: #f0e4e6; --cr-accent: #b8897a; --cr-secondary: #a88a8a; } [data-theme="lavender"] { --cr-bg: #151320; --cr-surface: #221f32; --cr-surface-hover: #35314a; --cr-border: rgba(172, 160, 194, 0.12); --cr-muted: #aca0c2; --cr-text: #e8e4f0; --cr-accent: #9b7ab8; --cr-secondary: #8a8ab8; } [data-theme="ember"] { --cr-bg: #1a1410; --cr-surface: #2a221a; --cr-surface-hover: #423528; --cr-border: rgba(194, 170, 138, 0.12); --cr-muted: #c2aa8a; --cr-text: #f0e8dc; --cr-accent: #b89b5b; --cr-secondary: #a8985b; } [data-theme="daylight"] { --cr-bg: #f5f3ef; --cr-surface: #ffffff; --cr-surface-hover: #e8e5e0; --cr-border: rgba(0, 0, 0, 0.1); --cr-muted: #4a4a4a; --cr-text: #1a1a1a; --cr-accent: #2d7a4f; --cr-secondary: #2a6a7a; } [data-theme="stillness"] { --cr-bg: #1a1a1e; --cr-surface: #222226; --cr-surface-hover: #333338; --cr-border: rgba(200, 200, 204, 0.08); --cr-muted: #8a8a90; --cr-text: #c8c8cc; --cr-accent: #8a8a90; --cr-secondary: #7a7a80; } [data-theme="parchment"] { --cr-bg: #f5efe4; --cr-surface: #faf6ef; --cr-surface-hover: #e5dfd3; --cr-border: rgba(90, 78, 58, 0.12); --cr-muted: #5a4e3a; --cr-text: #2a2218; --cr-accent: #6a8a5a; --cr-secondary: #5a7a6a; } [data-theme="twilight"] { --cr-bg: #12161e; --cr-surface: #1c212a; --cr-surface-hover: #2a303a; --cr-border: rgba(120, 128, 144, 0.10); --cr-muted: #7a8090; --cr-text: #b8bcc8; --cr-accent: #6a7a8a; --cr-secondary: #5a7080; } [data-theme="contrast"] { --cr-bg: #0a0a0a; --cr-surface: #161616; --cr-surface-hover: #2a2a2a; --cr-border: rgba(240, 240, 240, 0.15); --cr-muted: #c0c0c0; --cr-text: #f0f0f0; --cr-accent: #4fc3f7; --cr-secondary: #80deea; } [data-theme="highcontrast"] { --cr-bg: #000000; --cr-surface: #0a0a0a; --cr-surface-hover: #1a1a1a; --cr-border: rgba(255, 255, 255, 0.25); --cr-muted: #d0d0d0; --cr-text: #ffffff; --cr-accent: #ffd60a; --cr-accent-hover: #ffe44d; --cr-secondary: #ffffff; } [data-theme="matrix"] { --cr-bg: #000000; --cr-surface: #04140a; --cr-surface-hover: #0a2414; --cr-border: rgba(0, 255, 65, 0.18); --cr-muted: #00a82b; --cr-text: #00ff41; --cr-accent: #00ff41; --cr-accent-hover: #39ff77; --cr-secondary: #39ff77; } /* Re-tint the body glow per theme (same selector + later source order as the * reskin's hardcoded emerald/sky glow, so it wins on equal specificity). */ html.dark body, html.dark body.bg-dark-bg { background-image: radial-gradient(circle at 15% 50%, color-mix(in srgb, var(--cr-accent) 12%, transparent), transparent 25%), radial-gradient(circle at 85% 30%, color-mix(in srgb, var(--cr-secondary) 12%, transparent), transparent 25%); } /* Selection accent follows the theme. */ ::selection { background: color-mix(in srgb, var(--cr-accent) 35%, transparent); color: var(--cr-text); } /* ---- Theme picker popover (injected by theme-picker.js) ---- */ #theme-picker-pop { position: absolute; z-index: 60; margin-top: 0.5rem; padding: 0.75rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.375rem; background: var(--cr-surface); border: 1px solid var(--cr-border); border-radius: 0.75rem; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45); } #theme-picker-pop[hidden] { display: none; } .theme-swatch { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.5rem; border-radius: 0.5rem; border: 1px solid transparent; background: transparent; color: var(--cr-text); font-size: 0.8125rem; cursor: pointer; white-space: nowrap; transition: background 0.15s ease, border-color 0.15s ease; } .theme-swatch:hover { background: var(--cr-surface-hover); } .theme-swatch[aria-pressed="true"] { border-color: var(--cr-accent); } .theme-swatch .dot { width: 0.875rem; height: 0.875rem; border-radius: 9999px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15) inset; }