feat(theme): implement comprehensive theme management system

Add full theme support with light, dark, and system modes, including:
- Theme store using Pinia for state management
- useTheme composable for reactive theme handling
- Theme setting UI in settings page
- Enhanced CSS variable system with Tailwind integration
- IPC communication for theme persistence
- Internationalization support for theme texts
- System theme detection and auto-switching

The implementation follows ClawX's architecture while adapting to Vue 3 and zn-ai's existing infrastructure.
This commit is contained in:
duanshuwen
2026-04-08 23:46:41 +08:00
parent 3ef3392808
commit a8bfbff0e9
12 changed files with 1450 additions and 326 deletions

View File

@@ -9,7 +9,24 @@
"dark": "Dark Theme",
"light": "Light Theme",
"system": "System Theme",
"primaryColor": "Primary Color"
"primaryColor": "Primary Color",
"description": "Customize the look and feel of the application",
"themeMode": "Theme Mode",
"themeModeDescription": "Choose your preferred theme mode, or follow system settings to switch automatically.",
"lightLabel": "Light",
"lightDescription": "Bright and clear",
"darkLabel": "Dark",
"darkDescription": "Eye comfort",
"systemLabel": "Follow system",
"systemDescription": "Auto switch",
"currentTheme": "Current theme",
"followingSystem": "Following system theme ({{theme}})",
"setToLight": "Set to light theme",
"setToDark": "Set to dark theme",
"preview": "Preview",
"previewDescription": "View the current theme effect",
"lightPreview": "Light preview",
"darkPreview": "Dark preview"
},
"appearance": {
"fontSize": "Font Size",

View File

@@ -9,7 +9,24 @@
"dark": "深色主题",
"light": "浅色主题",
"system": "跟随系统",
"primaryColor": "主题颜色"
"primaryColor": "主题颜色",
"description": "自定义应用程序的外观和风格",
"themeMode": "主题模式",
"themeModeDescription": "选择您偏好的主题模式,或跟随系统设置自动切换。",
"lightLabel": "浅色",
"lightDescription": "明亮清晰",
"darkLabel": "深色",
"darkDescription": "护眼舒适",
"systemLabel": "跟随系统",
"systemDescription": "自动切换",
"currentTheme": "当前主题",
"followingSystem": "跟随系统主题 ({{theme}})",
"setToLight": "已设置为浅色主题",
"setToDark": "已设置为深色主题",
"preview": "预览",
"previewDescription": "查看当前主题效果",
"lightPreview": "浅色预览",
"darkPreview": "深色预览"
},
"appearance": {
"fontSize": "字体大小",