/* * RideWithPro — dark-mode overrides. * * Strategy: the codebase already uses the existing tokens (--white, * --snow, --frost, --text, --muted, --border, --midnight, --deep, * --accent, --ice-blue) consistently across the 1.170 token reads in * the public surface. Each token has a stable semantic role: --white * = primary surface, --snow = page bg, --frost = subtle accent, * --text = body text, --muted = secondary text, --border = border, * --midnight = headings (and 16 backgrounds — see --bg-inverse). * * Overriding those tokens in :root[data-tlx-dark="1"] flips the * majority of the public surface to dark without touching individual * files. Hardcoded #fff / #0f172a / etc. occurrences (~290 total * across 11 public files — see docs/dark-mode-audit.md) are migrated * to tokens in subsequent commits. * * Dark variants are ONLY active when carries data-tlx-dark="1" * (forced via ?dark=1) — they intentionally do NOT track the OS * preference yet. Once every public surface has been migrated to read * these tokens we flip the [data-tlx-dark="auto"] media query below * on, which is what gives us the OS-driven auto behaviour. * * Until then: light always for end users, ?dark=1 in URL for QA. * * Excluded from dark mode (by design): /school-panel, /instructor, * /admin — they go via res.sendFile and don't pass through * applyA11yShell, so this file is never loaded there. */ /* Always-dark token: used for elements that must stay dark regardless of theme (footer bg, mobile-toggle hamburger bars, primary buttons with white text, toast notifications). Resolves the --midnight overload: 16 `background: var(--midnight)` occurrences need to stay dark, while the 151 `color: var(--midnight)` occurrences need to flip to light in dark mode. The 16 bg cases will be migrated to var(--bg-inverse) in a follow-up commit. */ :root { --bg-inverse: #050A30; --fg-on-inverse: #FFFFFF; /* Subtle alpha helpers. In light mode the alpha base is dark (rgba of --midnight); in dark mode it flips to white so the same "subtle tint over surface" intent still works. ~97 hardcoded rgba(5,10,48,a) occurrences will be migrated to these. */ --tint-subtle: rgba(5, 10, 48, 0.06); --border-subtle: rgba(5, 10, 48, 0.10); --shadow-subtle: rgba(5, 10, 48, 0.12); } /* Forced dark via ?dark=1 (QA mode). Overrides the EXISTING tokens that pages already use — so 1.170 var(--*) reads switch palette in one shot. Brand tokens (--sky, --ice) stay unchanged: they're identity colors that read fine on both backgrounds. */ :root[data-tlx-dark="1"] { /* Surfaces */ --white: #181E30; /* primary surface (cards, modals) */ --snow: #0F1117; /* page bg */ --frost: #1D2540; /* subtle accent bg (hover, chips) */ --accent: #1E3356; /* accent bg */ --ice-blue: #1D2540; /* alias of --frost in current code */ /* Foreground (role flips: --midnight was dark-on-light, becomes light-on-dark for the 151 `color:` uses). */ --text: #E4E8F5; /* body text */ --muted: #8A94B4; /* secondary text */ --midnight: #E4E8F5; /* headings — role flipped */ --deep: #1D2540; /* paired with --midnight in gradients; stays dark so gradient direction is preserved against the new light --midnight */ --slate: #2C3460; /* slate variant (1 use) */ /* Border */ --border: #2C3460; --border-base: #2C3460; /* alias used by Fase-0 tokens */ --border-strong: #3A4470; /* Subtle helpers flip the rgba base from dark navy → off-white so subtle tints/borders remain visible over the new dark surfaces. */ --tint-subtle: rgba(255, 255, 255, 0.06); --border-subtle: rgba(255, 255, 255, 0.10); --shadow-subtle: rgba(0, 0, 0, 0.30); /* --bg-inverse stays #050A30 — used for elements that MUST remain dark in both modes (footer, primary buttons). Do not override. */ } /* Auto-OS, enabled at the end of Fase 2 once every hardcoded color has been migrated to tokens. Until then, end users see light mode; only ?dark=1 in the URL forces dark. @media (prefers-color-scheme: dark) { :root[data-tlx-dark="auto"] { --white: #181E30; --snow: #0F1117; --frost: #1D2540; --accent: #1E3356; --ice-blue: #1D2540; --text: #E4E8F5; --muted: #8A94B4; --midnight: #E4E8F5; --deep: #1D2540; --slate: #2C3460; --border: #2C3460; --border-base: #2C3460; --border-strong: #3A4470; --tint-subtle: rgba(255, 255, 255, 0.06); --border-subtle: rgba(255, 255, 255, 0.10); --shadow-subtle: rgba(0, 0, 0, 0.30); } } */