fix: preserve theme toggle icon after hydration

[puneetnith28]

Summary

Fixes an issue where the theme toggle icon changes back to the System icon after refreshing the page, even though the selected Light/Dark theme is applied correctly.

Problem

After refreshing the page:

• The selected theme is still correct.
• But the theme toggle shows the System icon instead of the Sun or Moon icon.

Fix

This PR uses a two-step rendering approach:

1. Initially render the System icon so it matches the server-rendered HTML.
2. After hydration, use useEffect to update the state.
3. The correct Sun/Moon icon is then rendered based on the saved theme preference.

Result

Demo.mp4

Files Added

• patches/@doc-kit+generator-react+0.2.0.patch
  • Added the hydration fix to the @doc-kit/generator-react wrapper component.

Closes #269

Summary by CodeRabbit

• Bug Fixes

  • Improved theme handling during page loading to prevent incorrect theme displays before hydration completes.

• Chores

  • Added automatic application of required installation patches.

[vercel]

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

Project	Deployment	Actions	Updated
webpack-doc-kit	Ready	Preview	Sep 15, 2026 9:42am UTC

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	patch-package@​8.0.1

View full report

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: a3b7b6cd-3e95-4263-82b5-e8823a044a54

📥 Commits

Reviewing files that changed from the base of the PR and between 2d448d5 and 7790c4d.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (2)

• package.json
• patches/@doc-kit+generator-react+0.2.0.patch

Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review.

---

Walkthrough

The package configuration adds patch-package and runs it through a postinstall script. The React generator patch imports useState and useEffect, tracks hydration, and passes system to ThemeToggle before hydration. After hydration, it passes the stored theme preference.

Priority: ➖ Normal

Severity of issue fixed: Medium

Merge Risk: ⚪ Minimal · up to 7790c

The patch preserves server-rendered theme markup and applies the saved preference after hydration; supported installation workflows and the lockfile are consistent.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The PR addresses issue #269. The patch keeps currentTheme as system during server-compatible initial render, then updates it after hydration from themePreference with useEffect. This displays …
Out of Scope Changes check	✅ Passed	The changes remain within issue #269 scope. The patch-package dependency, postinstall script, and package patch deliver the @doc-kit/generator-react fix. No unrelated product behavior is changed…
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0…
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main change: preserving the theme toggle icon after hydration. It matches the stated PR objectives and patch behavior.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[puneetnith28]

The large changes in package-lock.json (+284, -63) are simply the automatic result of running npm install patch-package. NPM locked in the exact versions of patch-package and its necessary sub-dependencies, while simultaneously performing its standard auto-cleanup of older deduplicated packages.

[puneetnith28]

Please review this PR and let me know if any further changes are needed.
Thanks!!

[TusharThakur04]

it has to be resolved at doc-kit

[ryzrr]

Yes,It should be fixed upstream maybe we start at system, then set the stored value in a useEffect

[puneetnith28]

@TusharThakur04 @ryzrr
Thanks for the guidance!
Could you provide a bit more clarification on this approach? I want to make sure I implement it exactly as intended.

[avivkeller]

Fix this upstream rather than adding a patch package feature

[puneetnith28]

The work is continued here --> nodejs/doc-kit#1103
Thanks !!