feat(web): add dark mode with system-default theme switcher - #468
Merged
Conversation
Add a ThemeProvider managing light/dark/system modes: it defaults to the OS preference via prefers-color-scheme, follows live OS changes while in system mode, toggles the `dark` class on <html> (matching the existing @custom-variant setup), and persists the choice to localStorage. An inline script in index.html resolves the theme before first paint to prevent a flash of the wrong theme. New ui/DropdownMenu.tsx primitive wraps radix-ui's dropdown menu. The Header renders a Light/Dark/System dropdown directly right of the Logout button, and the Sonner Toaster now follows the resolved theme instead of a hardcoded light. Layout's hardcoded light-theme assertion is replaced with provider-driven tests; new tests cover switching, persistence, system fallback and live OS changes (including a matchMedia stub and in-memory localStorage for jsdom/Node 26). Closes #462
This was referenced Aug 21, 2026
nbyl
added a commit
that referenced
this pull request
Aug 21, 2026
…471) ## Summary Documents the public GitHub Project [Metio Development](https://github.com/users/nbyl/projects/7) in `AGENTS.md` and clarifies that references to moving a ticket "in progress" or "in review" mean setting the issue's `Status` field on this project. ## Related Issue None ## Type of Change - [ ] Bug fix - [ ] New feature - [ ] Breaking change - [x] Documentation - [ ] Refactoring ## Changes Made - New **Project Board** bullet: project URL, `Status` field options (`Backlog`, `Ready`, `In progress`, `In review`, `Done`), and how to add/update issues on it via `gh project item-add` - Fixed stale Linear reference in the **Pull Requests** bullet — now points to the project's Status field instead ## Testing - [x] `make test` passes - [x] `make verify-backend` passes - [x] `cd web && npm run lint` passes - [ ] `cd web && npm run format:check` passes — **pre-existing** Prettier warnings in 7 files merged with #468 (unrelated to this docs-only PR) - [x] Manual testing completed (docs-only change; no code paths affected)
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
Adds dark mode per #462: a
ThemeProvidermanaginglight/dark/systemmodes (default system), a pre-paint script to avoid theme flash, a new DropdownMenu primitive, and a theme switcher in the Header next to the Logout button.Related Issue
Closes #462
Type of Change
Changes Made
components/theme-provider.tsx: context +useThemehook; three modes withsystemdefault; resolves viaprefers-color-scheme, follows live OS changes while in system mode; toggles thedarkclass +color-schemeondocument.documentElement; persists tolocalStoragekeymetio-theme(cleared/invalid storage falls back tosystem); exposesresolvedThemeweb/index.html: inline pre-paint script resolving the theme before first render (no FOUC), kept in sync with the providerui/DropdownMenu.tsx: new shadcn-style primitive wrapping radix-ui's dropdown-menu (unifiedradix-uipackage, same conventions asSelect.tsx), exported viaui/index.tsHeader.tsx: Light/Dark/System radio dropdown rendered directly right of the Logout button (Sun/Moon icon swap); only shown with the user sectionmain.tsx/ThemedToaster.tsx: app wrapped inThemeProvider; SonnerToasterfollows the resolved theme instead of hardcoded'light'Testing
make testpassesmake verify-backendpassescd web && npm run lintpassescd web && npm run format:checkpassesmatchMediastub and in-memorylocalStorage(Node 26 ships it disabled without--localstorage-file)Screenshots (if applicable)
N/A — visual change best reviewed with the dev server (
cd web && npm run dev).