Add dark mode#16
Merged
Merged
Conversation
Adds light/dark/system theme switching to the dashboard. - ThemeProvider context (src/components/ThemeProvider.tsx) reads localStorage, listens to prefers-color-scheme, and toggles the `dark` class on <html>. - ThemeToggle button in the navbar cycles light → dark → system. - Dark color tokens added under `.dark` in src/index.css. - Switched `@theme inline` to `@theme` so Tailwind v4 utilities reference the variables at runtime rather than inlining the light values, which is what lets the .dark override actually take effect. - Inline script in index.html applies the stored theme before paint to prevent flash-of-light-theme on initial load. - Migrated hardcoded hex colors in App.tsx, SyncPanel, SyncPage, RecordingDetail, PeoplePage, and lib/tag-colors.ts to either semantic tokens or `dark:` variants so every page renders correctly in both modes. Tests: ThemeProvider and ThemeToggle covered by RTL tests (cycling, persistence, system-pref change handling, accessible name). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The tag filter on the recordings page rendered all tags inline with no overflow handling, so once a user had more tags than fit the viewport the trailing chips were clipped off the right edge. Switch the row to single-line horizontal scroll (overflow-x-auto + flex-nowrap + whitespace-nowrap) and prevent the leading icon and chips from shrinking. Type filter row above is intentionally left as-is since it's small and its chips already fit. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
localStorage..darkin src/index.css.@theme inlinewas switched to@themeso Tailwind v4 utilities reference the variables at runtime instead of inlining the light values — that's what makes the override actually take effect.App.tsx,SyncPanel,SyncPage,RecordingDetail,PeoplePage, andlib/tag-colors.tswere migrated to either semantic tokens (bg-primary,text-foreground,border-border) ordark:variants. Terminal/log panels stay intentionally dark in both modes (they're code surfaces, not chrome).What's new
src/components/ThemeProvider.tsx— context +useThemehook; readslocalStorage, listens toprefers-color-scheme, toggles thedarkclass on<html>.src/components/ThemeToggle.tsx— sun / moon / monitor icon button in the navbar.Test plan
npm run format:check && npm run lint && npm test— clean (92 vitest + 51 pytest passing; only pre-existinganywarnings remain)npm run build— clean🤖 Generated with Claude Code