🤖 feat: add auto theme preference that follows system theme

index.html

@@ -106,7 +106,13 @@
     <script>
       (function () {
         const THEME_KEY = "uiTheme";
-        const VALID_THEMES = new Set(["light", "dark", "flexoki-light", "flexoki-dark"]);
+        const VALID_THEME_PREFERENCES = new Set([
+          "auto",
+          "light",
+          "dark",
+          "flexoki-light",
+          "flexoki-dark",
+        ]);
 
         const THEME_COLORS = {
           dark: "#1e1e1e",
@@ -115,6 +121,14 @@
           "flexoki-dark": "#100f0f",
         };
 
+        function resolveSystemTheme() {
+          if (!window.matchMedia) {
+            return "dark";
+          }
+
+          return window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
+        }
+
         function getColorScheme(theme) {
           return theme === "light" || theme.endsWith("-light") ? "light" : "dark";
         }
@@ -132,23 +146,18 @@
             }
           }
 
-          const prefersLight = window.matchMedia
-            ? window.matchMedia("(prefers-color-scheme: light)").matches
-            : false;
-
-          const fallbackTheme = prefersLight ? "light" : "dark";
-          let theme = fallbackTheme;
-
+          let themePreference = "auto";
           if (typeof parsed === "string") {
-            if (VALID_THEMES.has(parsed)) {
-              theme = parsed;
+            if (VALID_THEME_PREFERENCES.has(parsed)) {
+              themePreference = parsed;
             } else if (parsed.endsWith("-light")) {
-              theme = "light";
+              themePreference = "light";
             } else if (parsed.endsWith("-dark")) {
-              theme = "dark";
+              themePreference = "dark";
             }
           }
 
+          const theme = themePreference === "auto" ? resolveSystemTheme() : themePreference;
           const colorScheme = getColorScheme(theme);
 
           document.documentElement.dataset.theme = theme;

src/browser/App.tsx

@@ -29,7 +29,7 @@ import { useStableReference, compareMaps } from "./hooks/useStableReference";
 import { CommandRegistryProvider, useCommandRegistry } from "./contexts/CommandRegistryContext";
 import { useOpenTerminal } from "./hooks/useOpenTerminal";
 import type { CommandAction } from "./contexts/CommandRegistryContext";
-import { useTheme, type ThemeMode } from "./contexts/ThemeContext";
+import { useTheme, type ThemePreference } from "./contexts/ThemeContext";
 import { CommandPalette } from "./components/CommandPalette";
 import { buildCoreSources, type BuildSourcesParams } from "./utils/commands/sources";
 
@@ -101,10 +101,10 @@ function AppInner() {
     beginWorkspaceCreation,
   } = useWorkspaceContext();
   const { currentWorkspaceId, currentSettingsSection } = useRouter();
-  const { theme, setTheme, toggleTheme } = useTheme();
+  const { themePreference, setTheme, toggleTheme } = useTheme();
   const { open: openSettings, isOpen: isSettingsOpen } = useSettings();
   const setThemePreference = useCallback(
-    (nextTheme: ThemeMode) => {
+    (nextTheme: ThemePreference) => {
       setTheme(nextTheme);
     },
     [setTheme]
@@ -591,7 +591,7 @@ function AppInner() {
     projects,
     workspaceMetadata,
     selectedWorkspace,
-    theme,
+    themePreference,
     getThinkingLevel: getThinkingLevelForWorkspace,
     onSetThinkingLevel: setThinkingLevelFromPalette,
     onStartWorkspaceCreation: openNewWorkspaceFromPalette,

src/browser/components/Settings/sections/GeneralSection.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useCallback, useRef } from "react";
-import { useTheme, THEME_OPTIONS, type ThemeMode } from "@/browser/contexts/ThemeContext";
+import { useTheme, THEME_OPTIONS, type ThemePreference } from "@/browser/contexts/ThemeContext";
 import {
   Select,
   SelectContent,
@@ -127,7 +127,7 @@ const EDITOR_OPTIONS: Array<{ value: EditorType; label: string }> = [
 const isBrowserMode = typeof window !== "undefined" && !window.api;
 
 export function GeneralSection() {
-  const { theme, setTheme } = useTheme();
+  const { themePreference, setTheme } = useTheme();
   const { api } = useAPI();
   const [rawTerminalFontConfig, setTerminalFontConfig] = usePersistedState<TerminalFontConfig>(
     TERMINAL_FONT_CONFIG_KEY,
@@ -334,7 +334,10 @@ export function GeneralSection() {
               <div className="text-foreground text-sm">Theme</div>
               <div className="text-muted text-xs">Choose your preferred theme</div>
             </div>
-            <Select value={theme} onValueChange={(value) => setTheme(value as ThemeMode)}>
+            <Select
+              value={themePreference}
+              onValueChange={(value) => setTheme(value as ThemePreference)}
+            >
               <SelectTrigger className="border-border-medium bg-background-secondary hover:bg-hover h-9 w-auto cursor-pointer rounded-md border px-3 text-sm transition-colors">
                 <SelectValue />
               </SelectTrigger>

src/browser/components/ThemeSelector.tsx

@@ -1,4 +1,4 @@
-import { useTheme, THEME_OPTIONS, type ThemeMode } from "@/browser/contexts/ThemeContext";
+import { useTheme, THEME_OPTIONS, type ThemePreference } from "@/browser/contexts/ThemeContext";
 import { Tooltip, TooltipTrigger, TooltipContent } from "./ui/tooltip";
 import {
   Select,
@@ -9,13 +9,16 @@ import {
 } from "@/browser/components/ui/select";
 
 export function ThemeSelector() {
-  const { theme, setTheme } = useTheme();
-  const currentLabel = THEME_OPTIONS.find((t) => t.value === theme)?.label ?? theme;
+  const { themePreference, setTheme } = useTheme();
+  const currentLabel = THEME_OPTIONS.find((theme) => theme.value === themePreference)?.label;
 
   return (
     <Tooltip>
       <TooltipTrigger asChild>
-        <Select value={theme} onValueChange={(value) => setTheme(value as ThemeMode)}>
+        <Select
+          value={themePreference}
+          onValueChange={(value) => setTheme(value as ThemePreference)}
+        >
           <SelectTrigger
             className="border-border-light text-muted-foreground hover:border-border-medium/80 hover:bg-toggle-bg/70 h-5 w-auto cursor-pointer border bg-transparent px-1.5 text-[11px] transition-colors duration-150"
             aria-label="Select theme"
@@ -32,7 +35,7 @@ export function ThemeSelector() {
           </SelectContent>
         </Select>
       </TooltipTrigger>
-      <TooltipContent align="end">Theme: {currentLabel}</TooltipContent>
+      <TooltipContent align="end">Theme: {currentLabel ?? themePreference}</TooltipContent>
     </Tooltip>
   );
 }