✨ Added dark theme and white theme switching

frontend/bindings/voidraft/internal/models/models.ts

@@ -114,6 +114,11 @@ export class AppearanceConfig {
      */
     "theme": ThemeType;
 
+    /**
+     * 系统界面主题
+     */
+    "systemTheme": SystemThemeType;
+
     /** Creates a new AppearanceConfig instance. */
     constructor($$source: Partial<AppearanceConfig> = {}) {
         if (!("language" in $$source)) {
@@ -122,6 +127,9 @@ export class AppearanceConfig {
         if (!("theme" in $$source)) {
             this["theme"] = ("" as ThemeType);
         }
+        if (!("systemTheme" in $$source)) {
+            this["systemTheme"] = ("" as SystemThemeType);
+        }
 
         Object.assign(this, $$source);
     }
@@ -509,6 +517,31 @@ export enum LanguageType {
     LangEnUS = "en-US",
 };
 
+/**
+ * SystemThemeType 系统主题类型定义
+ */
+export enum SystemThemeType {
+    /**
+     * The Go zero value for the underlying type of the enum.
+     */
+    $zero = "",
+
+    /**
+     * SystemThemeDark 深色系统主题
+     */
+    SystemThemeDark = "dark",
+
+    /**
+     * SystemThemeLight 浅色系统主题
+     */
+    SystemThemeLight = "light",
+
+    /**
+     * SystemThemeAuto 跟随系统主题
+     */
+    SystemThemeAuto = "auto",
+};
+
 /**
  * TabType 定义了制表符类型
  */

frontend/src/App.vue

@@ -1,15 +1,17 @@
 <script setup lang="ts">
 import { onMounted } from 'vue';
 import { useConfigStore } from '@/stores/configStore';
+import { useSystemTheme } from '@/composables/useSystemTheme';
 import WindowTitleBar from '@/components/titlebar/WindowTitleBar.vue';
 
 const configStore = useConfigStore();
-
+const { setTheme } = useSystemTheme();
 
 // 应用启动时加载配置
 onMounted(async () => {
   await configStore.initConfig();
   await configStore.initializeLanguage();
+  setTheme(configStore.config.appearance.systemTheme);
 });
 </script>
 

frontend/src/assets/styles/index.css

@@ -1,4 +1,5 @@
 /* 导入所有CSS文件 */
 @import 'normalize.css';
 @import 'variables.css';
-@import "fonts.css";
+@import "fonts.css";
+@import 'scrollbar.css';

frontend/src/assets/styles/scrollbar.css

@@ -0,0 +1,108 @@
+/* 滚动条样式 - 支持主题切换 */
+
+/* Webkit 浏览器滚动条样式 */
+::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--scrollbar-track);
+  border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb);
+  border-radius: 6px;
+  border: 2px solid var(--scrollbar-track);
+  transition: background-color 0.2s ease;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-thumb-hover);
+}
+
+::-webkit-scrollbar-thumb:active {
+  background: var(--scrollbar-thumb-hover);
+}
+
+::-webkit-scrollbar-corner {
+  background: var(--scrollbar-track);
+}
+
+/* 细滚动条变体（用于特定区域） */
+.thin-scrollbar::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.thin-scrollbar::-webkit-scrollbar-track {
+  background: var(--scrollbar-track);
+  border-radius: 4px;
+}
+
+.thin-scrollbar::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb);
+  border-radius: 4px;
+  border: 1px solid var(--scrollbar-track);
+}
+
+.thin-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-thumb-hover);
+}
+
+/* Firefox 滚动条样式 */
+* {
+  scrollbar-width: auto;
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+}
+
+/* 细滚动条的Firefox样式 */
+.thin-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+}
+
+/* 隐藏滚动条但保持功能的工具类 */
+.hide-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.hide-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* 自定义悬浮显示滚动条 */
+.hover-scrollbar {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.hover-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+.hover-scrollbar:hover {
+  scrollbar-width: auto;
+}
+
+.hover-scrollbar:hover::-webkit-scrollbar {
+  display: block;
+  width: 8px;
+  height: 8px;
+}
+
+.hover-scrollbar:hover::-webkit-scrollbar-track {
+  background: var(--scrollbar-track);
+  border-radius: 4px;
+}
+
+.hover-scrollbar:hover::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb);
+  border-radius: 4px;
+}
+
+.hover-scrollbar:hover::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-thumb-hover);
+} 

frontend/src/assets/styles/variables.css

@@ -1,12 +1,177 @@
 :root {
-  /* 主题颜色 */
+  /* 编辑器区域 */
-  --bg-secondary: #0E1217; /* 工具栏背景 */
-
-  /* 文本颜色 */
   --text-primary: #9BB586; /* 内容区域字体颜色 */
-  --text-secondary: #a0aec0;
+  
-  --text-muted: #666;
+  /* 深色主题颜色变量 */
+  --dark-toolbar-bg: #2d2d2d;
+  --dark-toolbar-border: #404040;
+  --dark-toolbar-text: #ffffff;
+  --dark-toolbar-text-secondary: #cccccc;
+  --dark-toolbar-button-hover: #404040;
+  --dark-bg-secondary: #0E1217;
+  --dark-text-secondary: #a0aec0;
+  --dark-text-muted: #666;
+  --dark-border-color: #2d3748;
+  --dark-settings-bg: #2a2a2a;
+  --dark-settings-card-bg: #333333;
+  --dark-settings-text: #ffffff;
+  --dark-settings-text-secondary: #cccccc;
+  --dark-settings-border: #444444;
+  --dark-settings-input-bg: #3a3a3a;
+  --dark-settings-input-border: #555555;
+  --dark-settings-hover: #404040;
+  --dark-scrollbar-track: #2a2a2a;
+  --dark-scrollbar-thumb: #555555;
+  --dark-scrollbar-thumb-hover: #666666;
+  
+  /* 浅色主题颜色变量 */
+  --light-toolbar-bg: #f8f9fa;
+  --light-toolbar-border: #e9ecef;
+  --light-toolbar-text: #212529;
+  --light-toolbar-text-secondary: #495057;
+  --light-toolbar-button-hover: #e9ecef;
+  --light-bg-secondary: #f7fef7;
+  --light-text-secondary: #374151;
+  --light-text-muted: #6b7280;
+  --light-border-color: #e5e7eb;
+  --light-settings-bg: #ffffff;
+  --light-settings-card-bg: #f8f9fa;
+  --light-settings-text: #212529;
+  --light-settings-text-secondary: #6c757d;
+  --light-settings-border: #dee2e6;
+  --light-settings-input-bg: #ffffff;
+  --light-settings-input-border: #ced4da;
+  --light-settings-hover: #e9ecef;
+  --light-scrollbar-track: #f1f3f4;
+  --light-scrollbar-thumb: #c1c1c1;
+  --light-scrollbar-thumb-hover: #a8a8a8;
+  
+  /* 默认使用深色主题 */
+  --toolbar-bg: var(--dark-toolbar-bg);
+  --toolbar-border: var(--dark-toolbar-border);
+  --toolbar-text: var(--dark-toolbar-text);
+  --toolbar-text-secondary: var(--dark-toolbar-text-secondary);
+  --toolbar-button-hover: var(--dark-toolbar-button-hover);
+  --toolbar-separator: var(--dark-toolbar-button-hover);
+  --bg-secondary: var(--dark-bg-secondary);
+  --text-secondary: var(--dark-text-secondary);
+  --text-muted: var(--dark-text-muted);
+  --border-color: var(--dark-border-color);
+  --settings-bg: var(--dark-settings-bg);
+  --settings-card-bg: var(--dark-settings-card-bg);
+  --settings-text: var(--dark-settings-text);
+  --settings-text-secondary: var(--dark-settings-text-secondary);
+  --settings-border: var(--dark-settings-border);
+  --settings-input-bg: var(--dark-settings-input-bg);
+  --settings-input-border: var(--dark-settings-input-border);
+  --settings-hover: var(--dark-settings-hover);
+  --scrollbar-track: var(--dark-scrollbar-track);
+  --scrollbar-thumb: var(--dark-scrollbar-thumb);
+  --scrollbar-thumb-hover: var(--dark-scrollbar-thumb-hover);
+  
+  color-scheme: light dark;
+}
 
