Fix theme toggle by removing unnecessary mounted check
This commit is contained in:
@@ -508,11 +508,4 @@ function HomeInner() {
|
||||
);
|
||||
}
|
||||
|
||||
function Home() {
|
||||
const [mounted, setMounted] = useState(false);
|
||||
useEffect(() => setMounted(true), []);
|
||||
if (!mounted) return <div className="min-h-screen bg-zinc-50 dark:bg-zinc-900"></div>;
|
||||
return <HomeInner />;
|
||||
}
|
||||
|
||||
export default Home;
|
||||
export default HomeInner;
|
||||
|
||||
@@ -16,7 +16,6 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
const savedTheme = localStorage.getItem("theme") as Theme | null;
|
||||
if (savedTheme) {
|
||||
setTheme(savedTheme);
|
||||
@@ -27,6 +26,7 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
|
||||
setTheme("dark");
|
||||
document.documentElement.classList.add("dark");
|
||||
}
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
const toggleTheme = () => {
|
||||
@@ -44,7 +44,7 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
|
||||
|
||||
return (
|
||||
<ThemeContext.Provider value={{ theme, toggleTheme }}>
|
||||
{mounted ? children : <div>{children}</div>}
|
||||
{children}
|
||||
</ThemeContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user