issue #3: Fix: Resolve Hydration Error and Optimize theme-switch.tsx for Better Theme Handling

[sumanpaikdev]

This pull request addresses two key issues:

1. Hydration Error:

• The previous implementation caused a hydration mismatch due to theme initialization conflicts between server-side rendering (SSR) and client-side rendering (CSR).
• The updated code ensures proper synchronization of the theme state by deferring rendering until the client-side theme is correctly initialized.

2. Optimization of theme-switch.tsx:

• Improved logic for detecting and applying system theme preferences (light or dark) dynamically.
• Enhanced readability and maintainability by abstracting repetitive operations into reusable methods.
• Ensures a seamless user experience by synchronizing the theme with user preferences stored in localStorage and system theme changes.

Changes Made

• Added a mounted state to defer rendering until the theme state is fully initialized.
• Removed unnecessary direct DOM manipulations to avoid SSR/CSR conflicts.
• Improved the toggleTheme function for cleaner state management.
• Added support for dynamic system theme updates using window.matchMedia.

Testing

• Tested on multiple browsers and devices to ensure theme toggling and synchronization work as expected.
• Verified that the hydration error no longer occurs during SSR/CSR transitions.
• Confirmed that user preferences persist across sessions and adapt to system theme changes.
  

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
nextfolio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 20, 2025 10:55am

[JAlexMcGraw]

Copied over the hydration error fix and works great for me. Please merge this!

[h4kyu]

This is a great fix, thanks @sumanpaikdev. I noticed however when the user's system preference is set to dark theme the theme on site is accordingly dark but is stored as light, since it is set to light by default upon loading. This results in the button and the actual theme being out of sync initially. Instead, the initial value can be read directly from the system as before:

const [currentTheme, setCurrentTheme] = React.useState<"light" | "dark">(() => {
  if (typeof window !== "undefined") {
    const storedPreference = localStorage.getItem(storageKey) as "light" | "dark" | null;
    if (storedPreference) return storedPreference;
    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
  }
  return "light"; // Default for SSR (avoids hydration mismatch)
});

This of course brings back the Hydration error, but this can be fixed by wrapping Theme Switch's return with a mounted check as follows:

if (!mounted) {
  return <div style={{ visibility: "hidden" }} />;
}