-  /* 边框颜色 */
+/* 监听系统深色主题 */
-  --border-color: #2d3748;
+@media (prefers-color-scheme: dark) {
+  :root[data-theme="auto"] {
+    --toolbar-bg: var(--dark-toolbar-bg);
+    --toolbar-border: var(--dark-toolbar-border);
+    --toolbar-text: var(--dark-toolbar-text);
+    --toolbar-text-secondary: var(--dark-toolbar-text-secondary);
+    --toolbar-button-hover: var(--dark-toolbar-button-hover);
+    --toolbar-separator: var(--dark-toolbar-button-hover);
+    --bg-secondary: var(--dark-bg-secondary);
+    --text-secondary: var(--dark-text-secondary);
+    --text-muted: var(--dark-text-muted);
+    --border-color: var(--dark-border-color);
+    --settings-bg: var(--dark-settings-bg);
+    --settings-card-bg: var(--dark-settings-card-bg);
+    --settings-text: var(--dark-settings-text);
+    --settings-text-secondary: var(--dark-settings-text-secondary);
+    --settings-border: var(--dark-settings-border);
+    --settings-input-bg: var(--dark-settings-input-bg);
+    --settings-input-border: var(--dark-settings-input-border);
+    --settings-hover: var(--dark-settings-hover);
+    --scrollbar-track: var(--dark-scrollbar-track);
+    --scrollbar-thumb: var(--dark-scrollbar-thumb);
+    --scrollbar-thumb-hover: var(--dark-scrollbar-thumb-hover);
+  }
+}
+
+/* 监听系统浅色主题 */
+@media (prefers-color-scheme: light) {
+  :root[data-theme="auto"] {
+    --toolbar-bg: var(--light-toolbar-bg);
+    --toolbar-border: var(--light-toolbar-border);
+    --toolbar-text: var(--light-toolbar-text);
+    --toolbar-text-secondary: var(--light-toolbar-text-secondary);
+    --toolbar-button-hover: var(--light-toolbar-button-hover);
+    --toolbar-separator: var(--light-toolbar-button-hover);
+    --bg-secondary: var(--light-bg-secondary);
+    --text-secondary: var(--light-text-secondary);
+    --text-muted: var(--light-text-muted);
+    --border-color: var(--light-border-color);
+    --settings-bg: var(--light-settings-bg);
+    --settings-card-bg: var(--light-settings-card-bg);
+    --settings-text: var(--light-settings-text);
+    --settings-text-secondary: var(--light-settings-text-secondary);
+    --settings-border: var(--light-settings-border);
+    --settings-input-bg: var(--light-settings-input-bg);
+    --settings-input-border: var(--light-settings-input-border);
+    --settings-hover: var(--light-settings-hover);
+    --scrollbar-track: var(--light-scrollbar-track);
+    --scrollbar-thumb: var(--light-scrollbar-thumb);
+    --scrollbar-thumb-hover: var(--light-scrollbar-thumb-hover);
+  }
+}
+
+/* 手动选择浅色主题 */
+:root[data-theme="light"] {
+  --toolbar-bg: var(--light-toolbar-bg);
+  --toolbar-border: var(--light-toolbar-border);
+  --toolbar-text: var(--light-toolbar-text);
+  --toolbar-text-secondary: var(--light-toolbar-text-secondary);
+  --toolbar-button-hover: var(--light-toolbar-button-hover);
+  --toolbar-separator: var(--light-toolbar-button-hover);
+  --bg-secondary: var(--light-bg-secondary);
+  --text-secondary: var(--light-text-secondary);
+  --text-muted: var(--light-text-muted);
+  --border-color: var(--light-border-color);
+  --settings-bg: var(--light-settings-bg);
+  --settings-card-bg: var(--light-settings-card-bg);
+  --settings-text: var(--light-settings-text);
+  --settings-text-secondary: var(--light-settings-text-secondary);
+  --settings-border: var(--light-settings-border);
+  --settings-input-bg: var(--light-settings-input-bg);
+  --settings-input-border: var(--light-settings-input-border);
+  --settings-hover: var(--light-settings-hover);
+  --scrollbar-track: var(--light-scrollbar-track);
+  --scrollbar-thumb: var(--light-scrollbar-thumb);
+  --scrollbar-thumb-hover: var(--light-scrollbar-thumb-hover);
+}
+
+/* 手动选择深色主题 */
+:root[data-theme="dark"] {
+  --toolbar-bg: var(--dark-toolbar-bg);
+  --toolbar-border: var(--dark-toolbar-border);
+  --toolbar-text: var(--dark-toolbar-text);
+  --toolbar-text-secondary: var(--dark-toolbar-text-secondary);
+  --toolbar-button-hover: var(--dark-toolbar-button-hover);
+  --toolbar-separator: var(--dark-toolbar-button-hover);
+  --bg-secondary: var(--dark-bg-secondary);
+  --text-secondary: var(--dark-text-secondary);
+  --text-muted: var(--dark-text-muted);
+  --border-color: var(--dark-border-color);
+  --settings-bg: var(--dark-settings-bg);
+  --settings-card-bg: var(--dark-settings-card-bg);
+  --settings-text: var(--dark-settings-text);
+  --settings-text-secondary: var(--dark-settings-text-secondary);
+  --settings-border: var(--dark-settings-border);
+  --settings-input-bg: var(--dark-settings-input-bg);
+  --settings-input-border: var(--dark-settings-input-border);
+  --settings-hover: var(--dark-settings-hover);
+  --scrollbar-track: var(--dark-scrollbar-track);
+  --scrollbar-thumb: var(--dark-scrollbar-thumb);
+  --scrollbar-thumb-hover: var(--dark-scrollbar-thumb-hover);
 }

frontend/src/components/titlebar/WindowTitleBar.vue

