feat(dashboard): add auto switch theme button to setting page. (#7170)

* feat(dashboard): add auto switch theme button to setting page.

* fix on missing key in en-US translate

dashboard/src/i18n/locales/en-US/features/settings.json

@@ -39,25 +39,16 @@
     "subtitle": "Customize theme primary and secondary colors. Changes apply immediately and are stored locally in your browser.",
     "customize": {
       "title": "Theme Colors",
+      "colors": "Custom Colors",
       "preset": "Color Scheme",
       "primary": "Primary Color",
       "secondary": "Secondary Color",
       "reset": "Reset to Default",
-      "presetApplied": "Theme applied"
-    }
-  },
-  "style": {
-    "title": "Theme",
-    "color": {
-      "title": "Theme Colors",
-      "subtitle": "Customize theme primary and secondary colors. Changes apply immediately and are stored locally in your browser.",
-      "primary": "Primary Color",
-      "secondary": "Secondary Color"
-    },
-    "autoSync": {
-      "title": "Auto-Switch Light/Dark Theme",
-      "subtitle": "Automatically switch between light and dark themes based on your system's appearance setting.",
-      "label": "Enable Auto-Switch"
+      "presetApplied": "Theme applied",
+      "light": "Light Mode",
+      "dark": "Dark Mode",
+      "auto": "System Mode",
+      "autoSwitchDesc": "Theme will automatically switch based on your browser's appearance setting when enable system mode"
     }
   },
   "reset": {

dashboard/src/i18n/locales/zh-CN/features/settings.json

@@ -44,21 +44,11 @@
       "primary": "主色",
       "secondary": "辅助色",
       "reset": "恢复默认",
-      "presetApplied": "主题已应用"
-    }
-  },
-  "style": {
-    "title": "主题",
-    "color": {
-      "title": "主题颜色",
-      "subtitle": "自定义主题主色与辅助色。修改后立即生效，并保存在浏览器本地。",
-      "primary": "主色",
-      "secondary": "辅助色"
-    },
-    "autoSync": {
-      "title": "自动切换深色主题",
-      "subtitle": "根据您的浏览器外观设置自动切换主题",
-      "label": "启用自动切换"
+      "presetApplied": "主题已应用",
+      "light": "浅色",
+      "dark": "深色",
+      "auto": "系统",
+      "autoSwitchDesc": "应用系统主题后，主题将根据您的浏览器外观设置自动切换"
     }
   },
   "reset": {

dashboard/src/views/Settings.vue

@@ -32,7 +32,7 @@
       <v-card-subtitle>{{ tm("theme.subtitle") }}</v-card-subtitle>
       <v-card-text>
         <!-- Row 1: Preset selector + theme mode -->
-        <div class="d-flex flex-wrap align-center ga-4 mb-4">
+        <div class="d-flex flex-wrap align-center ga-4 mb-4 ml-3">
           <v-select
             v-model="selectedThemePreset"
             :items="presetOptions"
@@ -44,25 +44,39 @@
             @update:model-value="applyThemePreset"
           />
           <v-btn-toggle
-            v-model="isDarkMode"
+            v-model="themeMode"
             mandatory
             density="compact"
             color="primary"
-            @update:model-value="toggleThemeMode"
           >
             <v-btn value="light" size="small">
               <v-icon class="mr-1" size="18">mdi-white-balance-sunny</v-icon>
-              亮色
+              {{ tm("theme.customize.light")}}
             </v-btn>
             <v-btn value="dark" size="small">
               <v-icon class="mr-1" size="18">mdi-moon-waning-crescent</v-icon>
-              暗色
+              {{ tm("theme.customize.dark")}}
+            </v-btn>
+            <v-btn value="auto" size="small">
+              <v-icon class="mr-1" size="18">mdi-sync</v-icon>
+              {{ tm("theme.customize.auto")}}
             </v-btn>
           </v-btn-toggle>
+          <v-tooltip location="top">
+            <template #activator="{ props }">
+              <v-icon
+                v-bind="props"
+                size="16"
+                color="primary"
+                class="ml-1"
+              >mdi-help-circle-outline</v-icon>
+            </template>
+            <span>{{ tm("theme.customize.autoSwitchDesc") }}</span>
+          </v-tooltip>
         </div>
 
         <!-- Row 2: Color pickers + reset -->
-        <v-card variant="outlined" class="pa-4">
+        <v-card variant="outlined" class="pa-3">
           <div class="text-body-2 text-medium-emphasis mb-3">
             {{ tm("theme.customize.colors") }}
           </div>
@@ -344,14 +358,24 @@ const toastStore = useToastStore();
 const theme = useTheme();
 const customizer = useCustomizerStore();
 
-// Theme mode toggle (light/dark)
-const isDarkMode = ref(customizer.isDarkTheme ? "dark" : "light");
+// Theme mode toggle (light/dark/auto)
+const themeMode = computed({
+  get() {
+    if (customizer.autoSwitchTheme) return "auto";
+    return customizer.isDarkTheme ? "dark" : "light";
+  },
+  set(mode: string) {
+    if (mode === "auto") {
+      customizer.SET_AUTO_SYNC(true);
+      customizer.APPLY_SYSTEM_THEME();
+      return;
+    }
 
-const toggleThemeMode = (mode: string) => {
-  const newTheme = mode === "dark" ? DARK_THEME_NAME : LIGHT_THEME_NAME;
-  customizer.SET_UI_THEME(newTheme);
-  vuetify.theme.change(newTheme);
-};
+    customizer.SET_AUTO_SYNC(false);
+    const newTheme = mode === "dark" ? DARK_THEME_NAME : LIGHT_THEME_NAME;
+    customizer.SET_UI_THEME(newTheme);
+  },
+});
 
 const getStoredColor = (key, fallback) => {
   const stored =