refactor: change dark theme color

frontend/src/App.vue

@@ -11,7 +11,7 @@
  * emits a `capture:overlay` event with the screenshot payload so the
  * frontend knows when (and what) to render.
  */
-import { onMounted, onUnmounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import SettingsView from './views/SettingsView.vue'
 import Toast from './components/Toast.vue'
 import CaptureOverlay from './views/CaptureOverlay.vue'
@@ -24,6 +24,7 @@ import {
   SaveRegionToRemote,
   SummarizeRegion,
   CancelRegion,
+  GetConfig,
 } from '../wailsjs/go/main/App'
 
 type HotkeyStatus =
@@ -35,6 +36,25 @@ const hotkeyStatus = ref<HotkeyStatus>({ state: 'unknown' })
 type Mode = 'settings' | 'overlay'
 const mode = ref<Mode>('settings')
 
+type ThemeMode = 'auto' | 'light' | 'dark'
+const themeMode = ref<ThemeMode>('auto')
+const appThemeClass = computed(() => `theme-${themeMode.value}`)
+
+function normalizeTheme(theme: unknown): ThemeMode {
+  return theme === 'light' || theme === 'dark' || theme === 'auto'
+    ? theme
+    : 'auto'
+}
+
+async function loadThemePreference() {
+  try {
+    const cfg = await GetConfig()
+    themeMode.value = normalizeTheme((cfg as any)?.theme)
+  } catch {
+    themeMode.value = 'auto'
+  }
+}
+
 // `SettingsTab` is hoisted to the App shell so the sidebar (which lives
 // here) and the inner SettingsView (which renders the matching card) can
 // share a single source of truth without an event bus.
@@ -224,6 +244,7 @@ async function onOverlayCancel() {
 }
 
 onMounted(() => {
+  void loadThemePreference()
   EventsOn('capture:start', () => {
     capturing.value = true
   })
@@ -286,7 +307,7 @@ onUnmounted(() => {
   />
 
   <!-- Settings mode: standard desktop window; macOS title bar is native. -->
-  <div v-else class="app-root">
+  <div v-else class="app-root" :class="appThemeClass">
     <div v-if="hotkeyStatus.state === 'error'" class="permission-banner">
       <div>
         <strong>Global hotkey is not active.</strong>
@@ -312,7 +333,11 @@ onUnmounted(() => {
         </div>
       </aside>
       <section class="content">
-        <SettingsView :tab="activeTab" />
+        <SettingsView
+          :tab="activeTab"
+          :theme="themeMode"
+          @theme-change="themeMode = normalizeTheme($event)"
+        />
       </section>
     </main>
 
@@ -344,6 +369,15 @@ onUnmounted(() => {
   color: #111827;
   font-size: 13px;
 }
+.app-root.theme-light {
+  color-scheme: light;
+}
+.app-root.theme-dark {
+  color-scheme: dark;
+}
+.app-root.theme-auto {
+  color-scheme: light dark;
+}
 
 .status-pill {
   font-size: 11px;
@@ -498,33 +532,64 @@ onUnmounted(() => {
   }
 }
 
+.app-root.theme-dark {
+  background: #1c1d22;
+  color: #e5e7eb;
+}
+.app-root.theme-dark .titlebar {
+  background: rgba(28, 29, 34, 0.7);
+  border-bottom-color: #2c2f36;
+}
+.app-root.theme-dark .titlebar-title {
+  color: #f3f4f6;
+}
+.app-root.theme-dark .sidebar {
+  background: rgba(0, 0, 0, 0.15);
+  border-right-color: #2c2f36;
+}
+.app-root.theme-dark .sidebar-item {
+  color: #d1d5db;
+}
+.app-root.theme-dark .sidebar-item:hover:not(.active) {
+  background: rgba(255, 255, 255, 0.05);
+}
+.app-root.theme-dark .sidebar-item.active {
+  background: rgba(59, 130, 246, 0.18);
+  color: #93c5fd;
+}
+.app-root.theme-dark .permission-banner {
+  background: rgba(120, 53, 15, 0.3);
+  border-color: rgba(253, 186, 116, 0.4);
+  color: #fed7aa;
+}
+
 @media (prefers-color-scheme: dark) {
-  .app-root {
+  .app-root.theme-auto {
     background: #1c1d22;
     color: #e5e7eb;
   }
-  .titlebar {
+  .app-root.theme-auto .titlebar {
     background: rgba(28, 29, 34, 0.7);
     border-bottom-color: #2c2f36;
   }
-  .titlebar-title {
+  .app-root.theme-auto .titlebar-title {
     color: #f3f4f6;
   }
-  .sidebar {
+  .app-root.theme-auto .sidebar {
     background: rgba(0, 0, 0, 0.15);
     border-right-color: #2c2f36;
   }
-  .sidebar-item {
+  .app-root.theme-auto .sidebar-item {
     color: #d1d5db;
   }
-  .sidebar-item:hover:not(.active) {
+  .app-root.theme-auto .sidebar-item:hover:not(.active) {
     background: rgba(255, 255, 255, 0.05);
   }
-  .sidebar-item.active {
+  .app-root.theme-auto .sidebar-item.active {
     background: rgba(59, 130, 246, 0.18);
     color: #93c5fd;
   }
-  .permission-banner {
+  .app-root.theme-auto .permission-banner {
     background: rgba(120, 53, 15, 0.3);
     border-color: rgba(253, 186, 116, 0.4);
     color: #fed7aa;