153 lines
4.1 KiB
TypeScript
153 lines
4.1 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
|
import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
|
|
import { Button } from "@radix-ui/themes";
|
|
|
|
const THEME_KEY = "theme-preference";
|
|
|
|
// 添加这个脚本来预先设置主题，避免闪烁
|
|
const themeScript = `
|
|
(function() {
|
|
function getInitialTheme() {
|
|
const savedTheme = localStorage.getItem("${THEME_KEY}");
|
|
if (savedTheme) {
|
|
document.documentElement.className = savedTheme;
|
|
return savedTheme;
|
|
}
|
|
|
|
const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
const theme = isDark ? "dark" : "light";
|
|
document.documentElement.className = theme;
|
|
localStorage.setItem("${THEME_KEY}", theme);
|
|
return theme;
|
|
}
|
|
|
|
// 确保在 DOM 内容加载前执行
|
|
if (document.documentElement) {
|
|
getInitialTheme();
|
|
} else {
|
|
document.addEventListener('DOMContentLoaded', getInitialTheme);
|
|
}
|
|
})()
|
|
`;
|
|
|
|
export const ThemeScript = () => {
|
|
return <script dangerouslySetInnerHTML={{ __html: themeScript }} />;
|
|
};
|
|
|
|
export const ThemeModeToggle: React.FC = () => {
|
|
const [isDark, setIsDark] = useState<boolean | null>(null);
|
|
|
|
// 初始化主题状态
|
|
useEffect(() => {
|
|
if (typeof window !== 'undefined') {
|
|
const initTheme = () => {
|
|
const savedTheme = localStorage.getItem(THEME_KEY);
|
|
const currentTheme = document.documentElement.className;
|
|
|
|
// 确保 localStorage 和 DOM 的主题状态一致
|
|
if (savedTheme && savedTheme !== currentTheme) {
|
|
document.documentElement.className = savedTheme;
|
|
}
|
|
|
|
setIsDark(savedTheme === 'dark' || currentTheme === 'dark');
|
|
};
|
|
|
|
initTheme();
|
|
|
|
// 监听系统主题变化
|
|
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
|
const handleSystemThemeChange = (e: MediaQueryListEvent) => {
|
|
if (!localStorage.getItem(THEME_KEY)) {
|
|
const newTheme = e.matches ? 'dark' : 'light';
|
|
document.documentElement.className = newTheme;
|
|
setIsDark(e.matches);
|
|
}
|
|
};
|
|
|
|
mediaQuery.addEventListener('change', handleSystemThemeChange);
|
|
|
|
return () => {
|
|
mediaQuery.removeEventListener('change', handleSystemThemeChange);
|
|
};
|
|
}
|
|
}, []);
|
|
|
|
const toggleTheme = () => {
|
|
if (isDark === null) return;
|
|
const newIsDark = !isDark;
|
|
setIsDark(newIsDark);
|
|
const newTheme = newIsDark ? "dark" : "light";
|
|
document.documentElement.className = newTheme;
|
|
localStorage.setItem(THEME_KEY, newTheme);
|
|
};
|
|
|
|
if (isDark === null) {
|
|
return (
|
|
<Button
|
|
variant="ghost"
|
|
className="w-full h-full p-0 rounded-lg transition-all duration-300 transform"
|
|
aria-label="Loading theme"
|
|
>
|
|
<MoonIcon className="w-full h-full" />
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Button
|
|
variant="ghost"
|
|
onClick={toggleTheme}
|
|
className="w-full h-full p-0 rounded-lg transition-all duration-300 transform"
|
|
aria-label="Toggle theme"
|
|
>
|
|
{isDark ? (
|
|
<SunIcon className="w-full h-full" />
|
|
) : (
|
|
<MoonIcon className="w-full h-full" />
|
|
)}
|
|
</Button>
|
|
);
|
|
};
|
|
|
|
// 更新类型定义
|
|
declare global {
|
|
interface Window {
|
|
__THEME__?: "light" | "dark";
|
|
}
|
|
}
|
|
|
|
export const useThemeMode = () => {
|
|
const [mode, setMode] = useState<"light" | "dark">("light");
|
|
|
|
useEffect(() => {
|
|
if (typeof window !== "undefined") {
|
|
const saved = localStorage.getItem(THEME_KEY);
|
|
if (saved) {
|
|
setMode(saved as "light" | "dark");
|
|
} else {
|
|
const isDark = window.matchMedia(
|
|
"(prefers-color-scheme: dark)",
|
|
).matches;
|
|
setMode(isDark ? "dark" : "light");
|
|
}
|
|
|
|
// 监听主题变化事件
|
|
const handleThemeChange = (e: CustomEvent) => {
|
|
setMode(e.detail.theme);
|
|
};
|
|
|
|
window.addEventListener(
|
|
"theme-change",
|
|
handleThemeChange as EventListener,
|
|
);
|
|
return () =>
|
|
window.removeEventListener(
|
|
"theme-change",
|
|
handleThemeChange as EventListener,
|
|
);
|
|
}
|
|
}, []);
|
|
|
|
return { mode };
|
|
};
|