feat: visual comfort improvements

- Soft color palette with warm earth tones (green-primary, warm neutrals)
- Dark mode support with theme toggle in header (persisted in localStorage)
- Reduced contrast: softer borders, subtle shadows, muted colors
- Custom scrollbar, focus rings, button/input/dialog styling
- Better typography: line-height 1.6, optimized font stack
- ELement Plus theme overrides for consistent comfort styling
- All styles in src/styles/comfort.css with CSS custom properties

src/components/AppLayout.vue

@@ -8,9 +8,26 @@ import DashboardView from './dashboard/DashboardView.vue'
 const { init } = useMqttBridge()
 
 const activeTab = ref<'connections' | 'presets' | 'dashboard'>('dashboard')
+const isDark = ref(false)
+
+function toggleTheme() {
+  isDark.value = !isDark.value
+  document.documentElement.classList.toggle('dark', isDark.value)
+  try {
+    localStorage.setItem('mqttx_theme', isDark.value ? 'dark' : 'light')
+  } catch { /* ignore */ }
+}
 
 onMounted(() => {
   init()
+  // Restore theme preference
+  try {
+    const saved = localStorage.getItem('mqttx_theme')
+    if (saved === 'dark') {
+      isDark.value = true
+      document.documentElement.classList.add('dark')
+    }
+  } catch { /* ignore */ }
 })
 </script>
 
@@ -50,7 +67,12 @@ onMounted(() => {
           预设
         </button>
       </div>
-      <div class="header-right" />
+      <div class="header-right">
+        <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>
+      </div>
     </header>
     <main class="app-main">
       <ConnectionList v-if="activeTab === 'connections'" />
@@ -65,7 +87,7 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   height: 100vh;
-  background: var(--el-bg-color-page);
+  background: var(--comfort-bg);
 }
 
 /* ─── Header ─────────────────────────────────────────────────── */
@@ -74,8 +96,8 @@ onMounted(() => {
   align-items: center;
   padding: 0 16px;
   height: 48px;
-  background: var(--el-bg-color);
-  border-bottom: 1px solid var(--el-border-color-light);
+  background: var(--comfort-bg-card);
+  border-bottom: 1px solid var(--comfort-border);
   flex-shrink: 0;
   gap: 24px;
 }
@@ -94,13 +116,13 @@ onMounted(() => {
 .brand-name {
   font-size: 18px;
   font-weight: 700;
-  color: var(--el-color-primary);
+  color: var(--comfort-primary);
   letter-spacing: 0.5px;
 }
 .brand-version {
   font-size: 11px;
-  color: var(--el-text-color-placeholder);
-  background: var(--el-fill-color);
+  color: var(--comfort-text-muted);
+  background: var(--comfort-fill-color, var(--el-fill-color));
   padding: 0 5px;
   border-radius: 4px;
   line-height: 18px;
@@ -110,7 +132,7 @@ onMounted(() => {
 .header-tabs {
   display: flex;
   gap: 2px;
-  background: var(--el-fill-color);
+  background: var(--comfort-fill-color, var(--el-fill-color));
   padding: 2px;
   border-radius: 8px;
 }
@@ -124,26 +146,49 @@ onMounted(() => {
   background: transparent;
   border-radius: 6px;
   font-size: 13px;
-  color: var(--el-text-color-secondary);
+  color: var(--comfort-text-secondary);
   cursor: pointer;
   transition: all 0.15s;
   font-family: inherit;
   white-space: nowrap;
 }
 .tab-btn:hover {
-  color: var(--el-text-color-primary);
+  color: var(--comfort-text);
 }
 .tab-btn.active {
-  background: var(--el-bg-color);
-  color: var(--el-color-primary);
+  background: var(--comfort-bg-card);
+  color: var(--comfort-primary);
   font-weight: 500;
-  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
+  box-shadow: var(--comfort-shadow);
 }
 .tab-btn svg {
   flex-shrink: 0;
 }
 .header-right {
   flex: 1;
+  display: flex;
+  justify-content: flex-end;
+}
+.theme-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border: 1px solid var(--comfort-border);
+  border-radius: 6px;
+  background: var(--comfort-bg-card);
+  color: var(--comfort-text-secondary);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.theme-btn:hover {
+  color: var(--comfort-primary);
+  border-color: var(--comfort-primary-light);
+  background: var(--comfort-primary-bg);
+}
+.theme-btn svg {
+  flex-shrink: 0;
 }
 
 /* ─── Main ───────────────────────────────────────────────────── */