diff --git a/README.en.md b/README.en.md
index 4e0ffed7..e25a5079 100644
--- a/README.en.md
+++ b/README.en.md
@@ -12,17 +12,36 @@
   </p>
 </div>
 
-Universal Code is a desktop AI coding workbench. Connect your chosen model and move a project forward in one conversation, with file changes, command results, and sources available for review.
+Universal-Code is a desktop AI coding workbench. Connect your chosen model and move a project forward in one conversation, with file changes, command results, and sources available for review.
 
 **v1.0.0 “First Voyage” is being prepared for release.** The [release notes](docs/releases/v1.0.0.md) record verified scope and remaining work. Public downloads still include older previews; new Mac packages are unnotarized previews.
 
-## Why Universal Code?
+## Why Universal-Code?
 
 - **Work on a real project**: read and edit files, run builds, and inspect the resulting changes.
 - **Fewer interruptions, with control**: select Full Access for a task to allow ordinary file changes and network commands to proceed automatically; file deletion still requires confirmation.
 - **Keep research traceable**: prefer native search when the provider supports it, read GitHub, Hacker News, and RSS/Atom sources, and retain page snapshots and citations.
 - **Continue existing work**: task history, tool records, and checkpoints stay on your machine so you can inspect progress and continue the conversation.
 
