feat: 全局主题切换（浅色/深色/跟随系统）

- CSS 变量驱动的主题系统，所有颜色响应 data-theme 属性 - 新增语义化色彩 heading/secondary/tertiary，替换硬编码 text-white/text-gray-* - 右上角三态主题按钮（自动/浅色/深色），全局可用无需登录 - layout.tsx 内联脚本防闪烁 - 修复个人中心页面溢出无法滚动
2026-02-26 15:15:32 +08:00
parent 69dc78300e
commit 12279117f3
18 changed files with 186 additions and 92 deletions
@@ -21,13 +21,18 @@ export const viewport: Viewport = {
  userScalable: false,
 };

+const themeScript = `(function(){try{var t=localStorage.getItem("nowhatever-theme")||"system";var r=t;if(t==="system")r=window.matchMedia("(prefers-color-scheme:light)").matches?"light":"dark";document.documentElement.setAttribute("data-theme",r)}catch(e){}})()`;
+
 export default function RootLayout({
  children,
 }: Readonly<{
  children: React.ReactNode;
 }>) {
  return (
-    <html lang="zh-CN">
+    <html lang="zh-CN" suppressHydrationWarning>
+      <head>
+        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
+      </head>
      <body className={`${geistSans.variable} font-sans antialiased`}>
        <GlobalUserBadge />
        {children}