Fix theme toggle hydration mismatch

This commit is contained in:
2025-11-17 16:40:42 +08:00
parent e8436106c7
commit e64ec9a35d

View File

@@ -1,9 +1,19 @@
'use client'; 'use client';
import { useEffect, useState } from 'react';
import { useTheme } from 'next-themes'; import { useTheme } from 'next-themes';
export function ThemeToggle() { export function ThemeToggle() {
const { theme, setTheme } = useTheme(); const { theme, setTheme } = useTheme();
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
if (!mounted) {
return null;
}
const next = theme === 'dark' ? 'light' : 'dark'; const next = theme === 'dark' ? 'light' : 'dark';
@@ -17,4 +27,3 @@ export function ThemeToggle() {
</button> </button>
); );
} }