+## Appearance
+
+Choose **System, Light, Dark, or Mist** in **Settings → Appearance**. System follows your device’s light or dark setting. Mist uses a muted blue-gray canvas and light frosted surfaces, with adjustable blur, opacity, and brightness.
+
+![The same Universal-Code conversation in Light and Dark, split diagonally](docs/images/appearance/light-dark.png)
+
+Captured from a production build of the current source using a local demo project and offline sample replies. Light is on the left; Dark is on the right.
+
+<details>
+<summary>View theme options and Mist</summary>
+
+![System, Light, Dark, and Mist theme options](docs/images/appearance/theme-options.png)
+
+![Universal-Code in Mist](docs/images/appearance/conversation-mist.png)
+
+</details>
+
+See the [appearance guide](docs/usage.md#外观--appearance) for details.
+
 ## Quick start
 
 ### 1. Open the app
diff --git a/README.md b/README.md
index fe5419b1..9bb213e4 100644
--- a/README.md
+++ b/README.md
@@ -12,17 +12,36 @@
   </p>
 </div>
 
-Universal Code 是一个桌面 AI 编程工作台。连接你选择的模型，在同一段对话中推进项目，查看文件改动、命令结果和资料来源。
+Universal-Code 是一个桌面 AI 编程工作台。连接你选择的模型，在同一段对话中推进项目，查看文件改动、命令结果和资料来源。
 
 **v1.0.0「启航」正在准备发布。** [发布说明](docs/releases/v1.0.0.md)记录已验证范围和待完成事项；目前公开下载仍有历史预览，Mac 新包为未公证预览。
 
-## 为什么选择 Universal Code
+## 为什么选择 Universal-Code
 
 - **围绕真实项目工作**：阅读和修改文件、运行构建、查看差异，把任务结果落到工作区。
 - **少打断，保留控制**：选择当前任务的 Full Access 后，普通文件修改与联网命令可自动执行；文件删除仍需确认。
 - **查资料时保留来源**：优先使用供应商支持的原生搜索，也能读取 GitHub、Hacker News 和 RSS/Atom，并保留网页快照与引用。
 - **继续已有工作**：任务历史、工具记录和检查点保存在本机，可回看进度、检查改动和继续对话。
 
+## 外观
+
+在 **设置 → 外观** 中选择 **系统、浅色、深色、雾透**。系统模式随设备设置切换浅深；雾透使用灰蓝底色与轻盈的磨砂材质，还可调整模糊度、磨砂度和亮度。
+
+![Universal-Code 同一段对话的浅色与深色外观，左浅右深斜向分割](docs/images/appearance/light-dark.png)
+
+截图来自当前源码的生产构建，使用本地演示项目与离线示例回复。左侧为浅色，右侧为深色。
+
+<details>
+<summary>查看主题选项与雾透外观</summary>
+
+![系统、浅色、深色、雾透四个主题选项](docs/images/appearance/theme-options.png)
+
+![Universal-Code 雾透外观](docs/images/appearance/conversation-mist.png)
+
+</details>
+
+更多设置见[外观说明](docs/usage.md#外观--appearance)。
+
 ## 快速开始
 
 ### 1. 打开应用
diff --git a/docs/images/appearance/conversation-dark.png b/docs/images/appearance/conversation-dark.png
new file mode 100644
index 00000000..9687f7ee
Binary files /dev/null and b/docs/images/appearance/conversation-dark.png differ
diff --git a/docs/images/appearance/conversation-light.png b/docs/images/appearance/conversation-light.png
new file mode 100644
index 00000000..874f67c2
Binary files /dev/null and b/docs/images/appearance/conversation-light.png differ
diff --git a/docs/images/appearance/conversation-mist.png b/docs/images/appearance/conversation-mist.png
new file mode 100644
index 00000000..aa3457dc
Binary files /dev/null and b/docs/images/appearance/conversation-mist.png differ
diff --git a/docs/images/appearance/light-dark.png b/docs/images/appearance/light-dark.png
new file mode 100644
index 00000000..1f94d995
Binary files /dev/null and b/docs/images/appearance/light-dark.png differ
diff --git a/docs/images/appearance/theme-options.png b/docs/images/appearance/theme-options.png
new file mode 100644
index 00000000..75548f58
Binary files /dev/null and b/docs/images/appearance/theme-options.png differ
diff --git a/docs/usage.md b/docs/usage.md
index 5c382780..780da408 100644
--- a/docs/usage.md
+++ b/docs/usage.md
@@ -23,6 +23,34 @@ compatibility identifiers. The CLI binary and commands, `/api/v1/runs`,
 `/api/v1/sessions`, OpenAPI schemas, event types, and SQLite `work_item` identities
 remain unchanged. / 上述 CLI、API、协议、事件与 SQLite 标识保持不变。
 
+## 外观 / Appearance
+
+打开「设置 → 外观」选择主题，偏好保存在当前设备，重新打开应用后继续生效。
+Open **Settings → Appearance** to choose a theme. Your choice is saved on the current device.
+
+| 选项 / Option | 效果 / Behavior |
+| --- | --- |
+| 系统 / System | 随设备的浅色或深色设置即时切换，包括已打开的代码编辑器。Follows device appearance changes, including open code editors. |
+| 浅色 / Light | 明亮的中性白色界面。A bright, neutral white interface. |
+| 深色 / Dark | 深灰界面与玻璃材质。Dark gray surfaces with glass materials. |
+| 雾透 / Mist | 灰蓝透色与轻盈磨砂，可调模糊度、磨砂度、背景亮度和光斑。Muted blue-gray frosted surfaces with adjustable blur, opacity, brightness, and ambient glow. |
+
+![外观设置中的四个主题选项](images/appearance/theme-options.png)
+
+系统选项的预览左右分色；其他预览展示对应主题的侧栏、对话与输入框。手动选择浅色、
+深色或雾透后，设备设置的变化不会覆盖该选择。雾透的「还原默认值」恢复标准云母参数。
+System uses a split preview; the other previews show their sidebar, conversation, and composer.
+An explicit theme stays selected when the device appearance changes. Mist’s **Reset to defaults**
+restores the standard Mica settings.
+
+查看[浅色原图](images/appearance/conversation-light.png)、[深色原图](images/appearance/conversation-dark.png)
+和[雾透原图](images/appearance/conversation-mist.png)。截图于 2026-10-19 在 Windows / Edge
+中从生产构建拍摄，窗口为 1440 × 900；项目、回复和用量属于离线演示数据。
+README 的分割图由同一对话的浅色与深色原图组合。
+Screenshots were captured from a production build in Edge on Windows at 1440 × 900 on
+2026-10-19. Project content, replies, and usage are offline demonstration data. The README
+combines the Light and Dark captures of the same conversation.
+
 ## Portable Build Diagnostics
 
 ```powershell
diff --git a/web/src/components/file-proposal-editor.test.tsx b/web/src/components/file-proposal-editor.test.tsx
index b904af86..71d39219 100644
--- a/web/src/components/file-proposal-editor.test.tsx
+++ b/web/src/components/file-proposal-editor.test.tsx
@@ -1,13 +1,14 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { render, screen, waitFor } from "@testing-library/react";
+import { act, render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import type { APIClient } from "../api/client";
 import type { FileEditProposalSourceView } from "../api/types";
 import { FileProposalEditor } from "./file-proposal-editor";
+import { applyPrayuTheme } from "../lib/appearance";
 
 vi.mock("@monaco-editor/react", () => ({
-  default: ({ value, onChange }: { value: string; onChange: (value: string) => void }) =>
-    <textarea aria-label="Monaco proposal editor" onChange={(event) => onChange(event.target.value)}
+  default: ({ value, onChange, theme }: { value: string; onChange: (value: string) => void; theme: string }) =>
+    <textarea aria-label="Monaco proposal editor" data-theme={theme} onChange={(event) => onChange(event.target.value)}
       value={value} />,
   DiffEditor: ({ original, modified }: { original: string; modified: string }) =>
     <pre aria-label="Monaco diff preview">{original}{modified}</pre>,
@@ -34,6 +35,10 @@ describe("FileProposalEditor", () => {
       <FileProposalEditor client={client} onClose={vi.fn()} runID="run-1" source={source} />
     </QueryClientProvider>);
     const editor = await screen.findByLabelText("Monaco proposal editor");
+    await act(async () => { applyPrayuTheme("light", false); });
+    expect(editor).toHaveAttribute("data-theme", "vs");
+    await act(async () => { applyPrayuTheme("dark", false); });
+    expect(editor).toHaveAttribute("data-theme", "vs-dark");
     await user.clear(editor);
     await user.type(editor, "after");
     await user.click(screen.getByRole("button", { name: "Create proposal" }));
diff --git a/web/src/components/file-proposal-editor.tsx b/web/src/components/file-proposal-editor.tsx
index 4992e0fd..0a4d72f9 100644
--- a/web/src/components/file-proposal-editor.tsx
+++ b/web/src/components/file-proposal-editor.tsx
@@ -5,7 +5,7 @@ import { Check, FileDiff, FileText, LoaderCircle, Pencil, RefreshCw, X } from "l
 import type { APIClient } from "../api/client";
 import type { FileEditProposalSourceView } from "../api/types";
 import { useLocale } from "../lib/locale";
-import { readPrayuTheme } from "../lib/appearance";
+import { usePrayuTheme } from "../lib/appearance";
 import { ErrorState } from "./common";
 import { useFileEditDraft, useFileEditLeave, useFileEditLeaveEntry } from "./file-edit-drafts";
 
@@ -78,7 +78,7 @@ function FileProposalSession({ client, runID, source, onClose }: Parameters<type
   const invalid = editorState !== "ready" || bytes > 256 * 1024 ||
     draft === activeSource.content || expired || recovery.changedBase || recovery.conflict;
   const language = languageForPath(activeSource.path);
-  const monacoTheme = readPrayuTheme() === "dark" ? "vs-dark" : "vs";
+  const monacoTheme = usePrayuTheme() === "dark" ? "vs-dark" : "vs";
   useFileEditLeaveEntry({ path: activeSource.path, dirty: Boolean(recovery.draft),
     busy: mutation.isPending, canSave: !invalid,
     save: () => mutation.mutateAsync(recovery.captureSubmission(draft)), keep: recovery.keep,
diff --git a/web/src/components/file-proposal-recovery.test.tsx b/web/src/components/file-proposal-recovery.test.tsx
index 33fc3b16..de76ab32 100644
--- a/web/src/components/file-proposal-recovery.test.tsx
+++ b/web/src/components/file-proposal-recovery.test.tsx
@@ -1,11 +1,12 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { fireEvent, render, screen } from "@testing-library/react";
+import { act, fireEvent, render, screen } from "@testing-library/react";
 import type { APIClient } from "../api/client";
 import { FileProposalRecovery } from "./file-proposal-recovery";
+import { applyPrayuTheme } from "../lib/appearance";
 
 vi.mock("@monaco-editor/react", () => ({
-  DiffEditor: ({ original, modified }: { original: string; modified: string }) =>
-    <pre aria-label="Recovered proposal diff">{original}{modified}</pre>,
+  DiffEditor: ({ original, modified, theme }: { original: string; modified: string; theme: string }) =>
+    <pre aria-label="Recovered proposal diff" data-theme={theme}>{original}{modified}</pre>,
 }));
 vi.mock("../lib/monaco-local", () => ({ configureLocalMonaco: vi.fn() }));
 
@@ -22,7 +23,12 @@ it("renders a durable pending proposal as read-only stale review context", async
   render(<QueryClientProvider client={new QueryClient()}>
     <FileProposalRecovery client={client} editID="edit-1" onClose={vi.fn()} runID="run-1" />
   </QueryClientProvider>);
-  expect(await screen.findByLabelText("Recovered proposal diff")).toHaveTextContent("before");
+  const editor = await screen.findByLabelText("Recovered proposal diff");
+  expect(editor).toHaveTextContent("before");
+  await act(async () => { applyPrayuTheme("light", false); });
+  expect(editor).toHaveAttribute("data-theme", "vs");
+  await act(async () => { applyPrayuTheme("dark", false); });
+  expect(editor).toHaveAttribute("data-theme", "vs-dark");
   expect(screen.getByText("Workspace source changed")).toBeInTheDocument();
   expect(screen.queryByRole("button", { name: /apply|approve|create proposal/i }))
     .not.toBeInTheDocument();
diff --git a/web/src/components/file-proposal-recovery.tsx b/web/src/components/file-proposal-recovery.tsx
index 12a223ca..97cc7341 100644
--- a/web/src/components/file-proposal-recovery.tsx
+++ b/web/src/components/file-proposal-recovery.tsx
@@ -4,7 +4,7 @@ import { DiffEditor } from "@monaco-editor/react";
 import { AlertTriangle, History, X } from "lucide-react";
 import type { APIClient } from "../api/client";
 import { useLocale } from "../lib/locale";
-import { readPrayuTheme } from "../lib/appearance";
+import { usePrayuTheme } from "../lib/appearance";
 import { ErrorState, LoadingState, StatusBadge } from "./common";
 
 export function FileProposalRecovery({ client, runID, editID, onClose }: {
@@ -14,6 +14,7 @@ export function FileProposalRecovery({ client, runID, editID, onClose }: {
   onClose: () => void;
 }) {
   const { t } = useLocale();
+  const theme = usePrayuTheme();
   const [editorState, setEditorState] = useState<"loading" | "ready" | "failed">("loading");
   const query = useQuery({
     queryKey: ["run", runID, "file-edit-recovery", editID],
@@ -51,7 +52,7 @@ export function FileProposalRecovery({ client, runID, editID, onClose }: {
         modified={recovery.proposed_content} original={recovery.original_content}
         options={{ automaticLayout: true, fontFamily: 'var(--prayu-font-mono, "JetBrains Mono", Consolas, monospace)',
           fontSize: 13, letterSpacing: 0, minimap: { enabled: false }, readOnly: true, renderSideBySide: true,
-          scrollBeyondLastLine: false }} theme={readPrayuTheme() === "dark" ? "vs-dark" : "vs"} /> :
+          scrollBeyondLastLine: false }} theme={theme === "dark" ? "vs-dark" : "vs"} /> :
         <div className={`monaco-local-state${editorState === "failed" ? " inline-warning" : ""}`}
           role={editorState === "failed" ? "alert" : "status"}>
           {editorState === "failed" ? t("无法加载本地编辑器资源", "Local editor assets could not be loaded") : t("正在加载本地编辑器", "Loading local editor")}
diff --git a/web/src/lib/appearance.test.ts b/web/src/lib/appearance.test.ts
index 7e37248a..03e72fff 100644
--- a/web/src/lib/appearance.test.ts
+++ b/web/src/lib/appearance.test.ts
@@ -1,11 +1,15 @@
+import { act, renderHook, waitFor } from "@testing-library/react";
 import {
   applyPrayuGlassSettings,
   applyPrayuTheme,
   defaultPrayuGlassSettings,
+  initializePrayuAppearance,
   prayuGlassPresets,
   readPrayuGlassSettings,
   readPrayuTheme,
+  readPrayuThemePreference,
   resetPrayuGlassSettings,
+  usePrayuTheme,
 } from "./appearance";
 
 describe("Prayu appearance", () => {
@@ -21,10 +25,57 @@ describe("Prayu appearance", () => {
   });
 
   afterEach(() => {
+    applyPrayuTheme("dark", false);
     vi.restoreAllMocks();
+    vi.unstubAllGlobals();
   });
 
-  it("persists and restores the Catppuccin Latte glass mode with default Mica parameters", () => {
+  it("follows system changes, restores the preference, and stops following after a manual choice", async () => {
+    const media = Object.assign(new EventTarget(), { matches: true });
+    vi.stubGlobal("matchMedia", vi.fn(() => media));
+    const light = vi.fn();
+    const dark = vi.fn();
+    const previousRuntime = window.runtime;
+    window.runtime = { WindowSetLightTheme: light, WindowSetDarkTheme: dark };
+    try {
+      expect(readPrayuThemePreference()).toBe("system");
+      applyPrayuTheme("system");
+      expect(window.localStorage.getItem("prayu.theme")).toBe("system");
+      expect(document.documentElement.dataset.prayuTheme).toBe("light");
+      expect(light).toHaveBeenCalledOnce();
+      const { result, unmount } = renderHook(usePrayuTheme);
+      expect(result.current).toBe("light");
+
+      media.matches = false;
+      await act(async () => { media.dispatchEvent(new Event("change")); });
+      await waitFor(() => expect(result.current).toBe("dark"));
+      expect(readPrayuTheme()).toBe("dark");
+      expect(readPrayuThemePreference()).toBe("system");
+      expect(document.documentElement.dataset.prayuTheme).toBe("dark");
+      expect(document.documentElement.style.colorScheme).toBe("dark");
+      expect(dark).toHaveBeenCalledOnce();
+      unmount();
+
+      initializePrayuAppearance();
+      light.mockClear();
+      media.matches = true;
+      media.dispatchEvent(new Event("change"));
+      expect(document.documentElement.dataset.prayuTheme).toBe("light");
+      expect(light).toHaveBeenCalledOnce();
+
+      for (const theme of ["glass", "dark", "light"] as const) {
+        applyPrayuTheme(theme);
+        media.matches = !media.matches;
+        media.dispatchEvent(new Event("change"));
+        expect(document.documentElement.dataset.prayuTheme).toBe(theme);
+        expect(readPrayuThemePreference()).toBe(theme);
+      }
+    } finally {
+      window.runtime = previousRuntime;
+    }
+  });
+
+  it("persists and restores mist with default Mica parameters", () => {
     applyPrayuTheme("glass");
 
     expect(document.documentElement.dataset.prayuTheme).toBe("glass");
diff --git a/web/src/lib/appearance.ts b/web/src/lib/appearance.ts
index cf21b97f..04ec5e55 100644
--- a/web/src/lib/appearance.ts
+++ b/web/src/lib/appearance.ts
@@ -1,6 +1,8 @@
+import { useSyncExternalStore } from "react";
 import { setDesktopWindowTheme } from "./desktop-window";
 
 export type PrayuTheme = "light" | "dark" | "glass";
+export type PrayuThemePreference = PrayuTheme | "system";
 export type PrayuGlassMode = "mica" | "compat";
 export type PrayuGlassPreset = "clear" | "standard" | "frosted";
 
@@ -14,6 +16,7 @@ export interface PrayuGlassSettings {
 
 const themeStorageKey = "prayu.theme";
 const glassStorageKey = "prayu.glass";
+let stopWatchingSystemTheme: (() => void) | undefined;
 
 export const defaultPrayuGlassSettings: Readonly<PrayuGlassSettings> = Object.freeze({
   mode: "mica",
@@ -111,22 +114,53 @@ export function resetPrayuGlassSettings(persist = true): PrayuGlassSettings {
   return normalized;
 }
 
-export function readPrayuTheme(): PrayuTheme {
-  if (typeof window === "undefined") return "dark";
+export function readPrayuThemePreference(): PrayuThemePreference {
+  if (typeof window === "undefined") return "system";
   try {
     const stored = window.localStorage.getItem(themeStorageKey);
-    if (stored === "light" || stored === "dark" || stored === "glass") return stored;
+    if (stored === "system" || stored === "light" || stored === "dark" || stored === "glass") return stored;
   } catch {
     // Fall through to the system preference.
   }
-  return window.matchMedia?.("(prefers-color-scheme: light)").matches ? "light" : "dark";
+  return "system";
+}
+
+export function readPrayuTheme(): PrayuTheme {
+  const preference = readPrayuThemePreference();
+  if (preference !== "system") return preference;
+  return typeof window !== "undefined" && window.matchMedia?.("(prefers-color-scheme: light)").matches ? "light" : "dark";
+}
+
+function subscribeToTheme(onChange: () => void): () => void {
+  const observer = new MutationObserver(onChange);
+  observer.observe(document.documentElement, { attributes: true, attributeFilter: ["data-prayu-theme"] });
+  return () => observer.disconnect();
 }
 
-export function applyPrayuTheme(theme: PrayuTheme, persist = true): void {
-  document.documentElement.dataset.prayuTheme = theme;
-  document.documentElement.style.colorScheme = theme === "dark" ? "dark" : "light";
+function readAppliedTheme(): PrayuTheme {
+  return (document.documentElement.dataset.prayuTheme as PrayuTheme | undefined) ?? readPrayuTheme();
+}
+
+export function usePrayuTheme(): PrayuTheme {
+  return useSyncExternalStore(subscribeToTheme, readAppliedTheme, readPrayuTheme);
+}
+
+export function applyPrayuTheme(theme: PrayuThemePreference, persist = true): void {
+  stopWatchingSystemTheme?.();
+  stopWatchingSystemTheme = undefined;
+  const systemTheme = theme === "system" ? window.matchMedia?.("(prefers-color-scheme: light)") : undefined;
+  const syncTheme = () => {
+    const resolved = theme === "system" ? systemTheme?.matches ? "light" : "dark" : theme;
+    document.documentElement.dataset.prayuTheme = resolved;
+    document.documentElement.style.colorScheme = resolved === "dark" ? "dark" : "light";
+    setDesktopWindowTheme(resolved);
+  };
+  syncTheme();
   syncGlassVariables(readPrayuGlassSettings());
-  setDesktopWindowTheme(theme);
+  if (systemTheme) {
+    systemTheme.addEventListener("change", syncTheme);
+    stopWatchingSystemTheme = () => systemTheme.removeEventListener("change", syncTheme);
+  }
   if (!persist) return;
   try {
     window.localStorage.setItem(themeStorageKey, theme);
@@ -136,6 +170,6 @@ export function applyPrayuTheme(theme: PrayuTheme, persist = true): void {
 }
 
 export function initializePrayuAppearance(): void {
-  applyPrayuTheme(readPrayuTheme(), false);
+  applyPrayuTheme(readPrayuThemePreference(), false);
 }
 
diff --git a/web/src/v2/components/settings.css b/web/src/v2/components/settings.css
index 62c0eb47..6572d174 100644
--- a/web/src/v2/components/settings.css
+++ b/web/src/v2/components/settings.css
@@ -318,29 +318,24 @@
 .v2-command-service-note p { margin: 0; }
 .v2-command-service-note p + p { margin-top: 4px; }
 
-.v2-theme-options { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 15px; }
-.v2-theme-options > button { background: transparent; border: 1px solid transparent; border-radius: 12px; display: grid; gap: 8px; padding: 8px; text-align: left; }
+.v2-theme-options { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 16px; }
+.v2-theme-options > button { background: transparent; border: 1px solid transparent; border-radius: 12px; display: grid; gap: 9px; min-width: 0; padding: 7px; text-align: center; }
 .v2-theme-options > button:hover { background: var(--v2-control); }
-.v2-theme-options > button[aria-pressed="true"] { background: color-mix(in srgb, var(--v2-accent) 8%, var(--v2-control)); border-color: color-mix(in srgb, var(--v2-accent) 35%, var(--v2-border)); }
-.v2-theme-preview { background: var(--prayu-window); border: 1px solid var(--prayu-border-strong); border-radius: 8px; display: grid; grid-template-columns: 32% 1fr; height: 72px; overflow: hidden; width: 100%; }
-.v2-theme-preview i:first-child { background: var(--prayu-sidebar); }
-.v2-theme-preview i:last-child { background: var(--prayu-panel); box-shadow: inset 0 1px 0 var(--prayu-glass-highlight); }
-.v2-theme-preview.theme-glass {
-  background:
-    radial-gradient(65% 55% at 18% 12%, rgb(101 125 141 / 10%), transparent 70%),
-    radial-gradient(55% 50% at 85% 18%, rgb(139 153 159 / 8%), transparent 65%),
-    linear-gradient(165deg, #f6f8fb 0%, #eff1f5 55%, #e3e6ec 100%);
-  border-color: rgb(76 79 105 / 22%);
-  gap: 5px;
-  padding: 5px;
-}
-.v2-theme-preview.theme-glass i:first-child,
-.v2-theme-preview.theme-glass i:last-child {
-  background: rgb(255 255 255 / 62%);
-  border: 1px solid rgb(76 79 105 / 18%);
-  border-radius: 5px;
-  box-shadow: inset 0 1px 0 rgb(255 255 255 / 72%), 0 2px 6px rgb(76 79 105 / 8%);
-}
+.v2-theme-options > button[aria-pressed="true"] { background: color-mix(in srgb, var(--v2-ink) 5%, transparent); border-color: var(--v2-muted); }
+.v2-theme-options > button:focus-visible { outline: 2px solid var(--prayu-focus); outline-offset: 3px; }
+.v2-theme-options strong { font-size: 12px; font-weight: 500; }
+.v2-theme-options > button[aria-pressed="true"] strong { font-weight: 650; }
+.v2-theme-preview { aspect-ratio: 3 / 2; border: 1px solid var(--v2-border); border-radius: 10px; display: block; overflow: hidden; position: relative; width: 100%; }
+.v2-theme-window { display: block; height: 100%; width: 100%; }
+.v2-theme-preview.theme-system .v2-theme-window:last-child { clip-path: inset(0 0 0 50%); inset: 0; position: absolute; }
+.v2-theme-canvas { fill: var(--prayu-surface-solid); }
+.v2-theme-sidebar { fill: var(--prayu-sidebar); stroke: var(--prayu-border); stroke-width: .5; }
+.v2-theme-panel { fill: var(--prayu-panel); stroke: var(--prayu-border); stroke-width: .5; }
+.v2-theme-mark { fill: var(--prayu-text); }
+.v2-theme-line { stroke: var(--prayu-text); stroke-linecap: round; stroke-width: 2; opacity: .7; }
+.v2-theme-line.is-muted { opacity: .22; }
+.v2-theme-input { fill: var(--prayu-glass-fill-strong); stroke: var(--prayu-border-strong); stroke-width: .6; }
+.theme-glass .v2-theme-sidebar, .theme-glass .v2-theme-panel { fill: rgb(255 255 255 / 40%); stroke: var(--prayu-border-strong); }
 .v2-appearance-card > p { border-top: 1px solid var(--v2-border); color: var(--v2-muted); margin: 0; padding: 13px 15px; }
 :where([data-prayu-theme="glass"]) .v2-settings-card,
 :where([data-prayu-theme="glass"]) .v2-provider-list,
@@ -412,7 +407,7 @@
 
 @media (max-width: 760px) {
   .v2-settings-content { padding-top: 32px; width: calc(100% - 28px); }
-  .v2-theme-options { grid-template-columns: 1fr; }
+  .v2-theme-options { gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .v2-provider-heading { align-items: stretch; flex-direction: column; }
   .v2-provider-heading > button { align-self: flex-start; }
   .v2-provider-grid { grid-template-columns: 1fr; }
diff --git a/web/src/v2/components/settings.test.tsx b/web/src/v2/components/settings.test.tsx
index bfc4668f..cccd7068 100644
--- a/web/src/v2/components/settings.test.tsx
+++ b/web/src/v2/components/settings.test.tsx
@@ -356,6 +356,11 @@ describe("V2 appearance and mist glass controls", () => {
     expect(screen.queryByRole("region", { name: "雾透玻璃参数" })).not.toBeInTheDocument();
 
     const themeGroup = screen.getByRole("group", { name: "应用主题" });
+    expect(within(themeGroup).getAllByRole("button").map((button) => button.textContent))
+      .toEqual(["系统", "浅色", "深色", "雾透"]);
+    await user.click(within(themeGroup).getByRole("button", { name: "系统" }));
+    expect(within(themeGroup).getByRole("button", { name: "系统" })).toHaveAttribute("aria-pressed", "true");
+    expect(window.localStorage.getItem("prayu.theme")).toBe("system");
     await user.click(within(themeGroup).getByRole("button", { name: "雾透" }));
 
     const glassRegion = screen.getByRole("region", { name: "雾透玻璃参数" });
diff --git a/web/src/v2/components/settings.tsx b/web/src/v2/components/settings.tsx
index ef6477d8..dbf64971 100644
--- a/web/src/v2/components/settings.tsx
+++ b/web/src/v2/components/settings.tsx
@@ -10,11 +10,11 @@ import {
   defaultPrayuGlassSettings,
   prayuGlassPresets,
   readPrayuGlassSettings,
-  readPrayuTheme,
+  readPrayuThemePreference,
   resetPrayuGlassSettings,
   type PrayuGlassPreset,
   type PrayuGlassSettings,
-  type PrayuTheme,
+  type PrayuThemePreference,
 } from "../../lib/appearance";
 import { useModalFocusTrap } from "../../hooks/use-modal-focus-trap";
 import { v2QueryKeys } from "../query-keys";
@@ -179,11 +179,26 @@ function GeneralSettings({ threadID, workspaces, onPermissions }: {
   </>;
 }
 
+function ThemePreviewWindow({ theme }: { theme: "light" | "dark" | "glass" }) {
+  return <svg className="v2-theme-window" data-prayu-theme={theme} viewBox="0 0 120 80" fill="none">
+    <rect className="v2-theme-canvas" width="120" height="80" rx="9" />
+    <rect className="v2-theme-sidebar" x="5" y="5" width="27" height="70" rx="5" />
+    <rect className="v2-theme-panel" x="36" y="5" width="79" height="70" rx="5" />
+    <path className="v2-theme-mark" d="M12 13h5v5h-5zM18 19h5v5h-5z" />
+    <path className="v2-theme-line is-muted" d="M12 33h13M12 39h10M12 45h12" />
+    <path className="v2-theme-line" d="M62 16h43M46 30h47M46 42h42" />
+    <path className="v2-theme-line is-muted" d="M46 24h33M46 36h54" />
+    <rect className="v2-theme-input" x="43" y="53" width="65" height="16" rx="5" />
+    <path className="v2-theme-line is-muted" d="M49 59h22" />
+    <circle className="v2-theme-mark" cx="101" cy="63" r="2.5" />
+  </svg>;
+}
+
 function AppearanceSettings() {
   const { t } = useLocale();
-  const [theme, setTheme] = useState<PrayuTheme>(() => readPrayuTheme());
+  const [theme, setTheme] = useState<PrayuThemePreference>(() => readPrayuThemePreference());
   const [glass, setGlass] = useState<PrayuGlassSettings>(() => readPrayuGlassSettings());
-  const select = (next: PrayuTheme) => {
+  const select = (next: PrayuThemePreference) => {
     setTheme(next);
     applyPrayuTheme(next);
   };
@@ -212,12 +227,15 @@ function AppearanceSettings() {
   return <><h1>{t("外观", "Appearance")}</h1><section className="v2-settings-section"><h2>{t("主题与材质", "Theme & materials")}</h2>
     <div className="v2-settings-card v2-appearance-card">
       <div className="v2-theme-options" role="group" aria-label={t("应用主题", "App theme")}>
-        {(["light", "dark", "glass"] as const).map((option) => <button aria-pressed={theme === option}
+        {(["system", "light", "dark", "glass"] as const).map((option) => <button aria-pressed={theme === option}
           key={option} onClick={() => select(option)} type="button">
-          <span aria-hidden="true" className={`v2-theme-preview theme-${option}`} data-prayu-theme={option}><i /><i /></span>
-          <strong>{option === "light" ? t("浅色", "Light") : option === "dark" ? t("深色", "Dark") : t("雾透", "Mist")}</strong>
+          <span aria-hidden="true" className={`v2-theme-preview theme-${option}`}>
+            <ThemePreviewWindow theme={option === "system" ? "light" : option} />
+            {option === "system" && <ThemePreviewWindow theme="dark" />}
+          </span>
+          <strong>{option === "system" ? t("系统", "System") : option === "light" ? t("浅色", "Light") : option === "dark" ? t("深色", "Dark") : t("雾透", "Mist")}</strong>
         </button>)}</div>
-      <p>{t("雾透采用灰蓝透色与轻盈的磨砂质感；深色使用深灰玻璃材质。开启系统的「降低透明度」后，界面会使用清晰的实色背景。", "Mist combines a muted blue-gray tint with light frosted glass; Dark uses dark gray glass. Enable Reduce transparency in your system settings to use solid backgrounds.")}</p>
+      <p>{t("系统模式随设备设置切换浅色与深色。雾透采用灰蓝透色与轻盈的磨砂质感；深色使用深灰玻璃材质。开启系统的「降低透明度」后，界面会使用清晰的实色背景。", "System follows your device’s light or dark appearance. Mist combines a muted blue-gray tint with light frosted glass; Dark uses dark gray glass. Enable Reduce transparency in your system settings to use solid backgrounds.")}</p>
     </div></section>
     {theme === "glass" && <section className="v2-settings-section" aria-label={t("雾透玻璃参数", "Mist glass tuning")}>
       <h2>{t("雾透材质", "Mist material")}</h2>