@@ -123,7 +123,8 @@ onMounted(async () => {
 .windows-titlebar {
   display: flex;
   height: 32px;
-  background: #202020;
+  background: var(--toolbar-bg);
+  border-bottom: 1px solid var(--toolbar-border);
   user-select: none;
   -webkit-user-select: none;
   position: fixed;
@@ -145,7 +146,7 @@ onMounted(async () => {
   flex: 1;
   padding-left: 8px;
   gap: 8px;
-  color: #ffffff;
+  color: var(--toolbar-text);
   font-size: 12px;
   font-weight: 400;
   cursor: default;
@@ -169,7 +170,7 @@ onMounted(async () => {
 
 .titlebar-title {
   font-size: 12px;
-  color: #ffffff;
+  color: var(--toolbar-text);
 }
 
 .titlebar-controls {
@@ -187,7 +188,7 @@ onMounted(async () => {
   height: 32px;
   border: none;
   background: transparent;
-  color: #ffffff;
+  color: var(--toolbar-text);
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -197,11 +198,12 @@ onMounted(async () => {
   margin: 0;
   
   &:hover {
-    background: rgba(255, 255, 255, 0.0605);
+    background: var(--toolbar-button-hover);
   }
   
   &:active {
-    background: rgba(255, 255, 255, 0.0837);
+    background: var(--toolbar-button-hover);
+    opacity: 0.8;
   }
 }
 
@@ -220,12 +222,13 @@ onMounted(async () => {
 
 .minimize-button:hover,
 .maximize-button:hover {
-  background: rgba(255, 255, 255, 0.0605);
+  background: var(--toolbar-button-hover);
 }
 
 .minimize-button:active,
 .maximize-button:active {
-  background: rgba(255, 255, 255, 0.0837);
+  background: var(--toolbar-button-hover);
+  opacity: 0.8;
 }
 
 .close-button:hover {

frontend/src/components/toolbar/Toolbar.vue

@@ -174,7 +174,8 @@ watch(isLoaded, async (newLoaded) => {
       color: var(--text-muted);
 
       .stat-value {
-        color: #e0e0e0;
+        color: var(--text-secondary);
+        font-weight: 500;
       }
     }
   }
@@ -212,10 +213,12 @@ watch(isLoaded, async (newLoaded) => {
         cursor: pointer;
         padding: 0 3px;
         border-radius: 3px;
-        background-color: rgba(255, 255, 255, 0.05);
+        background-color: var(--border-color);
+        opacity: 0.6;
         
         &:hover {
-          background-color: rgba(255, 255, 255, 0.1);
+          opacity: 1;
+          background-color: var(--border-color);
         }
       }
 
@@ -255,7 +258,8 @@ watch(isLoaded, async (newLoaded) => {
       transition: all 0.2s ease;
       
       &:hover {
-        background-color: rgba(255, 255, 255, 0.1);
+        background-color: var(--border-color);
+        opacity: 0.8;
       }
       
       &.active {
@@ -291,7 +295,8 @@ watch(isLoaded, async (newLoaded) => {
         border-radius: 3px;
         
         &:hover {
-          background-color: rgba(255, 255, 255, 0.05);
+          background-color: var(--border-color);
+          opacity: 0.8;
         }
         
         .arrow {
@@ -321,7 +326,8 @@ watch(isLoaded, async (newLoaded) => {
           white-space: nowrap;
           
           &:hover {
-            background-color: var(--bg-hover);
+            background-color: var(--border-color);
+            opacity: 0.8;
           }
           
           &.active {
@@ -342,7 +348,7 @@ watch(isLoaded, async (newLoaded) => {
       padding: 2px;
 
       &:hover {
-        color: var(--text-primary);
+        color: var(--text-secondary);
       }
     }
   }

frontend/src/composables/useSystemTheme.ts

@@ -0,0 +1,35 @@
+import { ref, watch, onMounted, onUnmounted } from 'vue';
+import { useConfigStore } from '@/stores/configStore';
+
+export function useSystemTheme() {
+  const configStore = useConfigStore();
+  const currentSystemTheme = ref<'dark' | 'light'>('dark');
+  
+  // 设置主题 - 简化版本
+  const setTheme = (theme: string) => {
+    const root = document.documentElement;
+    root.setAttribute('data-theme', theme);
+  };
+
+  // 监听配置变化
+  watch(
+    () => configStore.config.appearance.systemTheme,
+    (newTheme) => {
+      // 直接根据配置设置主题，不需要检测系统主题
+      const root = document.documentElement;
+      root.setAttribute('data-theme', newTheme);
+    },
+    { immediate: true }
+  );
+
+  onMounted(() => {
+    const root = document.documentElement;
+    const systemTheme = configStore.config.appearance.systemTheme;
+    root.setAttribute('data-theme', systemTheme);
+  });
+
+  return {
+    currentSystemTheme,
+    setTheme
+  };
+} 

frontend/src/i18n/locales/en-US.ts

@@ -37,12 +37,19 @@ export default {
     languageChanged: 'Language setting updated',
     languageChangeFailed: 'Failed to update language setting',
     themeChanged: 'Theme setting updated',
-    themeChangeFailed: 'Failed to update theme setting'
+    themeChangeFailed: 'Failed to update theme setting',
+    systemThemeChanged: 'System theme setting updated',
+    systemThemeChangeFailed: 'Failed to update system theme setting'
   },
   languages: {
     'zh-CN': '简体中文',
     'en-US': 'English'
   },
+  systemTheme: {
+    dark: 'Dark',
+    light: 'Light',
+    auto: 'Follow System'
+  },
   document: {
     loadSuccess: 'Document loaded successfully',
     loadFailed: 'Failed to load document',
@@ -76,7 +83,6 @@ export default {
     cancel: 'Cancel',
     dangerZone: 'Danger Zone',
     resetAllSettings: 'Reset All Settings',
-    resetDescription: 'This will restore all settings to their default values. This action cannot be undone.',
     confirmReset: 'Click again to confirm reset',
     globalHotkey: 'Global Keyboard Shortcuts',
     enableGlobalHotkey: 'Enable Global Hotkeys',
@@ -106,6 +112,7 @@ export default {
     tabs: 'Tabs',
     enableTabIndent: 'Enable Tab Indent',
     language: 'Interface Language',
+    systemTheme: 'System Theme',
     theme: 'Editor Theme',
     themeDescription: 'Choose editor theme',
     restartRequired: '(Restart required)',

frontend/src/i18n/locales/zh-CN.ts

@@ -37,12 +37,19 @@ export default {
     languageChanged: '语言设置已更新',
     languageChangeFailed: '语言设置更新失败',
     themeChanged: '主题设置已更新',
-    themeChangeFailed: '主题设置更新失败'
+    themeChangeFailed: '主题设置更新失败',
+    systemThemeChanged: '系统主题设置已更新',
+    systemThemeChangeFailed: '系统主题设置更新失败'
   },
   languages: {
     'zh-CN': '简体中文',
     'en-US': 'English'
   },
+  systemTheme: {
+    dark: '深色',
+    light: '浅色',
+    auto: '跟随系统'
+  },
   document: {
     loadSuccess: '文档加载成功',
     loadFailed: '文档加载失败',
@@ -76,7 +83,6 @@ export default {
     cancel: '取消',
     dangerZone: '危险操作',
     resetAllSettings: '重置所有设置',
-    resetDescription: '这将恢复所有设置为默认值，此操作无法撤销',
     confirmReset: '再次点击确认重置',
     globalHotkey: '全局键盘快捷键',
     enableGlobalHotkey: '启用全局热键',
@@ -106,6 +112,7 @@ export default {
     tabs: '制表符',
     enableTabIndent: '启用 Tab 缩进',
     language: '界面语言',
+    systemTheme: '系统主题',
     theme: '编辑器主题',
     themeDescription: '选择编辑器主题',
     restartRequired: '(需要重启)',

frontend/src/stores/configStore.ts

@@ -7,6 +7,7 @@ import {
     EditingConfig,
     GeneralConfig,
     LanguageType,
+    SystemThemeType,
     TabType,
     ThemeType
 } from '@/../bindings/voidraft/internal/models';
@@ -67,7 +68,8 @@ const EDITING_CONFIG_KEY_MAP: EditingConfigKeyMap = {
 
 const APPEARANCE_CONFIG_KEY_MAP: AppearanceConfigKeyMap = {
     language: 'appearance.language',
-    theme: 'appearance.theme'
+    theme: 'appearance.theme',
+    systemTheme: 'appearance.system_theme'
 } as const;
 
 // 配置限制
@@ -139,7 +141,8 @@ const DEFAULT_CONFIG: AppConfig = {
     },
     appearance: {
         language: LanguageType.LangZhCN,
-        theme: 'default-dark' as ThemeType
+        theme: 'default-dark' as ThemeType,
+        systemTheme: 'dark' as SystemThemeType
     },
     keyBindings: {},
     updates: {},
@@ -308,6 +311,13 @@ export const useConfigStore = defineStore('config', () => {
         }, 'config.themeChangeFailed', 'config.themeChanged');
     };
 
+    // 系统主题设置方法
+    const setSystemTheme = async (systemTheme: SystemThemeType): Promise<void> => {
+        await safeCall(async () => {
+            await updateAppearanceConfig('systemTheme', systemTheme);
+        }, 'config.systemThemeChangeFailed', 'config.systemThemeChanged');
+    };
+
     // 初始化语言设置
     const initializeLanguage = async (): Promise<void> => {
         try {
@@ -372,6 +382,7 @@ export const useConfigStore = defineStore('config', () => {
 
         // 主题相关方法
         setTheme,
+        setSystemTheme,
 
         // 字体大小操作
         ...adjusters.fontSize,

frontend/src/types/index.ts

@@ -1,4 +1,4 @@
 // 统一类型导出
-export type { ThemeType, LanguageType } from '@/../bindings/voidraft/internal/models';
+export type { ThemeType, LanguageType, SystemThemeType } from '@/../bindings/voidraft/internal/models';
 export * from './theme';
 export * from './editor'; 

frontend/src/views/settings/Settings.vue

@@ -45,7 +45,7 @@ const goBackToEditor = async () => {
           <h1>{{ t('settings.title') }}</h1>
         </div>
       </div>
-      <div class="settings-nav">
+      <div class="settings-nav thin-scrollbar">
         <div
           v-for="item in navItems"
           :key="item.id"
@@ -76,8 +76,8 @@ const goBackToEditor = async () => {
   height: 100vh;
   margin: 0;
   padding: 0;
-  background-color: #2a2a2a;
+  background-color: var(--settings-bg);
-  color: #e0e0e0;
+  color: var(--settings-text);
   display: flex;
   overflow: hidden;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
@@ -85,16 +85,16 @@ const goBackToEditor = async () => {
   .settings-sidebar {
     width: 200px;
     height: 100%;
-    background-color: #333333;
+    background-color: var(--settings-card-bg);
-    border-right: 1px solid #444444;
+    border-right: 1px solid var(--settings-border);
     display: flex;
     flex-direction: column;
     box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
     
     .settings-header {
       padding: 20px 16px;
-      border-bottom: 1px solid #444444;
+      border-bottom: 1px solid var(--settings-border);
-      background-color: #2d2d2d;
+      background-color: var(--settings-card-bg);
       
       .header-content {
         display: flex;
@@ -104,7 +104,7 @@ const goBackToEditor = async () => {
         .back-button {
           background: none;
           border: none;
-          color: #a0a0a0;
+          color: var(--settings-text-secondary);
           cursor: pointer;
           padding: 6px;
           border-radius: 4px;
@@ -114,8 +114,8 @@ const goBackToEditor = async () => {
           transition: all 0.2s ease;
           
           &:hover {
-            color: #e0e0e0;
+            color: var(--settings-text);
-            background-color: #3a3a3a;
+            background-color: var(--settings-hover);
           }
           
           svg {
@@ -128,7 +128,7 @@ const goBackToEditor = async () => {
           font-size: 18px;
           font-weight: 600;
           margin: 0;
-          color: #ffffff;
+          color: var(--settings-text);
         }
       }
     }
@@ -138,19 +138,6 @@ const goBackToEditor = async () => {
       padding: 10px 0;
       overflow-y: auto;
       
-      &::-webkit-scrollbar {
-        width: 8px;
-      }
-      
-      &::-webkit-scrollbar-track {
-        background: #333333;
-      }
-      
-      &::-webkit-scrollbar-thumb {
-        background-color: #555555;
-        border-radius: 4px;
-      }
-      
       .nav-item {
         display: flex;
         align-items: center;
@@ -160,11 +147,11 @@ const goBackToEditor = async () => {
         border-left: 3px solid transparent;
         
         &:hover {
-          background-color: #3a3a3a;
+          background-color: var(--settings-hover);
         }
         
         &.active {
-          background-color: #3c3c3c;
+          background-color: var(--settings-hover);
           border-left-color: #4a9eff;
           font-weight: 500;
         }
@@ -183,8 +170,8 @@ const goBackToEditor = async () => {
     
     .settings-footer {
       padding: 12px 16px 16px 16px;
-      border-top: 1px solid #444444;
+      border-top: 1px solid var(--settings-border);
-      background-color: #2d2d2d;
+      background-color: var(--settings-card-bg);
       
       .memory-info-section {
         display: flex;
@@ -193,7 +180,7 @@ const goBackToEditor = async () => {
         
         .section-title {
           font-size: 10px;
-          color: #777777;
+          color: var(--settings-text-secondary);
           font-weight: 500;
           margin-bottom: 0;
           text-transform: uppercase;
@@ -206,36 +193,11 @@ const goBackToEditor = async () => {
   .settings-content {
     flex: 1;
     height: 100%;
-    padding: 24px;
+    padding: 24px 24px 48px 24px;
     overflow-y: auto;
-    background-color: #2a2a2a;
+    background-color: var(--settings-bg);
-    
-    &::-webkit-scrollbar {
-      width: 10px;
-    }
-    
-    &::-webkit-scrollbar-track {
-      background: #2a2a2a;
-    }
-    
-    &::-webkit-scrollbar-thumb {
-      background-color: #555555;
-      border-radius: 5px;
-      border: 2px solid #2a2a2a;
-    }
   }
 }
 
-// 自定义变量
+
-:root {
-  --border-color: #444444;
-  --hover-color: #3a3a3a;
-  --active-bg: #3c3c3c;
-  --accent-color: #4a9eff;
-  --bg-primary: #2a2a2a;
-  --bg-secondary: #333333;
-  --text-primary: #e0e0e0;
-  --text-secondary: #a0a0a0;
-  --text-muted: #777777;
-}
 </style> 

frontend/src/views/settings/components/SettingItem.vue

@@ -21,11 +21,12 @@ defineProps<{
 .setting-item {
   display: flex;
   padding: 14px 0;
-  border-bottom: 1px solid #444444;
+  border-bottom: 1px solid var(--settings-border);
   transition: background-color 0.15s ease;
   
   &:hover {
-    background-color: rgba(255, 255, 255, 0.03);
+    background-color: var(--settings-hover);
+    opacity: 0.8;
   }
   
   &:last-child {
@@ -40,12 +41,12 @@ defineProps<{
       font-size: 14px;
       font-weight: 500;
       margin-bottom: 6px;
-      color: #e0e0e0;
+      color: var(--settings-text);
     }
     
     .setting-description {
       font-size: 12px;
-      color: #a0a0a0;
+      color: var(--settings-text-secondary);
       line-height: 1.5;
     }
   }

frontend/src/views/settings/components/SettingSection.vue

@@ -16,19 +16,20 @@ defineProps<{
 <style scoped lang="scss">
 .setting-section {
   margin-bottom: 30px;
-  background-color: #333333;
+  background-color: var(--settings-card-bg);
   border-radius: 6px;
   overflow: hidden;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  border: 1px solid var(--settings-border);
   
   .section-title {
     font-size: 14px;
     font-weight: 600;
     margin: 0;
     padding: 12px 16px;
-    background-color: #3d3d3d;
+    background-color: var(--settings-hover);
-    color: #ffffff;
+    color: var(--settings-text);
-    border-bottom: 1px solid #444444;
+    border-bottom: 1px solid var(--settings-border);
   }
   
   .section-content {

frontend/src/views/settings/components/ToggleSwitch.vue

@@ -22,7 +22,7 @@ const toggle = () => {
 .toggle-switch {
   width: 40px;
   height: 20px;
-  background-color: #555555;
+  background-color: var(--settings-input-border);
   border-radius: 10px;
   position: relative;
   cursor: pointer;
@@ -44,7 +44,7 @@ const toggle = () => {
     left: 2px;
     width: 16px;
     height: 16px;
-    background-color: #f0f0f0;
+    background-color: var(--settings-text);
     border-radius: 50%;
     transition: all 0.2s ease;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);

frontend/src/views/settings/pages/AppearancePage.vue

@@ -5,7 +5,7 @@ import { useI18n } from 'vue-i18n';
 import { ref, computed, watch } from 'vue';
 import SettingSection from '../components/SettingSection.vue';
 import SettingItem from '../components/SettingItem.vue';
-import type { ThemeType } from '@/types';
+import type { ThemeType, SystemThemeType } from '@/types';
 import { LanguageType } from '@/../bindings/voidraft/internal/models';
 import { AVAILABLE_THEMES } from '@/types/theme';
 import { useTheme } from '@/composables/useTheme';
@@ -21,6 +21,13 @@ const languageOptions = [
   { value: LanguageType.LangEnUS, label: t('languages.en-US') },
 ];
 
+// 系统主题选项
+const systemThemeOptions = [
+  { value: 'dark' as SystemThemeType, label: t('systemTheme.dark') },
+  { value: 'light' as SystemThemeType, label: t('systemTheme.light') },
+  { value: 'auto' as SystemThemeType, label: t('systemTheme.auto') },
+];
+
 // 更新语言设置
 const updateLanguage = async (event: Event) => {
   const select = event.target as HTMLSelectElement;
@@ -32,6 +39,17 @@ const updateLanguage = async (event: Event) => {
   );
 };
 
+// 更新系统主题设置
+const updateSystemTheme = async (event: Event) => {
+  const select = event.target as HTMLSelectElement;
+  const selectedSystemTheme = select.value as SystemThemeType;
+  
+  await safeCall(
+    () => configStore.setSystemTheme(selectedSystemTheme),
+    'config.systemThemeChangeFailed'
+  );
+};
+
 // 主题选择
 const themeOptions = computed(() => AVAILABLE_THEMES);
 const selectedTheme = ref<ThemeType>(configStore.config.appearance.theme || 'default-dark' as ThemeType);
@@ -77,6 +95,16 @@ watch(() => configStore.config.appearance.theme, (newTheme) => {
       </SettingItem>
     </SettingSection>
     
+    <SettingSection :title="t('settings.systemTheme')">
+      <SettingItem :title="t('settings.systemTheme')">
+        <select class="select-input" :value="configStore.config.appearance.systemTheme" @change="updateSystemTheme">
+          <option v-for="option in systemThemeOptions" :key="option.value" :value="option.value">
+            {{ option.label }}
+          </option>
+        </select>
+      </SettingItem>
+    </SettingSection>
+    
     <SettingSection :title="t('settings.appearance')">
       <div class="appearance-content">
         <div class="theme-selection-area">
@@ -140,6 +168,7 @@ watch(() => configStore.config.appearance.theme, (newTheme) => {
 <style scoped lang="scss">
 .settings-page {
   max-width: 1000px;
+  padding-bottom: 48px;
 }
 
 .appearance-content {
@@ -169,17 +198,18 @@ watch(() => configStore.config.appearance.theme, (newTheme) => {
 .select-input {
   min-width: 150px;
   padding: 8px 12px;
-  border: 1px solid #555555;
+  border: 1px solid var(--settings-input-border);
   border-radius: 4px;
-  background-color: #3a3a3a;
+  background-color: var(--settings-input-bg);
-  color: #e0e0e0;
+  color: var(--settings-text);
   font-size: 13px;
   appearance: none;
-  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
   background-repeat: no-repeat;
   background-position: right 8px center;
   background-size: 16px;
   padding-right: 30px;
+  transition: border-color 0.2s ease;
   
   &:focus {
     outline: none;
@@ -187,7 +217,8 @@ watch(() => configStore.config.appearance.theme, (newTheme) => {
   }
   
   option {
-    background-color: #2a2a2a;
+    background-color: var(--settings-card-bg);
+    color: var(--settings-text);
   }
 }
 

frontend/src/views/settings/pages/EditingPage.vue

@@ -295,30 +295,31 @@ const fontPreviewText = computed(() => {
 <style scoped lang="scss">
 .settings-page {
   max-width: 800px;
+  padding-bottom: 48px;
 }
 
 .number-control {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 8px;
   
   .control-button {
-    width: 30px;
+    width: 28px;
-    height: 30px;
+    height: 28px;
+    border: 1px solid var(--settings-input-border);
+    background-color: var(--settings-input-bg);
+    color: var(--settings-text);
+    border-radius: 4px;
+    cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: #3a3a3a;
+    font-size: 14px;
-    border: 1px solid #555555;
-    border-radius: 4px;
-    color: #e0e0e0;
-    cursor: pointer;
-    font-size: 16px;
     transition: all 0.2s ease;
     
     &:hover:not(:disabled) {
-      background-color: #444444;
+      background-color: var(--settings-hover);
-      border-color: #666666;
+      border-color: var(--settings-border);
     }
     
     &:active:not(:disabled) {
@@ -335,9 +336,9 @@ const fontPreviewText = computed(() => {
     min-width: 50px;
     text-align: center;
     font-size: 14px;
-    color: #e0e0e0;
+    color: var(--settings-text);
-    background-color: #3a3a3a;
+    background-color: var(--settings-input-bg);
-    border: 1px solid #555555;
+    border: 1px solid var(--settings-input-border);
     border-radius: 4px;
     padding: 5px 8px;
   }
@@ -346,14 +347,14 @@ const fontPreviewText = computed(() => {
 .font-size-preview {
   margin: 15px 0 5px 20px;
   padding: 15px;
-  background-color: #252525;
+  background-color: var(--settings-card-bg);
-  border: 1px solid #444444;
+  border: 1px solid var(--settings-border);
   border-radius: 4px;
   font-family: 'Consolas', 'Courier New', monospace;
   
   .preview-label {
     font-size: 12px;
-    color: #888888;
+    color: var(--text-muted);
     margin-bottom: 8px;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   }
@@ -364,7 +365,7 @@ const fontPreviewText = computed(() => {
     
     span {
       line-height: 1.4;
-      color: #d0d0d0;
+      color: var(--settings-text-secondary);
     }
     
     .indent {
@@ -377,13 +378,13 @@ const fontPreviewText = computed(() => {
 .font-preview {
   margin: 15px 0 5px 20px;
   padding: 15px;
-  background-color: #252525;
+  background-color: var(--settings-card-bg);
-  border: 1px solid #444444;
+  border: 1px solid var(--settings-border);
   border-radius: 4px;
   
   .preview-label {
     font-size: 12px;
-    color: #888888;
+    color: var(--text-muted);
     margin-bottom: 8px;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   }
@@ -393,7 +394,7 @@ const fontPreviewText = computed(() => {
     flex-direction: column;
     
     span {
-      color: #d0d0d0;
+      color: var(--settings-text-secondary);
     }
     
     .indent {
@@ -407,10 +408,10 @@ const fontPreviewText = computed(() => {
 .font-weight-select {
   min-width: 180px;
   padding: 8px 12px;
-  border: 1px solid #555555;
+  border: 1px solid var(--settings-input-border);
   border-radius: 4px;
-  background-color: #3a3a3a;
+  background-color: var(--settings-input-bg);
-  color: #e0e0e0;
+  color: var(--settings-text);
   font-size: 13px;
   cursor: pointer;
   
@@ -420,12 +421,12 @@ const fontPreviewText = computed(() => {
   }
   
   &:hover {
-    border-color: #666666;
+    border-color: var(--settings-border);
   }
   
   option {
-    background-color: #3a3a3a;
+    background-color: var(--settings-input-bg);
-    color: #e0e0e0;
+    color: var(--settings-text);
     padding: 4px 8px;
   }
 }
@@ -433,18 +434,18 @@ const fontPreviewText = computed(() => {
 .tab-type-toggle {
   min-width: 100px;
   padding: 8px 15px;
-  background-color: #3a3a3a;
+  background-color: var(--settings-input-bg);
-  border: 1px solid #555555;
+  border: 1px solid var(--settings-input-border);
   border-radius: 4px;
-  color: #e0e0e0;
+  color: var(--settings-text);
   cursor: pointer;
   font-size: 13px;
   text-align: center;
   transition: all 0.2s ease;
   
   &:hover {
-    background-color: #444444;
+    background-color: var(--settings-hover);
-    border-color: #666666;
+    border-color: var(--settings-border);
   }
   
   &:active {
@@ -455,10 +456,10 @@ const fontPreviewText = computed(() => {
 .number-input {
   width: 100px;
   padding: 8px 12px;
-  border: 1px solid #555555;
+  border: 1px solid var(--settings-input-border);
   border-radius: 4px;
-  background-color: #3a3a3a;
+  background-color: var(--settings-input-bg);
-  color: #e0e0e0;
+  color: var(--settings-text);
   font-size: 13px;
   
   &:focus {
@@ -467,14 +468,14 @@ const fontPreviewText = computed(() => {
   }
   
   &:hover {
-    border-color: #666666;
+    border-color: var(--settings-border);
   }
   
   &:disabled {
     opacity: 0.7;
     cursor: not-allowed;
-    background-color: #2a2a2a;
+    background-color: var(--settings-hover);
-    color: #a0a0a0;
+    color: var(--text-muted);
   }
 }
 
@@ -491,8 +492,8 @@ const fontPreviewText = computed(() => {
     cursor: not-allowed;
     
     &:hover {
-      background-color: #3a3a3a;
+      background-color: var(--settings-input-bg);
-      border-color: #555555;
+      border-color: var(--settings-input-border);
     }
   }
   
@@ -506,8 +507,8 @@ const fontPreviewText = computed(() => {
   cursor: not-allowed;
   
   &:hover {
-    background-color: #3a3a3a;
+    background-color: var(--settings-input-bg);
-    border-color: #555555;
+    border-color: var(--settings-input-border);
     transform: none;
   }
   

frontend/src/views/settings/pages/GeneralPage.vue

@@ -148,9 +148,11 @@ const progressBarClass = computed(() => {
 });
 
 const progressBarWidth = computed(() => {
-  if (isMigrating.value) {
+  // 只有在显示消息且正在迁移时才显示进度条
+  if (showMessages.value && isMigrating.value) {
     return migrationProgress.progress + '%';
-  } else if (migrationComplete.value || migrationFailed.value) {
+  } else if (showMessages.value && (migrationComplete.value || migrationFailed.value)) {
+    // 迁移完成或失败时，短暂显示100%，然后随着消息隐藏而隐藏
     return '100%';
   }
   return '0%';
@@ -369,7 +371,7 @@ onUnmounted(() => {
             <div 
               class="progress-bar" 
               :class="[
-                { 'active': showMessages },
+                { 'active': showMessages && (isMigrating || migrationComplete || migrationFailed) },
                 progressBarClass
               ]"
               :style="{ width: progressBarWidth }"
@@ -392,7 +394,7 @@ onUnmounted(() => {
     </SettingSection>
     
     <SettingSection :title="t('settings.dangerZone')">
-      <SettingItem :title="t('settings.resetAllSettings')" :description="t('settings.resetDescription')">
+      <SettingItem :title="t('settings.resetAllSettings')">
         <button 
           class="reset-button" 
           :class="{ 'confirming': resetConfirmState === 'confirming' }"
@@ -415,6 +417,7 @@ onUnmounted(() => {
 <style scoped lang="scss">
 .settings-page {
   max-width: 800px;
+  padding-bottom: 48px;
 }
 
 .hotkey-selector {
@@ -453,15 +456,15 @@ onUnmounted(() => {
       .modifier-key {
         display: inline-block;
         padding: 6px 12px;
-        background-color: #444444;
+        background-color: var(--settings-input-bg);
-        border: 1px solid #555555;
+        border: 1px solid var(--settings-input-border);
         border-radius: 4px;
-        color: #b0b0b0;
+        color: var(--settings-text-secondary);
         font-size: 13px;
         transition: all 0.2s ease;
         
         &:hover {
-          background-color: #4a4a4a;
+          background-color: var(--settings-hover);
         }
       }
       
@@ -476,13 +479,13 @@ onUnmounted(() => {
   .key-select {
     min-width: 80px;
     padding: 8px 12px;
-    background-color: #3a3a3a;
+    background-color: var(--settings-input-bg);
-    border: 1px solid #555555;
+    border: 1px solid var(--settings-input-border);
     border-radius: 4px;
-    color: #e0e0e0;
+    color: var(--settings-text);
     font-size: 13px;
     appearance: none;
-    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
     background-repeat: no-repeat;
     background-position: right 8px center;
     background-size: 16px;
@@ -496,11 +499,12 @@ onUnmounted(() => {
     &:disabled {
       opacity: 0.5;
       cursor: not-allowed;
-      background-color: #2a2a2a;
+      background-color: var(--settings-hover);
     }
     
     option {
-      background-color: #2a2a2a;
+      background-color: var(--settings-input-bg);
+      color: var(--settings-text);
     }
   }
   
@@ -509,19 +513,19 @@ onUnmounted(() => {
     align-items: center;
     gap: 8px;
     padding: 8px 12px;
-    background-color: #252525;
+    background-color: var(--settings-card-bg);
-    border: 1px solid #444444;
+    border: 1px solid var(--settings-border);
     border-radius: 4px;
     margin-top: 8px;
     
     .preview-label {
       font-size: 12px;
-      color: #888888;
+      color: var(--settings-text-secondary);
     }
     
     .preview-hotkey {
       font-size: 13px;
-      color: #4a9eff;
+      color: var(--settings-text);
       font-weight: 500;
       font-family: 'Consolas', 'Courier New', monospace;
     }
@@ -544,7 +548,7 @@ onUnmounted(() => {
     .setting-title {
       font-size: 14px;
       font-weight: 500;
-      color: #e0e0e0;
+      color: var(--settings-text);
     }
   }
 }
@@ -563,24 +567,23 @@ onUnmounted(() => {
       width: 100%;
       box-sizing: border-box;
       padding: 10px 12px;
-      background-color: #3a3a3a;
+      background-color: var(--settings-input-bg);
-      border: 1px solid #555555;
+      border: 1px solid var(--settings-input-border);
       border-radius: 4px;
-      color: #e0e0e0;
+      color: var(--settings-text);
       font-size: 13px;
       line-height: 1.2;
       transition: all 0.2s ease;
       cursor: pointer;
       
       &:hover:not(:disabled) {
-        border-color: #4a9eff;
+        border-color: var(--settings-hover);
-        background-color: #404040;
+        background-color: var(--settings-hover);
       }
       
       &:focus {
         outline: none;
         border-color: #4a9eff;
-        background-color: #404040;
       }
       
       &:disabled {
@@ -589,7 +592,7 @@ onUnmounted(() => {
       }
       
       &::placeholder {
-        color: #888888;
+        color: var(--text-muted);
       }
     }
     
@@ -598,25 +601,27 @@ onUnmounted(() => {
       bottom: 0;
       left: 0;
       height: 2px;
-      background-color: #22c55e;
+      background-color: transparent;
-      transition: width 0.3s ease;
       border-radius: 0 0 4px 4px;
+      transition: all 0.3s ease;
+      width: 0;
       opacity: 0;
       
       &.active {
         opacity: 1;
-      }
+        
+        &.migrating {
+          background-color: #3b82f6;
+          animation: progress-wave 2s infinite;
+        }
 
-      &.migrating {
+        &.success {
-        background-color: #3b82f6;
+          background-color: #22c55e;
-      }
+        }
 
-      &.success {
+        &.error {
-        background-color: #22c55e;
+          background-color: #ef4444;
-      }
+        }
-
-      &.error {
-        background-color: #ef4444;
       }
     }
   }
@@ -653,10 +658,10 @@ onUnmounted(() => {
     }
       
     &.start {
-      color: #94a3b8;
+      color: var(--text-muted);
       
       &::before {
-        background-color: #94a3b8;
+        background-color: var(--text-muted);
       }
     }
       
@@ -732,6 +737,19 @@ onUnmounted(() => {
   }
 }
 
+// 进度条波浪动画
+@keyframes progress-wave {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
 // 按钮脉冲动画
 @keyframes pulse-button {
   0% {

frontend/src/views/settings/pages/KeyBindingsPage.vue

@@ -121,6 +121,7 @@ const handleKeyDown = (event: KeyboardEvent, binding: KeyBinding) => {
 <style scoped lang="scss">
 .settings-page {
   max-width: 800px;
+  padding-bottom: 48px;
 }
 
 .key-bindings-container {
@@ -129,8 +130,8 @@ const handleKeyDown = (event: KeyboardEvent, binding: KeyBinding) => {
   .key-bindings-header {
     display: flex;
     padding: 0 0 10px 0;
-    border-bottom: 1px solid #444444;
+    border-bottom: 1px solid var(--settings-border);
-    color: #a0a0a0;
+    color: var(--text-muted);
     font-size: 13px;
     font-weight: 500;
   }
@@ -138,7 +139,7 @@ const handleKeyDown = (event: KeyboardEvent, binding: KeyBinding) => {
   .key-binding-row {
     display: flex;
     padding: 14px 0;
-    border-bottom: 1px solid #3a3a3a;
+    border-bottom: 1px solid var(--settings-border);
     align-items: center;
     transition: background-color 0.2s ease;
     
@@ -147,7 +148,7 @@ const handleKeyDown = (event: KeyboardEvent, binding: KeyBinding) => {
     }
     
     &:hover {
-      background-color: rgba(255, 255, 255, 0.03);
+      background-color: var(--settings-hover);
     }
     
     &.is-editing {
@@ -159,6 +160,7 @@ const handleKeyDown = (event: KeyboardEvent, binding: KeyBinding) => {
     flex: 1;
     padding-right: 10px;
     font-size: 14px;
+    color: var(--settings-text);
   }
   
   .keybinding-col {
@@ -169,15 +171,16 @@ const handleKeyDown = (event: KeyboardEvent, binding: KeyBinding) => {
     
     &.is-editing {
       font-style: italic;
-      color: #a0a0a0;
+      color: var(--text-muted);
     }
     
     .key-badge {
-      background-color: #3a3a3a;
+      background-color: var(--settings-input-bg);
       padding: 3px 8px;
       border-radius: 3px;
       font-size: 12px;
-      border: 1px solid #555555;
+      border: 1px solid var(--settings-input-border);
+      color: var(--settings-text);
     }
   }
   
@@ -187,17 +190,17 @@ const handleKeyDown = (event: KeyboardEvent, binding: KeyBinding) => {
     
     .edit-button {
       padding: 5px 10px;
-      background-color: #3a3a3a;
+      background-color: var(--settings-input-bg);
-      border: 1px solid #555555;
+      border: 1px solid var(--settings-input-border);
       border-radius: 4px;
-      color: #e0e0e0;
+      color: var(--settings-text);
       cursor: pointer;
       font-size: 13px;
       transition: all 0.2s ease;
       
       &:hover {
-        background-color: #444444;
+        background-color: var(--settings-hover);
-        border-color: #666666;
+        border-color: var(--settings-border);
       }
       
       &:active {
@@ -209,9 +212,9 @@ const handleKeyDown = (event: KeyboardEvent, binding: KeyBinding) => {
 
 .coming-soon-placeholder {
   padding: 20px;
-  background-color: #333333;
+  background-color: var(--settings-card-bg);
   border-radius: 6px;
-  color: #a0a0a0;
+  color: var(--text-muted);
   text-align: center;
   font-style: italic;
   font-size: 14px;

frontend/src/views/settings/pages/UpdatesPage.vue

@@ -89,6 +89,7 @@ const downloadUpdate = () => {
 <style scoped lang="scss">
 .settings-page {
   max-width: 800px;
+  padding-bottom: 48px;
 }
 
 .update-info {
@@ -105,22 +106,22 @@ const downloadUpdate = () => {
       font-size: 14px;
       
       .label {
-        color: #a0a0a0;
+        color: var(--text-muted);
         margin-right: 5px;
       }
       
       .version {
-        color: #e0e0e0;
+        color: var(--settings-text);
         font-weight: 500;
       }
     }
     
     .check-button {
       padding: 8px 16px;
-      background-color: #3a3a3a;
+      background-color: var(--settings-input-bg);
-      border: 1px solid #555555;
+      border: 1px solid var(--settings-input-border);
       border-radius: 4px;
-      color: #e0e0e0;
+      color: var(--settings-text);
       cursor: pointer;
       font-size: 13px;
       transition: all 0.2s ease;
@@ -129,8 +130,8 @@ const downloadUpdate = () => {
       gap: 8px;
       
       &:hover:not(:disabled) {
-        background-color: #444444;
+        background-color: var(--settings-hover);
-        border-color: #666666;
+        border-color: var(--settings-border);
       }
       
       &:active:not(:disabled) {
@@ -148,7 +149,7 @@ const downloadUpdate = () => {
         height: 14px;
         border: 2px solid rgba(255, 255, 255, 0.3);
         border-radius: 50%;
-        border-top-color: #e0e0e0;
+        border-top-color: var(--settings-text);
         animation: spin 1s linear infinite;
       }
       
@@ -159,8 +160,8 @@ const downloadUpdate = () => {
   }
   
   .update-available {
-    background-color: #2c3847;
+    background-color: var(--settings-card-bg);
-    border: 1px solid #3a4a5c;
+    border: 1px solid var(--settings-border);
     border-radius: 6px;
     padding: 16px;
     
@@ -199,7 +200,7 @@ const downloadUpdate = () => {
     .update-notes {
       .notes-title {
         font-size: 13px;
-        color: #b0b0b0;
+        color: var(--settings-text-secondary);
         margin-bottom: 8px;
       }
       
@@ -209,7 +210,7 @@ const downloadUpdate = () => {
         
         li {
           font-size: 13px;
-          color: #d0d0d0;
+          color: var(--settings-text-secondary);
           margin-bottom: 6px;
           
           &:last-child {

internal/models/config.go

@@ -56,6 +56,18 @@ const (
 	ThemeTokyoNightDay ThemeType = "tokyo-night-day"
 )
 
+// SystemThemeType 系统主题类型定义
+type SystemThemeType string
+
+const (
+	// SystemThemeDark 深色系统主题
+	SystemThemeDark SystemThemeType = "dark"
+	// SystemThemeLight 浅色系统主题
+	SystemThemeLight SystemThemeType = "light"
+	// SystemThemeAuto 跟随系统主题
+	SystemThemeAuto SystemThemeType = "auto"
+)
+
 // GeneralConfig 通用设置配置
 type GeneralConfig struct {
 	AlwaysOnTop      bool   `json:"alwaysOnTop" yaml:"always_on_top" mapstructure:"always_on_top"`                // 窗口是否置顶
@@ -95,8 +107,9 @@ type EditingConfig struct {
 
 // AppearanceConfig 外观设置配置
 type AppearanceConfig struct {
-	Language LanguageType `json:"language" yaml:"language" mapstructure:"language"` // 界面语言
+	Language    LanguageType    `json:"language" yaml:"language" mapstructure:"language"`            // 界面语言
-	Theme    ThemeType    `json:"theme" yaml:"theme" mapstructure:"theme"`          // 编辑器主题
+	Theme       ThemeType       `json:"theme" yaml:"theme" mapstructure:"theme"`                     // 编辑器主题
+	SystemTheme SystemThemeType `json:"systemTheme" yaml:"system_theme" mapstructure:"system_theme"` // 系统界面主题
 }
 
 // KeyBindingsConfig 快捷键设置配置
@@ -164,8 +177,9 @@ func NewDefaultAppConfig() *AppConfig {
 			AutoSaveDelay: 5000, // 5秒后自动保存
 		},
 		Appearance: AppearanceConfig{
-			Language: LangZhCN,
+			Language:    LangZhCN,
-			Theme:    ThemeDefaultDark, // 默认使用深色主题
+			Theme:       ThemeDefaultDark, // 默认使用深色主题
+			SystemTheme: SystemThemeDark,  // 默认使用深色系统主题
 		},
 		KeyBindings: KeyBindingsConfig{
 			// 预留给未来的快捷键配置

internal/services/config_service.go

@@ -127,6 +127,7 @@ func setDefaults(v *viper.Viper) {
 	// 外观设置默认值
 	v.SetDefault("appearance.language", defaultConfig.Appearance.Language)
 	v.SetDefault("appearance.theme", defaultConfig.Appearance.Theme)
+	v.SetDefault("appearance.system_theme", defaultConfig.Appearance.SystemTheme)
 
 	// 元数据默认值
 	v.SetDefault("metadata.version", defaultConfig.Metadata.Version)
@@ -262,6 +263,7 @@ func (cs *ConfigService) ResetConfig() {
 	// 外观设置 - 批量设置到viper中
 	cs.viper.Set("appearance.language", defaultConfig.Appearance.Language)
 	cs.viper.Set("appearance.theme", defaultConfig.Appearance.Theme)
+	cs.viper.Set("appearance.system_theme", defaultConfig.Appearance.SystemTheme)
 
 	// 元数据 - 批量设置到viper中
 	cs.viper.Set("metadata.version", defaultConfig.Metadata.Version)