feat: theme follows system preference by default

- No saved preference → use prefers-color-scheme media query
- User clicks toggle → save explicit preference to localStorage
- Listen for system theme changes (OS-level toggle) when no explicit preference
- applyTheme() helper to keep isDark ref and DOM in sync

src/components/AppLayout.vue

@@ -10,22 +10,44 @@ const { init } = useMqttBridge()
 const activeTab = ref<'connections' | 'presets' | 'dashboard'>('dashboard')
 const isDark = ref(false)
 
+function applyTheme(dark: boolean) {
+  isDark.value = dark
+  document.documentElement.classList.toggle('dark', dark)
+}
+
 function toggleTheme() {
-  isDark.value = !isDark.value
+  applyTheme(!isDark.value)
-  document.documentElement.classList.toggle('dark', isDark.value)
   try {
     localStorage.setItem('mqttx_theme', isDark.value ? 'dark' : 'light')
   } catch { /* ignore */ }
 }
 
+function getSystemTheme(): boolean {
+  return window.matchMedia('(prefers-color-scheme: dark)').matches
+}
+
 onMounted(() => {
   init()
-  // Restore theme preference
+
+  // Listen for system theme changes
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+    const saved = localStorage.getItem('mqttx_theme')
+    // Only follow system if user hasn't explicitly set a preference
+    if (!saved) {
+      applyTheme(e.matches)
+    }
+  })
+
+  // Restore theme preference, fallback to system
   try {
     const saved = localStorage.getItem('mqttx_theme')
     if (saved === 'dark') {
-      isDark.value = true
+      applyTheme(true)
-      document.documentElement.classList.add('dark')
+    } else if (saved === 'light') {
+      applyTheme(false)
+    } else {
+      // No saved preference → follow system
+      applyTheme(getSystemTheme())
     }
   } catch { /* ignore */ }
 })
@@ -68,7 +90,7 @@ onMounted(() => {
         </button>
       </div>
       <div class="header-right">
-        <button class="theme-btn" @click="toggleTheme" :title="isDark ? '切换亮色模式' : '切换暗色模式'">
+        <button class="theme-btn" @click="toggleTheme" :title="isDark ? '切换到亮色模式' : '切换到暗色模式'">
           <svg v-if="isDark" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
           <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
         </button>