Repository navigation
Conversation
Settings → Appearance offers System, Light and Dark instead of one dark-mode switch. System, the default when nothing was chosen, follows prefers-color-scheme and changes with it while the page is open; Light and Dark are fixed, as the old toggle's choices were, and a choice that toggle saved under dashboard-theme still holds. The header's sun/moon button flips to the opposite of what shows and saves it as a fixed choice. The old provider read the OS preference once and then saved light or dark on its first render, so its "follow the system" branch never ran again. The choice and its resolution now live in utils/theme.mjs, with the provider tested in a jsdom window whose media query the test flips. Closes #627 Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01EjYedJiSYGbTMY1NbL8mdK
This branch has not been deployed
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
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.
Closes #627.
actionagentonly; no migration. Bundle rebuilt withnpm run build(a few hundred bytes of JS and CSS).Settings → Appearance now offers System / Light / Dark instead of one dark-mode switch. System follows the OS appearance and changes with it while the page is open, which is also the default when nothing was chosen. Light and Dark are fixed, as the old toggle's choices were, and a choice that toggle saved still holds. The header's sun/moon button stays as the one-click flip: it picks the opposite of what shows and saves it as a fixed choice; System on the settings page follows the OS again.
Why the old toggle never followed the OS
ThemeProviderreadprefers-color-schemeonly when nothing was saved, then an effect savedlightordarkon its first render, so the "only if the user hasn't set a preference" listener never fired again after the first visit.What is in it
actionagent/frontend/utils/theme.mjs: the choice (readThemeChoice/writeThemeChoice, under the olddashboard-themekey; anything unknown reads assystem, storage that throws is survived),resolveDarkMode(choice, systemDark),toggledChoice,themeDescription, andsystemDarkQuery(null where the window has nomatchMedia: server renders, some test windows).contexts/ThemeContext.jsx:theme,systemDark,setThemenext to thedarkModeandtoggleDarkModeevery component already reads; the media-query listener is always on, so switching back to System shows the current appearance at once, and it comes off with the provider.SettingsView.jsx: the Appearance card is a "Theme" row with the sharedSegmentedControlfromprimitives.jsxand a line that says what System is showing right now.Header.jsx: a comment on what the sun/moon button now means; its behaviour is unchanged from the viewer's side.Tests
test/theme.test.mjs(6): the saved choice and its fallbacks, saving, resolution, the toggle's pick, the description, the query guard.test/themeProvider.test.mjs(5), in a jsdom window whose media query the suite controls: nothing saved follows the system and its change events without saving anything; a saved fixed choice ignores the system andsetThemepersists; System again shows the current appearance at once; the one-click toggle flips and saves a fixed choice; the listener comes off on unmount.test/settingsCards.test.mjs(+1): the Appearance card offers System, Light and Dark, marks the saved choice, and the old copy is gone.npm testinactionagent/frontend: 723 pass, 0 fail.Not checked in a browser: the Settings page itself was not screenshotted; the control is the dashboard's existing
SegmentedControlprimitive.🤖 Generated with Claude Code
https://claude.ai/code/session_01EjYedJiSYGbTMY1NbL8mdK