feat: 增加深色/浅色主题切换功能

- types 新增 Theme 类型(dark/light)
- storage 新增 loadTheme/saveTheme 持久化主题偏好
- ConfigPanel 新增外观分组,主题下拉选择
- App.tsx 通过 data-theme 属性挂载到 html 元素
- App.css 新增 [data-theme=light] 亮色变量覆盖

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2026-06-13 17:08:56 +08:00
parent f17c3c24a7
commit 0227822120
5 changed files with 75 additions and 7 deletions

View File

@@ -3,9 +3,10 @@
// 职责:会话配置持久化
// ============================================================
import type { SessionConfig } from "../types";
import type { SessionConfig, Theme } from "../types";
const CONFIG_KEY = "camtalk:config";
const THEME_KEY = "camtalk:theme";
const DEFAULT_CONFIG: SessionConfig = {
ttsEnabled: true,
@@ -33,3 +34,19 @@ export function saveConfig(config: SessionConfig): void {
// localStorage 不可用时静默失败
}
}
/** 加载主题偏好 */
export function loadTheme(): Theme {
try {
const raw = localStorage.getItem(THEME_KEY);
if (raw === "light" || raw === "dark") return raw;
} catch { /* ignore */ }
return "dark";
}
/** 保存主题偏好 */
export function saveTheme(theme: Theme): void {
try {
localStorage.setItem(THEME_KEY, theme);
} catch { /* ignore */ }
}