63 lines
1.7 KiB
TypeScript
63 lines
1.7 KiB
TypeScript
/* eslint-disable @typescript-eslint/no-explicit-any,react-hooks/exhaustive-deps */
|
|
|
|
'use client';
|
|
|
|
import { Moon, Sun } from 'lucide-react';
|
|
import { useTheme } from 'next-themes';
|
|
import { useEffect, useState } from 'react';
|
|
|
|
export function ThemeToggle() {
|
|
const [mounted, setMounted] = useState(false);
|
|
const { setTheme, resolvedTheme } = useTheme();
|
|
|
|
const setThemeColor = (theme?: string) => {
|
|
const meta = document.querySelector('meta[name="theme-color"]');
|
|
if (!meta) {
|
|
const meta = document.createElement('meta');
|
|
meta.name = 'theme-color';
|
|
meta.content = theme === 'dark' ? '#0c111c' : '#f9fbfe';
|
|
document.head.appendChild(meta);
|
|
} else {
|
|
meta.setAttribute('content', theme === 'dark' ? '#0c111c' : '#f9fbfe');
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
setThemeColor(resolvedTheme);
|
|
}, []);
|
|
|
|
if (!mounted) {
|
|
// 渲染一个占位符以避免布局偏移
|
|
return <div className='w-10 h-10' />;
|
|
}
|
|
|
|
const toggleTheme = () => {
|
|
// 检查浏览器是否支持 View Transitions API
|
|
const targetTheme = resolvedTheme === 'dark' ? 'light' : 'dark';
|
|
setThemeColor(targetTheme);
|
|
if (!(document as any).startViewTransition) {
|
|
setTheme(targetTheme);
|
|
return;
|
|
}
|
|
|
|
(document as any).startViewTransition(() => {
|
|
setTheme(targetTheme);
|
|
});
|
|
};
|
|
|
|
return (
|
|
<button
|
|
onClick={toggleTheme}
|
|
className='w-10 h-10 p-2 rounded-full flex items-center justify-center text-gray-600 hover:bg-gray-200/50 dark:text-gray-300 dark:hover:bg-gray-700/50 transition-colors'
|
|
aria-label='Toggle theme'
|
|
>
|
|
{resolvedTheme === 'dark' ? (
|
|
<Sun className='w-full h-full' />
|
|
) : (
|
|
<Moon className='w-full h-full' />
|
|
)}
|
|
</button>
|
|
);
|
|
}
|