From 655b77c2b742c39cc9055992b0ebb051e455ba02 Mon Sep 17 00:00:00 2001
From: XingfenD <xingfen.fendy@outlook.com>
Date: Wed, 16 Sep 2026 15:15:53 +0800
Subject: [PATCH] feat(frontend): reading theme token group + useGlobalDark for
 auto linkage (B0)

---
 frontend/src/components/theme.tsx | 16 ++++++++++++++++
 frontend/src/index.css            |  9 +++++++++
 2 files changed, 25 insertions(+)

diff --git a/frontend/src/components/theme.tsx b/frontend/src/components/theme.tsx
index 343bbdd..a94c9db 100644
--- a/frontend/src/components/theme.tsx
+++ b/frontend/src/components/theme.tsx
@@ -45,3 +45,19 @@ export function useTheme() {
   if (!v) throw new Error("useTheme outside ThemeProvider");
   return v;
 }
+
+const MQ = "(prefers-color-scheme: dark)";
+
+/** 全局主题的有效暗色态：dark→true；system→跟随媒体查询；light→false。供阅读主题 auto 联动。 */
+export function useGlobalDark(): boolean {
+  const { theme } = useTheme();
+  const [sysDark, setSysDark] = useState(() => typeof matchMedia === "function" && matchMedia(MQ).matches);
+  useEffect(() => {
+    if (theme !== "system") return;
+    const mq = matchMedia(MQ);
+    const on = () => setSysDark(mq.matches);
+    mq.addEventListener("change", on);
+    return () => mq.removeEventListener("change", on);
+  }, [theme]);
+  return theme === "dark" || (theme === "system" && sysDark);
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index a4f3965..1084f32 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -121,16 +121,25 @@ body {
   --rd-bg: #faf8f4;
   --rd-fg: #292524;
   --rd-link: #9a3412;
+  --rd-muted: #8a8378;
+  --rd-accent: #b45309;
+  --rd-border: #e4ded2;
 }
 [data-rd="sepia"] {
   --rd-bg: #f0e6d2;
   --rd-fg: #433a29;
   --rd-link: #92400e;
+  --rd-muted: #857a63;
+  --rd-accent: #92400e;
+  --rd-border: #ddd0b4;
 }
 [data-rd="night"] {
   --rd-bg: #171512;
   --rd-fg: #c6c0b6;
   --rd-link: #e0a458;
+  --rd-muted: #8b8579;
+  --rd-accent: #e0a458;
+  --rd-border: #322e27;
 }
 .rd-surface {
   background: var(--rd-bg);