Skip to content

fix(ui): resolve theme toggle icon hydration mismatch - #9160

Merged
AugustinMauroy merged 1 commit into
nodejs:mainfrom
moshams272:fix/theme-toggle-hydration
Sep 19, 2026
Merged

AugustinMauroy merged 1 commit into
nodejs:mainfrom
moshams272:fix/theme-toggle-hydration

Conversation

@moshams272

@moshams272 moshams272 commented Sep 16, 2026

Copy link
Copy Markdown
Contributor

Description

This PR fixes a visual hydration mismatch bug in the ThemeToggle component, which currently causes the theme icon to get stuck on nodejs.org/learn pages (powered by doc-kit). Other pages avoid this issue because their hydration is handled by next-themes.

By adding a key={currentTheme} prop to TriggerIcon, we force React/Preact to remount the correct SVG node on theme changes, rather than incorrectly attempting to reuse the stale server-rendered SVG.

Thanks @puneetnith28 for initially proposing this fix in webpack/webpack-doc-kit/pull/270.

Validation

Can not validate it solves it or not, but can validate the issue. As when click on learn it always goes to the nodejs.org/learn.

Related Issues

None.

Check List

  • I have read the Contributing Guidelines and made commit messages that follow the guideline.
  • I have run pnpm format to ensure the code follows the style guide.
  • I have run pnpm test to check if all tests are passing.
  • I have run pnpm build to check if the website builds without errors.
  • I've covered new added functionality with unit tests if necessary.

@moshams272
moshams272 requested a review from a team as a code owner September 16, 2026 13:20
@vercel

vercel Bot commented Sep 16, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
nodejs-org Ready Ready Preview Sep 16, 2026 1:21pm UTC

Request Review

@codecov

codecov Bot commented Sep 19, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 86.04%. Comparing base (d4c2196) to head (af29941).
⚠️ Report is 2 commits behind head on main.
✅ All tests successful. No failed tests found.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #9160      +/-   ##
==========================================
- Coverage   86.15%   86.04%   -0.12%     
==========================================
  Files          86       86              
  Lines        6046     6046              
  Branches      357      358       +1     
==========================================
- Hits         5209     5202       -7     
- Misses        833      840       +7     
  Partials        4        4              

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

@AugustinMauroy
AugustinMauroy added this pull request to the merge queue Sep 19, 2026
@github-actions

Copy link
Copy Markdown
Contributor

📦 Build Size Comparison

Summary

Metric Value
Old Total First Load JS 7.10 MB
New Total First Load JS 7.10 MB
Delta 692.00 B (+0.01%)

Changes

🔄 Modified Routes (4)
Route Old First Load JS New First Load JS Delta
/[locale] 1.67 MB 1.67 MB 📈 173.00 B (+0.01%)
/[locale]/[...path] 1.67 MB 1.67 MB 📈 173.00 B (+0.01%)
/[locale]/blog/[...path] 1.67 MB 1.67 MB 📈 173.00 B (+0.01%)
/[locale]/download/archive/[version] 1.67 MB 1.67 MB 📈 173.00 B (+0.01%)

Merged via the queue into nodejs:main with commit a3032d2 Sep 19, 2026
17 of 21 checks passed
@moshams272
moshams272 deleted the fix/theme-toggle-hydration branch September 20, 2026 07:05
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.

4 participants