feat(frontend): put a light/dark/system control in the account menu

Appearance is a radio group inside the avatar menu rather than a loose button, so arrow keys reach it and the current choice is announced. Picking one keeps the menu open, so the change is visible where it was made. "跟随系统" removes data-theme instead of writing a third value — the media query has nothing to match otherwise. A synchronous script at the top of <head> re-applies a pinned choice before the first paint; going through next/script with any strategy would defer it and bring the flash straight back, so the test asserts a plain script tag. Blocked storage degrades to following the OS instead of throwing. The stored value is browser state, so it is read through useSyncExternalStore rather than synced into React state in an effect, which also trips the cascading-render lint rule. localStorage only fires `storage` in other tabs, so a same-tab write notifies its own listeners and every open tab stays in step. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0155nFCgCHtoA7jhSDGmZmMu
2026-08-29 12:12:06 +00:00
parent c2d705ef6e
commit 187ef6ae24
7 changed files with 220 additions and 2 deletions
@@ -36,6 +36,7 @@ import {
  type SidebarSession,
  type SidebarSessionControls,
 } from "@/components/sidebar-session-row";
+import { ThemePreferenceMenu } from "@/components/theme-preference-menu";
 import { UserAvatar } from "@/components/user-avatar";
 import type { BeamAvatar } from "@/lib/beam-avatar";

@@ -306,6 +307,8 @@ export function AppSidebar({
                  <Gift aria-hidden="true" /><span>兑换点数</span><small>{account.credits} 点</small>
                </Menu.Item>
                <Menu.Separator className="account-menu-separator" />
+                <ThemePreferenceMenu />
+                <Menu.Separator className="account-menu-separator" />
                <Menu.Item className="account-menu-item account-menu-danger" onClick={onOpenLogout}>
                  <LogOut aria-hidden="true" /><span>退出登录</span>
                </Menu.Item>
@@ -0,0 +1,62 @@
+"use client";
+
+import { Menu } from "@base-ui/react/menu";
+import { Check, Monitor, Moon, Sun } from "lucide-react";
+import { useSyncExternalStore } from "react";
+
+import {
+  applyThemePreference,
+  readThemePreference,
+  subscribeThemePreference,
+  type ThemePreference,
+} from "@/lib/theme-preference";
+
+const options: ReadonlyArray<{ value: ThemePreference; label: string }> = [
+  { value: "light", label: "浅色" },
+  { value: "dark", label: "深色" },
+  { value: "system", label: "跟随系统" },
+];
+
+function OptionIcon({ value }: { readonly value: ThemePreference }) {
+  if (value === "light") return <Sun aria-hidden="true" />;
+  if (value === "dark") return <Moon aria-hidden="true" />;
+  return <Monitor aria-hidden="true" />;
+}
+
+export function ThemePreferenceMenu() {
+  // The stored choice is browser state, not React state: read it through the
+  // external store so the server snapshot stays "system" (no hydration
+  // mismatch) and a change in another tab lands here too.
+  const preference = useSyncExternalStore(
+    subscribeThemePreference,
+    readThemePreference,
+    () => "system" as ThemePreference,
+  );
+
+  return (
+    <Menu.Group className="theme-menu">
+      <Menu.GroupLabel className="theme-menu-label">外观</Menu.GroupLabel>
+      <Menu.RadioGroup
+        value={preference}
+        onValueChange={(next) => {
+          applyThemePreference(next as ThemePreference);
+        }}
+      >
+        {options.map((option) => (
+          <Menu.RadioItem
+            className="account-menu-item theme-menu-item"
+            closeOnClick={false}
+            key={option.value}
+            value={option.value}
+          >
+            <OptionIcon value={option.value} />
+            <span>{option.label}</span>
+            <Menu.RadioItemIndicator className="theme-menu-check">
+              <Check aria-hidden="true" />
+            </Menu.RadioItemIndicator>
+          </Menu.RadioItem>
+        ))}
+      </Menu.RadioGroup>
+    </Menu.Group>
+  );
+}