Fix: The light/dark mode toggle is behaving strangely when the page is reloaded

[rishabh30Gupta]

Description

Fixes the theme toggle displaying the wrong icon after page reload.

Problem

When the page was reloaded while in light mode, the toggle would incorrectly show a moon icon instead of the expected sun icon, even though the page correctly remained in light mode.

Root Cause

The issue was a hydration timing problem with next-themes. The component would render before resolvedTheme was available from localStorage, causing a brief moment where the wrong icon was displayed.

Solution

Modified components/toggle-theme.tsx to wait for both mounted state and resolvedTheme to be available before rendering the interactive toggle. This ensures the correct icon is always displayed after hydration.

Changes

• Updated the conditional check from if (!mounted) to if (!mounted || !resolvedTheme)
• Added explanatory comment about waiting for theme resolution

Testing

Tested light mode reload - toggle correctly shows sun icon
Tested dark mode reload - toggle correctly shows moon icon
Theme persistence works correctly across reloads

Summary by CodeRabbit

• Bug Fixes
  • Enhanced theme toggle rendering to ensure proper initialization and display consistency.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

The toggle-theme component's hydration guard is updated to defer rendering until both the component is mounted and resolvedTheme is available, replacing the previous check for mounted alone. Additional formatting adjustments are made to className strings.

Changes

Cohort / File(s)	Change Summary
Hydration Guard Enhancement components/toggle-theme.tsx	Updated early-return guard logic to check both mounted and resolvedTheme availability before rendering the interactive toggle; applied minor className formatting adjustments

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Possibly related PRs

• Fixed Favicon duplication and hydration error #8 — Both PRs modify the same toggle-theme component's client-side hydration guard, with this PR tightening the guard to require both mounted and resolvedTheme states.
• Fix: Theme toggle icon displays incorrectly on light mode reload #9 — Related updates to the same toggle-theme component that rely on resolvedTheme for theme state logic.

Suggested reviewers

• Zahnentferner

Poem

🐰 A rabbit hops through hydration streams,
Where mounted states and themes align,
No flickering, no broken dreams—
Just steady toggles, perfectly fine! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the main fix: addressing the theme toggle behavior issue when the page is reloaded, which aligns with the core change to defer rendering until resolvedTheme is available.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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 and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

components/toggle-theme.tsx (1)

34-54: Optional: Consider adjusting placeholder semantics for screen readers.

The placeholder has role="button" and aria-label but no click handler, which could be briefly confusing for assistive technology. Since this state is very short-lived, the impact is minimal.

If you'd like to improve it, consider either:

• Removing role="button" from the placeholder, or
• Adding aria-busy="true" to signal loading state

     <div
       className="flex items-center space-x-4"
       aria-label="Toggle theme"
-      role="button"
+      aria-busy="true"
     >

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 72f97c5 and 3eb681c.

📒 Files selected for processing (1)

• components/toggle-theme.tsx (3 hunks)

🔇 Additional comments (1)

components/toggle-theme.tsx (1)

32-33: LGTM! Core fix correctly addresses the hydration timing issue.

The updated guard ensures the interactive toggle waits for resolvedTheme to be available from localStorage, preventing the wrong icon from displaying after reload. The added comment clearly explains the intention.

Minor note: The placeholder (lines 40-47) always shows the sun icon, so dark-mode users may see a brief light-mode flash during hydration. This is likely acceptable given how brief the delay typically is with next-themes.