fix: Theme toggle icon resets to System icon on page refresh despite active Dark/Light theme

[puneetnith28]

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" />

[puneetnith28]

Hello @moshams272
Could you please review this and let me know if this approach looks good to you?
I will proceed with the next step once you approve it.
Thanks !!

[avivkeller]

Feel free to open a PR

[TusharThakur04]

i think issue is at the doc-kit side

[moshams272]

doc-kit uses the ThemeToggle from the @node-core/ui-components package, so we should solve it from the source repo.

@puneetnith28 solved this in the right way, it just needs to be applied in the source. I'll take care of it. Nice work, buddy 🤍