feat(portal): auto-switch light/dark theme via prefers-color-scheme with top-right toggle

stacks/portal/web/src/components/CommandPalette.tsx

@@ -133,32 +133,25 @@ export const CommandPalette: React.FC = () => {
         run: () => copyCmd('ssh mini -t "tmux attach -t agy"', '接力 AGY'),
       },
       {
-        id: 'theme-light',
-        title: '切换主题: 浅色纯净 (Shadcn Light)',
-        hint: 'zinc-light',
+        id: 'theme-system',
+        title: '主题模式: 跟随设备系统深浅色自动切换',
+        hint: 'system',
         type: '主题',
-        run: () => setTheme('zinc-light'),
+        run: () => setTheme('system'),
+      },
+      {
+        id: 'theme-light',
+        title: '切换主题: 浅色纯净 (Light)',
+        hint: 'light',
+        type: '主题',
+        run: () => setTheme('light'),
       },
       {
         id: 'theme-dark',
-        title: '切换主题: 深色极客 (Shadcn Dark)',
-        hint: 'zinc-dark',
+        title: '切换主题: 深色极客 (Dark)',
+        hint: 'dark',
         type: '主题',
-        run: () => setTheme('zinc-dark'),
-      },
-      {
-        id: 'theme-cat',
-        title: '切换主题: Catppuccin Mocha',
-        hint: 'catppuccin',
-        type: '主题',
-        run: () => setTheme('catppuccin'),
-      },
-      {
-        id: 'theme-nord',
-        title: '切换主题: Nord 极地霜蓝',
-        hint: 'nord',
-        type: '主题',
-        run: () => setTheme('nord'),
+        run: () => setTheme('dark'),
       },
     ];
   }, [getEffectiveMode, setShowAgyModal, setTheme, triggerAction, copyCmd]);

stacks/portal/web/src/components/TopRibbon.tsx

@@ -1,14 +1,7 @@
 import React from 'react';
-import { Search, Terminal } from 'lucide-react';
+import { Moon, Search, Sun, Terminal } from 'lucide-react';
 import { usePortalStore } from '../store/usePortalStore';
