feat: add theme customization with accent colors and light mode

src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, watch } from 'vue'
 import TitleBar from './components/TitleBar.vue'
 import NavRail from './components/NavRail.vue'
 import ToastNotification from './components/ToastNotification.vue'
@@ -7,6 +7,20 @@ import { useSettingsStore } from './stores/settings'
 
 const settingsStore = useSettingsStore()
 
+function applyTheme() {
+  const el = document.documentElement
+  const mode = settingsStore.settings.theme_mode || 'dark'
+  const accent = settingsStore.settings.accent_color || 'amber'
+
+  if (mode === 'system') {
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+    el.setAttribute('data-theme', prefersDark ? 'dark' : 'light')
+  } else {
+    el.setAttribute('data-theme', mode)
+  }
+  el.setAttribute('data-accent', accent)
+}
+
 onMounted(async () => {
   await settingsStore.fetchSettings()
   const zoom = parseInt(settingsStore.settings.ui_zoom) || 100
@@ -14,6 +28,15 @@ onMounted(async () => {
   if (app) {
     (app.style as any).zoom = `${zoom}%`
   }
+  applyTheme()
+
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    if (settingsStore.settings.theme_mode === 'system') applyTheme()
+  })
+})
+
+watch(() => [settingsStore.settings.theme_mode, settingsStore.settings.accent_color], () => {
+  applyTheme()
 })
 </script>