import { useEffect, useState } from 'react' type Theme = 'light' | 'dark' export default function ThemeSwitcher() { const [theme, setTheme] = useState(() => { // 初始化时读取保存的主题 if (typeof window !== 'undefined') { const savedTheme = localStorage.getItem('theme') as Theme | null if (savedTheme === 'light' || savedTheme === 'dark') { return savedTheme } // 默认跟随系统 return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' } return 'light' }) useEffect(() => { // 应用主题 if (theme === 'dark') { document.documentElement.classList.add('dark') document.documentElement.style.colorScheme = 'dark' } else { document.documentElement.classList.remove('dark') document.documentElement.style.colorScheme = 'light' } // 保存到 localStorage localStorage.setItem('theme', theme) }, [theme]) // 监听系统主题变化 useEffect(() => { const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)') const handleSystemThemeChange = (e: MediaQueryListEvent) => { // 只有在用户未手动设置时才自动跟随系统 const savedTheme = localStorage.getItem('theme') if (!savedTheme) { setTheme(e.matches ? 'dark' : 'light') } } mediaQuery.addEventListener('change', handleSystemThemeChange) return () => mediaQuery.removeEventListener('change', handleSystemThemeChange) }, []) const toggleTheme = () => { setTheme((prev) => (prev === 'light' ? 'dark' : 'light')) } return ( ) }