-import type { RouteModeId, ThemeId } from '../types/telemetry';
-
-const THEMES: Array<{ id: ThemeId; label: string; dot: string }> = [
-  { id: 'zinc-dark', label: '深色极客', dot: '#18181b' },
-  { id: 'zinc-light', label: '浅色纯净', dot: '#f8fafc' },
-  { id: 'catppuccin', label: 'Catppuccin', dot: '#cba6f7' },
-  { id: 'nord', label: 'Nord', dot: '#88c0d0' },
-];
+import type { RouteModeId } from '../types/telemetry';
 
 const MODES: Array<{ id: RouteModeId; label: string }> = [
   { id: 'auto', label: '智能路由' },
@@ -20,9 +13,11 @@ const MODES: Array<{ id: RouteModeId; label: string }> = [
 export const TopRibbon: React.FC = () => {
   const {
     theme,
+    resolvedTheme,
     routeMode,
     telemetry,
     setTheme,
+    toggleTheme,
     setRouteMode,
     setShowAgyModal,
     setShowCmdPalette,
@@ -100,7 +95,7 @@ export const TopRibbon: React.FC = () => {
           </div>
         </div>
 
-        {/* Right: Search (Cmd+K), Route Switcher, Theme Switcher, Terminal Button */}
+        {/* Right: Search (Cmd+K), Route Switcher, AGY Terminal, Top-Right Theme Switcher */}
         <div className="flex items-center gap-2">
           <button
             onClick={() => setShowCmdPalette(true)}
@@ -109,7 +104,7 @@ export const TopRibbon: React.FC = () => {
           >
             <span className="flex items-center gap-1.5" style={{ color: 'var(--text-muted)' }}>
               <Search className="w-3.5 h-3.5" />
-              <span className="hidden sm:inline">搜索或执行指令...</span>
+              <span className="hidden sm:inline">搜索...</span>
             </span>
             <kbd
               className="px-1.5 py-0.5 text-[10px] font-mono-num rounded hl-muted"
@@ -140,32 +135,6 @@ export const TopRibbon: React.FC = () => {
             ))}
           </div>
 
-          <div className="flex items-center p-0.5 rounded-lg hl-muted border hl-border text-xs">
-            {THEMES.map((t) => (
-              <button
-                key={t.id}
-                onClick={() => setTheme(t.id)}
-                className="px-2 py-1 rounded-md font-medium transition-all flex items-center gap-1.5 cursor-pointer"
-                style={
-                  theme === t.id
-                    ? {
-                        backgroundColor: 'var(--bg-card)',
-                        color: 'var(--text-main)',
-                        boxShadow: '0 1px 2px rgba(0,0,0,0.08)',
-                      }
-                    : { color: 'var(--text-muted)' }
-                }
-                title={t.label}
-              >
-                <span
-                  className="w-2 h-2 rounded-full border border-black/10"
-                  style={{ backgroundColor: t.dot }}
-                />
-                <span className="hidden lg:inline">{t.label}</span>
-              </button>
-            ))}
-          </div>
-
           <button
             onClick={() => setShowAgyModal(true)}
             className="hl-btn-primary px-3 py-1.5 text-xs flex items-center gap-1.5 cursor-pointer"
@@ -173,6 +142,42 @@ export const TopRibbon: React.FC = () => {
             <Terminal className="w-3.5 h-3.5" />
             <span>AGY 终端</span>
           </button>
+
+          {/* Top-Right Mainstream Theme Switcher (Auto System + Light/Dark 2 Mainstream Themes) */}
+          <div className="flex items-center p-0.5 rounded-lg hl-muted border hl-border text-xs">
+            <button
+              onClick={toggleTheme}
+              className="px-2.5 py-1 rounded-md font-medium transition-all flex items-center gap-1.5 cursor-pointer"
+              style={{
+                backgroundColor: 'var(--bg-card)',
+                color: 'var(--text-main)',
+                boxShadow: '0 1px 2px rgba(0,0,0,0.08)',
+              }}
+              title="点击切换深色 / 浅色主题"
+            >
+              {resolvedTheme === 'dark' ? (
+                <>
+                  <Moon className="w-3.5 h-3.5" />
+                  <span className="hidden sm:inline">深色</span>
+                </>
+              ) : (
+                <>
+                  <Sun className="w-3.5 h-3.5" />
+                  <span className="hidden sm:inline">浅色</span>
+                </>
+              )}
+            </button>
+            {theme !== 'system' && (
+              <button
+                onClick={() => setTheme('system')}
+                className="px-2 py-1 rounded-md text-[11px] transition-all cursor-pointer"
+                style={{ color: 'var(--text-muted)' }}
+                title="恢复跟随设备系统深浅色自动切换"
+              >
+                自动
+              </button>
+            )}
+          </div>
         </div>
       </div>
     </header>

stacks/portal/web/src/store/usePortalStore.ts

@@ -3,6 +3,7 @@ import type { RouteModeId, TelemetryData, ThemeId } from '../types/telemetry';
 
 interface PortalState {
   theme: ThemeId;
+  resolvedTheme: 'light' | 'dark';
   routeMode: RouteModeId;
   showAgyModal: boolean;
   showCmdPalette: boolean;
@@ -10,6 +11,7 @@ interface PortalState {
   actionLoading: boolean;
   telemetry: TelemetryData;
   setTheme: (theme: ThemeId) => void;
+  toggleTheme: () => void;
   setRouteMode: (mode: RouteModeId) => void;
   setShowAgyModal: (open: boolean) => void;
   setShowCmdPalette: (open: boolean) => void;
@@ -20,16 +22,31 @@ interface PortalState {
   getEffectiveMode: () => Exclude<RouteModeId, 'auto'>;
 }
 
-const initialTheme = (localStorage.getItem('hl_theme') as ThemeId) || 'catppuccin';
-const initialRouteMode = (localStorage.getItem('hl_route_mode') as RouteModeId) || 'auto';
+const getSystemDark = () =>
+  typeof window !== 'undefined' &&
+  window.matchMedia &&
+  window.matchMedia('(prefers-color-scheme: dark)').matches;
 
-// Apply theme immediately on load
+const applyDomTheme = (mode: ThemeId): 'light' | 'dark' => {
+  const isDark = mode === 'system' ? getSystemDark() : mode === 'dark';
+  const domTheme = isDark ? 'catppuccin' : 'zinc-light';
   if (typeof document !== 'undefined') {
-  document.documentElement.setAttribute('data-theme', initialTheme);
+    document.documentElement.setAttribute('data-theme', domTheme);
   }
+  return isDark ? 'dark' : 'light';
+};
+
+const storedTheme = localStorage.getItem('hl_theme_v2') as ThemeId | null;
+const initialTheme: ThemeId =
+  storedTheme === 'light' || storedTheme === 'dark' || storedTheme === 'system'
+    ? storedTheme
+    : 'system';
+const initialResolved = applyDomTheme(initialTheme);
+const initialRouteMode = (localStorage.getItem('hl_route_mode') as RouteModeId) || 'auto';
 
 export const usePortalStore = create<PortalState>((set, get) => ({
   theme: initialTheme,
+  resolvedTheme: initialResolved,
   routeMode: initialRouteMode,
   showAgyModal: false,
   showCmdPalette: false,
@@ -79,9 +96,14 @@ export const usePortalStore = create<PortalState>((set, get) => ({
   },
 
   setTheme: (theme) => {
-    localStorage.setItem('hl_theme', theme);
-    document.documentElement.setAttribute('data-theme', theme);
-    set({ theme });
+    localStorage.setItem('hl_theme_v2', theme);
+    const resolvedTheme = applyDomTheme(theme);
+    set({ theme, resolvedTheme });
+  },
+
+  toggleTheme: () => {
+    const { resolvedTheme, setTheme } = get();
+    setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
   },
 
   setRouteMode: (routeMode) => {
@@ -152,3 +174,13 @@ export const usePortalStore = create<PortalState>((set, get) => ({
     return 'edge443';
   },
 }));
+
+// Listen to device OS dark/light mode changes automatically
+if (typeof window !== 'undefined' && window.matchMedia) {
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    const state = usePortalStore.getState();
+    if (state.theme === 'system') {
+      state.setTheme('system');
+    }
+  });
+}

stacks/portal/web/src/types/telemetry.ts

@@ -1,4 +1,4 @@
-export type ThemeId = 'zinc-dark' | 'zinc-light' | 'catppuccin' | 'nord';
+export type ThemeId = 'system' | 'light' | 'dark';
 export type RouteModeId = 'auto' | 'edge443' | 'home10443' | 'lan';
 
 export interface TelemetryData {