webpack / webpack/webpack-doc-kit
fix: Theme toggle icon resets to System icon on page refresh despite active Dark/Light theme
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 22
- Forks
- 88
- Avg merge
- 1d 23h
- Merged PRs (30d)
- 12
Description
Summary
Fix the theme toggle icon resetting to the System icon after page refresh.
Issue
The selected theme is saved correctly, but after refreshing the page, the toggle still shows the System icon instead of the Sun or Moon icon.
Root Cause
During SSR, the System icon is rendered by default. During Preact hydration, the existing SVG is reused instead of being replaced with the correct theme icon.
Proposed Fix
Add a key={currentTheme} prop to the trigger icon so Preact's reconciler cleanly replaces the stale server-rendered SVG node during client hydration:
<TriggerIcon key={currentTheme} height="20" />
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start at the theme toggle trigger icon implementation and inspect how currentTheme is used during SSR and hydration. Add the key behavior described in the issue, then verify after a page refresh that persisted Dark and Light themes display the Moon and Sun icons instead of System.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 82/100