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:
@@ -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 */ }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user