feat(ui): semantic light/dark tokens, ThemeProvider with FOUC guard, token-restyle Toaster/Cover

frontend/src/components/Cover.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import type { Book } from "../api/types";
 import { fetchObjectUrl } from "../lib/authImage";
 import { btn, formatBadge } from "./ui";
-import { IconAlert } from "./icons";
+import { TriangleAlert } from "lucide-react";
 
 export function useAuthedImage(url: string | undefined): { src: string; failed: boolean; retry: () => void } {
   const [state, setState] = useState<{ key: string; src: string; failed: boolean }>({ key: "", src: "", failed: false });
@@ -31,26 +31,26 @@ export function Cover({ book, className }: { book: Book; className?: string }) {
   if (!book.cover_url || failed) {
     return (
       <div
-        className={`relative grid place-items-center overflow-hidden bg-linear-to-br from-stone-800 to-stone-900 ${className ?? ""}`}
+        className={`relative grid place-items-center overflow-hidden bg-muted ${className ?? ""}`}
       >
-        <span className="select-none font-serif text-4xl text-stone-500">{Array.from(book.title)[0] ?? "?"}</span>
+        <span className="select-none font-serif text-4xl text-muted-foreground">{Array.from(book.title)[0] ?? "?"}</span>
         <span className={formatBadge(book.format, "absolute bottom-1.5 right-1.5")}>{book.format}</span>
         {failed && (
           <button className={btn + " absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"} onClick={retry}>
-            <IconAlert className="size-4" />
+            <TriangleAlert className="size-4" />
             封面重试
           </button>
         )}
       </div>
     );
   }
-  if (!src) return <div className={`animate-pulse bg-stone-800/80 ${className ?? ""}`} role="presentation" />;
+  if (!src) return <div className={`animate-pulse bg-muted ${className ?? ""}`} role="presentation" />;
   return (
     <img
       src={src}
       alt={`《${book.title}》封面`}
       loading="lazy"
-      className={`bg-stone-900 object-cover ${className ?? ""}`}
+      className={`bg-muted object-cover ${className ?? ""}`}
     />
   );
 }

frontend/src/components/Toaster.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState, type ReactNode } from "react";
-import { IconAlert, IconCheck } from "./icons";
+import { CheckCircle2, XCircle } from "lucide-react";
 
 type Toast = { id: number; kind: "ok" | "err"; text: ReactNode };
 
@@ -32,13 +32,11 @@ export function Toaster() {
         <div
           key={t.id}
           role="status"
-          className={`fx-rise flex max-w-sm items-center gap-2 rounded-xl px-4 py-2.5 text-sm shadow-xl ring-1 backdrop-blur-md ${
-            t.kind === "ok"
-              ? "bg-emerald-950/90 text-emerald-100 ring-emerald-500/25"
-              : "bg-red-950/90 text-red-100 ring-red-500/30"
+          className={`fx-rise flex max-w-sm items-center gap-2 rounded-lg border bg-card px-4 py-2.5 text-sm text-card-foreground shadow-lg ${
+            t.kind === "ok" ? "border-border" : "border-destructive/40"
           }`}
         >
-          {t.kind === "ok" ? <IconCheck className="size-4 shrink-0 text-emerald-400" /> : <IconAlert className="size-4 shrink-0 text-red-400" />}
+          {t.kind === "ok" ? <CheckCircle2 className="size-4 shrink-0 text-accent" /> : <XCircle className="size-4 shrink-0 text-destructive" />}
           {t.text}
         </div>
       ))}

frontend/src/components/theme.tsx

@@ -0,0 +1,47 @@
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, type ReactNode } from "react";
+
+export type Theme = "system" | "light" | "dark";
+const KEY = "ui.theme";
+const SYS = "(prefers-color-scheme: dark)";
+
+function read(): Theme {
+  try {
+    const v = localStorage.getItem(KEY);
+    return v === "light" || v === "dark" || v === "system" ? v : "system";
+  } catch {
+    return "system";
+  }
+}
+
+function apply(t: Theme) {
+  const dark = t === "dark" || (t === "system" && matchMedia(SYS).matches);
+  document.documentElement.classList.toggle("dark", dark);
+}
+
+const Ctx = createContext<{ theme: Theme; setTheme: (t: Theme) => void } | null>(null);
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, set] = useState<Theme>(read);
+  useEffect(() => {
+    apply(theme);
+    try {
+      localStorage.setItem(KEY, theme);
+    } catch {
+      /* 隐私模式:仅本次会话生效 */
+    }
+    if (theme !== "system") return;
+    const mq = matchMedia(SYS);
+    const on = () => apply("system");
+    mq.addEventListener("change", on);
+    return () => mq.removeEventListener("change", on);
+  }, [theme]);
+  const setTheme = useCallback((t: Theme) => set(t), []);
+  const value = useMemo(() => ({ theme, setTheme }), [theme, setTheme]);
+  return <Ctx.Provider value={value}>{children}</Ctx.Provider>;
+}
+
+export function useTheme() {
+  const v = useContext(Ctx);
+  if (!v) throw new Error("useTheme outside ThemeProvider");
+  return v;
+}