Skip to content

fix: cycle through system theme in ThemeToggle - #109

Open
06mia wants to merge 1 commit into
OpenNSWM-Lab:mainfrom
06mia:fix/theme-toggle-cycle
Open

fix: cycle through system theme in ThemeToggle#109
06mia wants to merge 1 commit into
OpenNSWM-Lab:mainfrom
06mia:fix/theme-toggle-cycle

Conversation

@06mia

@06mia 06mia commented Aug 30, 2026

Copy link
Copy Markdown

The theme toggle button currently only switches between light and dark. Users who set the theme to "system" in Preferences have no way to cycle back to it from the toggle — they have to go to Settings. This PR adds system to the toggle cycle.

Current behavior: light <-> dark (binary toggle)

New behavior: light -> dark -> system -> light (3-way cycle)

Changes in frontend/src/components/layout/ThemeToggle.tsx

  • Added Monitor icon import from lucide-react for the system theme indicator
  • Imported the Theme type from the theme hook for type-safe cycle definition
  • Defined a THEME_CYCLE array (['light', 'dark', 'system']) and a nextTheme() helper that advances through the cycle
  • Destructured theme (the stored preference) in addition to resolvedTheme (the effective value after resolving "system"), so the cycle operates on the user's actual selection rather than the resolved value
  • Updated the icon logic: Monitor when theme === 'system', Sun when resolved is dark, Moon when resolved is light
  • Updated the aria-label/title to describe the next theme the user will get, including a new "Switch to system theme" / "切换到跟随系统" label

Why theme vs resolvedTheme matters

The cycle must operate on what the user selected, not what the OS is currently reporting. If the user picks "system" and their OS is dark, resolvedTheme is 'dark'. With the old code, clicking would set theme to 'light' — skipping system entirely. By cycling on theme, the three states are all reachable.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant