improvement(ui): theme matches user system

app/w/components/sidebar/components/settings-modal/components/general/general.tsx

@@ -51,6 +51,7 @@ export function General() {
                 <SelectValue placeholder="Select theme" />
               </SelectTrigger>
               <SelectContent>
+                <SelectItem value="system">System</SelectItem>
                 <SelectItem value="light">Light</SelectItem>
                 <SelectItem value="dark">Dark</SelectItem>
               </SelectContent>

app/w/providers/theme-provider.tsx

@@ -9,7 +9,14 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
   useEffect(() => {
     const root = window.document.documentElement
     root.classList.remove('light', 'dark')
-    root.classList.add(theme)
+
+    // If theme is system, check system preference
+    if (theme === 'system') {
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+      root.classList.add(prefersDark ? 'dark' : 'light')
+    } else {
+      root.classList.add(theme)
+    }
   }, [theme])
 
   return children

stores/settings/general/store.ts

@@ -4,13 +4,13 @@ import { devtools, persist } from 'zustand/middleware'
 interface General {
   isAutoConnectEnabled: boolean
   isDebugModeEnabled: boolean
-  theme: 'light' | 'dark'
+  theme: 'system' | 'light' | 'dark'
 }
 
 interface GeneralActions {
   toggleAutoConnect: () => void
   toggleDebugMode: () => void
-  setTheme: (theme: 'light' | 'dark') => void
+  setTheme: (theme: 'system' | 'light' | 'dark') => void
 }
 
 type GeneralStore = General & GeneralActions
@@ -21,11 +21,11 @@ export const useGeneralStore = create<GeneralStore>()(
       (set) => ({
         isAutoConnectEnabled: true,
         isDebugModeEnabled: false,
-        theme: 'light',
+        theme: 'system',
         toggleAutoConnect: () =>
           set((state) => ({ isAutoConnectEnabled: !state.isAutoConnectEnabled })),
         toggleDebugMode: () => set((state) => ({ isDebugModeEnabled: !state.isDebugModeEnabled })),
-        setTheme: (theme: 'light' | 'dark') => set({ theme }),
+        setTheme: (theme: 'system' | 'light' | 'dark') => set({ theme }),
       }),
       {
         name: 'general-settings',