Skip to content

fix: web theme toggle shows light/dark only, never the system icon - #703

Open
time-attack wants to merge 1 commit into
yc-software:mainfrom
time-attack:fix-theme-toggle-icon
Open

fix: web theme toggle shows light/dark only, never the system icon#703
time-attack wants to merge 1 commit into
yc-software:mainfrom
time-attack:fix-theme-toggle-icon

Conversation

@time-attack

@time-attack time-attack commented Aug 27, 2026

Copy link
Copy Markdown
Collaborator

Problem

The web UI's theme toggle (<theme-toggle> from @mariozechner/mini-lit) would sometimes render the computer/monitor (system) icon instead of sun/moon.

Root cause is in the third-party component:

  • It treats absence of a localStorage.theme key as "system".
  • getIcon() returns the Monitor icon whenever theme === "system" — regardless of the includeSystem prop.

So any user who never set a theme (fresh load), or whose 3-state cycle landed on system, got the computer icon. We can't edit the compiled dependency, so this is fixed at our only consumer, plugins/web-ui/src/shell.ts.

Fix

  • .includeSystem=${false} — the toggle cycles light ↔ dark only and can never land on system.
  • On load, seed a concrete light/dark into localStorage.theme from the OS prefers-color-scheme when none is set, so the element never initializes to "system" and never paints the Monitor icon.

Behavior

First load reflects the user's OS preference (light or dark); after that the toggle just flips light↔dark. This intentionally drops OS-follow behavior in favor of an explicit two-state toggle — the reported bug was the system/computer state being unwanted.

Verification

  • tsc --noEmit clean, prettier + oxlint clean on the changed file.

View with [code]smith Autofix with [code]smith
Need help on this PR? Tag @codesmith-bot with what you need. Autofix is disabled.

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