Skip to content

fix: prevent theme switcher from overwriting saved theme on mount#50

Merged
BunsDev merged 3 commits intoOpenKnots:mainfrom
snowopsdev:fix/theme-switcher-hydration
Mar 9, 2026
Merged

fix: prevent theme switcher from overwriting saved theme on mount#50
BunsDev merged 3 commits intoOpenKnots:mainfrom
snowopsdev:fix/theme-switcher-hydration

Conversation

@snowopsdev
Copy link
Copy Markdown
Contributor

What does this PR do?

Fixes a bug where ThemeSwitcher overwrites the user's saved localStorage theme with the default 'dracula' theme on the initial render.

Problem

Previously, the second useEffect in ThemeSwitcher ran immediately on mount, writing the initial component state ('dracula') to localStorage before the first useEffect had a chance to apply the saved theme. This caused a flash of unstyled content and overwrote user preferences if the state didn't update fast enough or if multiple storage events fired.

Solution

  • Added a mounted state to defer the localStorage write until the component is fully mounted.
  • Updated the initial effect to apply the saved theme directly to the DOM when found, preventing the visual flash while React batches the state update.

Type of Change

  • 🐛 Bug fix

Checklist

  • Component works correctly
  • Build passes

@vercel
Copy link
Copy Markdown

vercel Bot commented Feb 28, 2026

@voqthekid is attempting to deploy a commit to the 0xBuns Team on Vercel.

A member of the Team first needs to authorize it.

Wait for component to mount before attempting to write the current theme state to localStorage. This prevents the initial 'dracula' state from clobbering the user's saved preference before the initial read effect can update the state.
@snowopsdev snowopsdev force-pushed the fix/theme-switcher-hydration branch from a615bba to 8ebfbab Compare February 28, 2026 17:00
@BunsDev
Copy link
Copy Markdown
Member

BunsDev commented Mar 9, 2026

Maintainer triage: keeping this open as one of the highest-value bugfixes in the queue. The change is narrowly scoped, addresses a real mount-time theme persistence bug, and does not overlap with the feature backlog. Once the branch is current with main, this is a strong candidate for merge ahead of most component-addition PRs.

@BunsDev BunsDev added blocked-infra Blocked by external tooling or integration setup ready-to-merge Maintainer triage says merge once checks are green bug Something isn't working labels Mar 9, 2026
@BunsDev
Copy link
Copy Markdown
Member

BunsDev commented Mar 9, 2026

Maintainer note: repo-owned Actions are now enabled and branch protection is live, but this PR still needs a fresh branch update from current main to pick up the corrected CI workflow definition. The rerun above is still using the pre-fix workflow snapshot, so treat the current Typecheck & Build failure as stale once the branch is refreshed.

@BunsDev BunsDev added the needs-rebase Branch should be refreshed against main label Mar 9, 2026
Copy link
Copy Markdown
Member

@BunsDev BunsDev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewed after branch refresh. The fix is narrowly scoped, the repo-owned checks now pass, and this remains a strong early merge candidate.

@BunsDev BunsDev merged commit e40d03a into OpenKnots:main Mar 9, 2026
2 of 4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

blocked-infra Blocked by external tooling or integration setup bug Something isn't working needs-rebase Branch should be refreshed against main ready-to-merge Maintainer triage says merge once checks are green

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants