feat(frontend): reading theme token group + useGlobalDark for auto linkage (B0)

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);
+}

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);