feat(site): dark mode (persisted toggle + theme-aware chart) - #216
feat(site): dark mode (persisted toggle + theme-aware chart)#216jessie1111101 wants to merge 2 commits into
Conversation
9b6a196 to
f7811d1
Compare
3a21b8f to
36d9d60
Compare
f7811d1 to
ab18439
Compare
| border-radius: 3px; | ||
| } | ||
|
|
||
| .dark ::-webkit-scrollbar-track { |
There was a problem hiding this comment.
Have you considered adding dark color-scheme and standard scrollbar-color rules to ".dark / .dark body" instead so that this works in general and not just for WebKit/Blink browsers
There was a problem hiding this comment.
Good call, Firefox was getting light scrollbars in dark mode. Added color-scheme on :root/.dark, which also covers browser UI that dark: can't reach (form controls, spellcheck underlines), plus standard scrollbar-color/scrollbar-width. Kept -webkit-* for older Chrome/Safari, which ignore those and are the only engines that can size the bar this precisely.
| @@ -0,0 +1,40 @@ | |||
| // Light/dark theme toggle. Persists the choice (localStorage) and flips the | |||
There was a problem hiding this comment.
nit: Not a blocker for this but we could add an event listener to kepp multiple tabs synchronized instantly when toggling themes.
There was a problem hiding this comment.
Took it, it was small. Now listens for storage (fires only in other tabs) so they follow a toggle immediately; a cleared key falls back to the default. Exported THEME_KEY so the listener and writer can't drift.
ab18439 to
bfec283
Compare
e181244 to
be980f6
Compare
bfec283 to
67a32c2
Compare
be980f6 to
a581796
Compare
- tailwind darkMode:'class'; theme util (localStorage + prefers-color-scheme), applied pre-paint in main.jsx (no flash); a persisted ThemeToggle in the App shell. - dark: variants across every surface (cards, headers, rows, filter bar, metric toggle, chips, identity, states, detail) + dark scrollbars/body. - TrendChart: a useIsDark hook (MutationObserver on the <html> class) drives the Chart.js grid/tick/legend colors so the canvas restyles live on toggle. vitest 95/95; build clean.
Review follow-ups (Simran): - Dark scrollbars were WebKit-only. Set color-scheme on :root/.dark so the browser renders its own UI for the active theme in every engine, and add the standard scrollbar-color/scrollbar-width alongside the -webkit-* rules. - ThemeToggle listens for the storage event so open tabs follow a toggle immediately instead of drifting until reload.
67a32c2 to
f06cd70
Compare
2 participants
Summary
Adds a light/dark theme toggle to the leaderboard site — its own PR, kept out of the scoring work.
Stacked on #206 (it themes the Phase 1 UI, incl. the new metric toggle + catastrophic badge). Retarget to
mainonce #206 lands.What's here
darkMode: "class"; a small theme util (lib/theme.js) that resolves saved choice → OSprefers-color-scheme, persists tolocalStorage, and is applied pre-paint inmain.jsx(no light flash); a persistedThemeToggle(sun/moon) in the app shell.dark:variants across every surface: page shell, cards, headers, rows (incl. the ⚠ badge), filter bar, metric toggle, chips, identity block, states, detail page, and dark scrollbars/body.dark:, so auseIsDarkhook (MutationObserver on the<html>class) drives the trend chart's grid/tick/legend colors — it restyles live when you toggle, no refresh.Test plan
npm run test— 95/95;npm run build:staging— clean.