feat: 实现暗色主题切换功能并优化样式

添加完整的暗色主题支持，包括主题模式切换功能（自动/浅色/深色），重构主题相关代码为模块化结构，更新CSS变量以支持主题切换，并在布局中添加主题切换控件

Author: VirtualHotBar

src/components/FileCard.tsx

@@ -70,7 +70,7 @@ export const FileCard: React.FC<FileCardProps> = ({
     <div className="file-card">
       <Card
         title={title}
-        actions={<span style={{color:"black"}}>{info.PushTime}</span>}
+        actions={<span className="file-card-time">{info.PushTime}</span>}
         bordered
         hoverShadow
         footer={

src/global/index.ts

@@ -1,25 +1,72 @@
+export type ThemeMode = 'auto' | 'dark' | 'light';
 
+const THEME_MODE_KEY = 'winnew-theme-mode';
+const THEME_MODE_ATTR = 'theme-mode';
+const THEME_MODE_CHANGE_EVENT = 'theme-mode-change';
+const colorSchemeMedia = window.matchMedia('(prefers-color-scheme: dark)');
 
-//设置颜色模式
-document.documentElement.removeAttribute('theme-mode');
-/*   function matchMode() {
-    // detect if on dark mode
-    var isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    const body = document.body;
-    if (isDarkMode) {
-      if (!body.hasAttribute('theme-mode')) {
-        // 设置暗色模式
-        document.documentElement.setAttribute('theme-mode', 'dark');
-      }
-    }
-    else {
-      // 重置为浅色模式
-      document.documentElement.removeAttribute('theme-mode');
-    }
+function setDocumentThemeMode(mode: ThemeMode): void {
+  if (mode === 'dark') {
+    document.documentElement.setAttribute(THEME_MODE_ATTR, 'dark');
+    return;
   }
 
-  matchMode()
+  if (mode === 'light') {
+    document.documentElement.removeAttribute(THEME_MODE_ATTR);
+    return;
+  }
+
+  if (colorSchemeMedia.matches) {
+    document.documentElement.setAttribute(THEME_MODE_ATTR, 'dark');
+  } else {
+    document.documentElement.removeAttribute(THEME_MODE_ATTR);
+  }
+}
+
+function dispatchThemeModeChange(mode: ThemeMode): void {
+  window.dispatchEvent(new CustomEvent<ThemeMode>(THEME_MODE_CHANGE_EVENT, { detail: mode }));
+}
+
+export function getThemeMode(): ThemeMode {
+  const storedMode = window.localStorage.getItem(THEME_MODE_KEY);
+  if (storedMode === 'dark' || storedMode === 'light' || storedMode === 'auto') {
+    return storedMode;
+  }
+  return 'auto';
+}
+
+export function setThemeMode(mode: ThemeMode): void {
+  window.localStorage.setItem(THEME_MODE_KEY, mode);
+  setDocumentThemeMode(mode);
+  dispatchThemeModeChange(mode);
+}
+
+export function subscribeThemeModeChange(callback: (mode: ThemeMode) => void): () => void {
+  const handler = (event: Event) => {
+    const customEvent = event as CustomEvent<ThemeMode>;
+    callback(customEvent.detail);
+  };
+
+  window.addEventListener(THEME_MODE_CHANGE_EVENT, handler);
+  return () => window.removeEventListener(THEME_MODE_CHANGE_EVENT, handler);
+}
+
+function syncAutoTheme(): void {
+  const mode = getThemeMode();
+  if (mode === 'auto') {
+    setDocumentThemeMode('auto');
+  }
+}
+
+function initThemeMode(): void {
+  const currentMode = getThemeMode();
+  setDocumentThemeMode(currentMode);
+
+  if (typeof colorSchemeMedia.addEventListener === 'function') {
+    colorSchemeMedia.addEventListener('change', syncAutoTheme);
+  } else {
+    colorSchemeMedia.addListener(syncAutoTheme);
+  }
+}
 
-  //监听颜色模式
-  const mql = window.matchMedia('(prefers-color-scheme: dark)');
-  mql.addListener(matchMode);  */
+initThemeMode();

src/global/main.css

@@ -4,9 +4,50 @@
   --app-text: #1d2638;
   --app-text-muted: #5f6f87;
   --app-primary: #0f6adf;
+  --app-primary-hover: #0d5bc0;
   --app-primary-soft: #eaf3ff;
   --app-border: #dbe4f2;
   --app-shadow: 0 6px 20px rgba(18, 41, 79, 0.05);
+  --app-bg-grad-start: #e9f1ff;
+  --app-bg-grad-mid: #f5f7fb;
+  --app-bg-grad-end: #eef2fa;
+  --app-header-bg: rgba(255, 255, 255, 0.78);
+  --app-header-border: rgba(219, 228, 242, 0.7);
+  --app-header-shadow: 0 6px 22px rgba(26, 48, 87, 0.08);
+  --app-panel-bg-start: rgba(255, 255, 255, 0.9);
+  --app-panel-bg-end: rgba(255, 255, 255, 0.83);
+  --app-panel-border: rgba(219, 228, 242, 0.7);
+  --app-panel-inset: rgba(255, 255, 255, 0.65);
+  --app-panel-lite-bg: rgba(255, 255, 255, 0.72);
+  --app-panel-lite-border: rgba(219, 228, 242, 0.85);
+  --app-row-bg: #ffffff;
+  --app-file-card-shadow: 0 8px 24px rgba(17, 36, 66, 0.06);
+}
+
+[theme-mode='dark'] {
+  --app-bg: #121212;
+  --app-surface: #1b1b1b;
+  --app-text: #f1f1f1;
+  --app-text-muted: #acacac;
+  --app-primary: #f59e0b;
+  --app-primary-hover: #fbbf24;
+  --app-primary-soft: #3a2a12;
+  --app-border: #353535;
+  --app-shadow: 0 12px 30px rgba(0, 0, 0, 0.38);
+  --app-bg-grad-start: #1a1a1a;
+  --app-bg-grad-mid: #121212;
+  --app-bg-grad-end: #0d0d0d;
+  --app-header-bg: rgba(24, 24, 24, 0.8);
+  --app-header-border: rgba(63, 63, 63, 0.78);
+  --app-header-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+  --app-panel-bg-start: rgba(30, 30, 30, 0.92);
+  --app-panel-bg-end: rgba(24, 24, 24, 0.86);
+  --app-panel-border: rgba(70, 70, 70, 0.58);
+  --app-panel-inset: rgba(255, 255, 255, 0.03);
+  --app-panel-lite-bg: rgba(28, 28, 28, 0.74);
+  --app-panel-lite-border: rgba(74, 74, 74, 0.68);
+  --app-row-bg: #202020;
+  --app-file-card-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
 }
 
 *,
@@ -22,11 +63,17 @@ body,
 }
 
 html {
-  background: radial-gradient(circle at top right, #e9f1ff 0%, #f5f7fb 42%, #eef2fa 100%);
+  background: radial-gradient(
+    circle at top right,
+    var(--app-bg-grad-start) 0%,
+    var(--app-bg-grad-mid) 42%,
+    var(--app-bg-grad-end) 100%
+  );
 }
 
 body {
   margin: 0;
+  background: var(--app-bg);
   color: var(--app-text);
   line-height: 1.6;
 }
@@ -51,9 +98,9 @@ p {
   top: 0;
   z-index: 100;
   backdrop-filter: blur(9px);
-  background: rgba(255, 255, 255, 0.78);
-  border-bottom: 1px solid rgba(219, 228, 242, 0.7);
-  box-shadow: 0 6px 22px rgba(26, 48, 87, 0.08);
+  background: var(--app-header-bg);
+  border-bottom: 1px solid var(--app-header-border);
+  box-shadow: var(--app-header-shadow);
 }
 
 .main-menu {
@@ -65,6 +112,28 @@ p {
   flex: 1;
 }
 
+.theme-mode-control {
+  width: 40px;
+  margin-right: 10px;
+}
+
+.theme-mode-link {
+  display: inline-flex;
+  width: 28px;
+  height: 28px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  font-size: 16px;
+  color: var(--app-text-muted);
+  transition: color 0.2s ease, background-color 0.2s ease;
+}
+
+.theme-mode-link:hover {
+  background: var(--app-primary-soft);
+  color: var(--app-primary);
+}
+
 .brand-logo {
   color: var(--app-text);
   font-size: 24px;
@@ -87,10 +156,10 @@ p {
 }
 
 .panel {
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.83) 100%);
-  border: 1px solid rgba(219, 228, 242, 0.7);
+  background: linear-gradient(180deg, var(--app-panel-bg-start) 0%, var(--app-panel-bg-end) 100%);
+  border: 1px solid var(--app-panel-border);
   border-radius: 20px;
-  box-shadow: var(--app-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.65);
+  box-shadow: var(--app-shadow), inset 0 1px 0 var(--app-panel-inset);
 }
 
 .home-page {
@@ -131,9 +200,9 @@ p {
 }
 
 .panel-lite {
-  border: 1px solid rgba(219, 228, 242, 0.85);
+  border: 1px solid var(--app-panel-lite-border);
   border-radius: 14px;
-  background: rgba(255, 255, 255, 0.72);
+  background: var(--app-panel-lite-bg);
   padding: 14px;
 }
 
@@ -187,7 +256,7 @@ p {
   border: 1px solid var(--app-border);
   border-radius: 12px;
   padding: 10px 12px;
-  background: #fff;
+  background: var(--app-row-bg);
 }
 
 .file-list-main {
@@ -236,7 +305,7 @@ p {
 .file-card .t-card {
   border-radius: 16px;
   border: 1px solid var(--app-border);
-  box-shadow: 0 8px 24px rgba(17, 36, 66, 0.06);
+  box-shadow: var(--app-file-card-shadow);
 }
 
 .file-card .t-card__body {
@@ -255,13 +324,17 @@ p {
   margin-top: 10px;
   display: block;
   text-align: center;
-  color: #000;
+  color: var(--app-text);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   cursor: pointer;
 }
 
+.file-card-time {
+  color: var(--app-text);
+}
+
 .file-card-sha-label {
   color: var(--app-text-muted);
   font-weight: 400;
@@ -356,7 +429,7 @@ a.file-card-title-edition .t-link__suffix-icon {
 
 .copyright {
   margin-top: 10px;
-  border-top: 1px solid rgba(219, 228, 242, 0.9);
+  border-top: 1px solid var(--app-panel-lite-border);
   padding-top: 12px;
 }
 
@@ -367,7 +440,7 @@ a.file-card-title-edition .t-link__suffix-icon {
 }
 
 .class-link:hover {
-  color: #0d5bc0;
+  color: var(--app-primary-hover);
   opacity: 0.95;
 }
 

src/layout/layout.tsx

@@ -1,11 +1,12 @@
-
-import { Layout, Menu } from 'tdesign-react';
+import React, { useEffect, useState } from 'react';
+import { Layout, Menu, Link as TLink, Tooltip } from 'tdesign-react';
+import { LaptopIcon, ModeDarkIcon, ModeLightIcon } from 'tdesign-icons-react';
 import 'tdesign-react/es/style/index.css';
 import {
   BrowserRouter as Router,
   Routes,
   Route,
-  Link,
+  Link as RouterLink,
   useLocation,
 } from 'react-router-dom';
 
@@ -18,10 +19,28 @@ import { FooterContent } from '../layout/footer';
 import type { RouterItem } from '../types/layout';
 import { useRouterSEO, type SEOConfig } from '../hooks/useSEO';
 import { pages } from '../pages.config';
+import {
+  getThemeMode,
+  setThemeMode,
+  subscribeThemeModeChange,
+  type ThemeMode,
+} from '../global/index';
 
 const { Header, Content, Footer } = Layout;
 const { HeadMenu, MenuItem } = Menu;
 
+const THEME_MODE_ICON: Record<ThemeMode, React.ReactNode> = {
+  auto: <LaptopIcon />,
+  dark: <ModeDarkIcon />,
+  light: <ModeLightIcon />,
+};
+
+const THEME_MODE_LABEL: Record<ThemeMode, string> = {
+  auto: '自动',
+  dark: '深色',
+  light: '浅色',
+};
+
 const routers: RouterItem[] = [
   {
     word: '首页',
@@ -75,21 +94,47 @@ export function Layout_() {
 
 function AppLayout() {
   const location = useLocation();
+  const [themeMode, setThemeModeState] = useState<ThemeMode>(getThemeMode());
+
+  useEffect(() => subscribeThemeModeChange(setThemeModeState), []);
+
+  const handleThemeModeToggle = () => {
+    const nextMode: ThemeMode =
+      themeMode === 'auto' ? 'dark' : themeMode === 'dark' ? 'light' : 'auto';
+    setThemeMode(nextMode);
+  };
 
   return (
     <Layout className="app-layout">
       <Header className="app-header">
         <div className="container">
           <HeadMenu
             value={location.pathname}
-            theme="light"
-            logo={<Link className="brand-logo" to="/">WinNew</Link>}
+            theme={themeMode === 'dark' ? 'dark' : 'light'}
+            logo={<RouterLink className="brand-logo" to="/">WinNew</RouterLink>}
             className="main-menu"
           >
             <div className="menu-spacer" />
+            <div className="theme-mode-control">
+              <Tooltip
+                content={`当前：${THEME_MODE_LABEL[themeMode]}（点击切换）`}
+                placement="bottom"
+                showArrow
+              >
+                <TLink
+                  className="theme-mode-link"
+                  theme="default"
+                  hover="color"
+                  underline={false}
+                  onClick={handleThemeModeToggle}
+                >
+                  {THEME_MODE_ICON[themeMode]}
+                </TLink>
+              </Tooltip>
+            </div>
             {routers.map((item) => (
               <MenuItem key={item.path} value={item.path}>
-                <Link to={item.path}>{item.word}</Link>
+                <RouterLink to={item.path}>{item.word}</RouterLink>
               </MenuItem>
             ))}
           </HeadMenu>