feat(web-ui): follow system theme and persist selection

src/web-ui/index.html

@@ -6,6 +6,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="/fonts/fonts.css" />
     <title>BitFun - AI Code Assistant</title>
+    <script>
+      (function () {
+        var dark = '#121214';
+        var light = '#e8ecf2';
+        var m = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');
+        document.documentElement.style.backgroundColor = m && m.matches ? dark : light;
+      })();
+    </script>
     <style>
       * {
         margin: 0;
@@ -19,7 +27,7 @@
         overflow: hidden;
       }
 
-      /* Default background color (will be overridden by Tauri injected styles) */
+      /* Default background: inline script sets from prefers-color-scheme; theme overrides later */
       html {
         background-color: #121214;
       }

src/web-ui/src/features/onboarding/components/steps/ThemeStep.tsx

@@ -6,15 +6,21 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Palette } from 'lucide-react';
-import { themeService } from '@/infrastructure/theme';
+import { themeService, SYSTEM_THEME_ID } from '@/infrastructure/theme';
 import type { ThemeConfig } from '@/infrastructure/theme';
+import { getSystemPreferredDefaultThemeId } from '@/infrastructure/theme/presets';
 
 interface ThemeStepProps {
   selectedTheme: string;
   onThemeChange: (theme: string) => void;
 }
 
 const THEME_OPTIONS = [
+  {
+    id: SYSTEM_THEME_ID,
+    nameKey: 'theme.themes.system.name',
+    descKey: 'theme.themes.system.description',
+  },
   { 
     id: 'bitfun-light', 
     nameKey: 'theme.themes.bitfun-light.name',
@@ -258,7 +264,10 @@ export const ThemeStep: React.FC<ThemeStepProps> = ({
       {/* Theme grid */}
       <div className="bitfun-onboarding-theme__grid">
         {THEME_OPTIONS.map((themeOption) => {
-          const fullTheme = themeService.getTheme(themeOption.id as any);
+          const fullTheme =
+            themeOption.id === SYSTEM_THEME_ID
+              ? themeService.getTheme(getSystemPreferredDefaultThemeId())
+              : themeService.getTheme(themeOption.id as any);
 
           return (
             <div

src/web-ui/src/features/onboarding/services/OnboardingService.ts

@@ -5,7 +5,7 @@
 
 import { useOnboardingStore, isModelConfigComplete, type OnboardingModelConfig } from '../store/onboardingStore';
 import type { LocaleId } from '@/infrastructure/i18n/types';
-import type { ThemeId } from '@/infrastructure/theme/types';
+import type { ThemeSelectionId } from '@/infrastructure/theme/types';
 import { configAPI } from '@/infrastructure/api';
 import { configManager } from '@/infrastructure/config/services/ConfigManager';
 import { modelConfigManager } from '@/infrastructure/config/services/modelConfigs';
@@ -159,7 +159,7 @@ class OnboardingServiceClass {
    */
   async applyConfiguration(config: {
     language?: LocaleId;
-    theme?: ThemeId;
+    theme?: ThemeSelectionId;
     modelConfig?: OnboardingModelConfig | null;
   }): Promise<void> {
     try {

src/web-ui/src/features/onboarding/store/onboardingStore.ts

@@ -6,7 +6,7 @@
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 import type { LocaleId } from '@/infrastructure/i18n/types';
-import type { ThemeId } from '@/infrastructure/theme/types';
+import { SYSTEM_THEME_ID, type ThemeSelectionId } from '@/infrastructure/theme/types';
 
 /**
  * Onboarding step enum.
@@ -58,7 +58,7 @@ interface OnboardingState {
 
   // Configuration data
   selectedLanguage: LocaleId;
-  selectedTheme: ThemeId;
+  selectedTheme: ThemeSelectionId;
   modelConfig: OnboardingModelConfig | null;
 
   // Actions
@@ -72,7 +72,7 @@ interface OnboardingState {
 
   // Configuration updates
   setLanguage: (language: LocaleId) => void;
-  setTheme: (theme: ThemeId) => void;
+  setTheme: (theme: ThemeSelectionId) => void;
   setModelConfig: (config: OnboardingModelConfig | null) => void;
   markStepCompleted: (step: OnboardingStep) => void;
 
@@ -94,7 +94,7 @@ export const useOnboardingStore = create<OnboardingState>()(
       skipped: false,
 
       selectedLanguage: 'zh-CN',
-      selectedTheme: 'bitfun-light',
+      selectedTheme: SYSTEM_THEME_ID,
       modelConfig: null,
 
       // Start onboarding
@@ -170,7 +170,8 @@ export const useOnboardingStore = create<OnboardingState>()(
           currentStep: 'language',
           completedSteps: [],
           skipped: false,
-          modelConfig: null
+          modelConfig: null,
+          selectedTheme: SYSTEM_THEME_ID,
         });
       },
 
@@ -180,7 +181,7 @@ export const useOnboardingStore = create<OnboardingState>()(
       },
 
       // Set theme
-      setTheme: (theme: ThemeId) => {
+      setTheme: (theme: ThemeSelectionId) => {
         set({ selectedTheme: theme });
       },
 

src/web-ui/src/infrastructure/config/components/BasicsConfig.tsx

@@ -20,6 +20,7 @@ import {
   useThemeManagement,
   ThemeMetadata,
   ThemeConfig as ThemeConfigType,
+  SYSTEM_THEME_ID,
 } from '@/infrastructure/theme';
 import { themeService } from '@/infrastructure/theme/core/ThemeService';
 import { useLanguageSelector } from '@/infrastructure/i18n';
@@ -87,6 +88,22 @@ function BasicsAppearanceSection() {
       : theme.description || '';
   };
 
+  const themeSelectOptions = useMemo(
+    () => [
+      {
+        value: SYSTEM_THEME_ID,
+        label: t('appearance.systemTheme'),
+        description: t('appearance.systemThemeDescription'),
+      },
+      ...themes.map((theme) => ({
+        value: theme.id,
+        label: getThemeDisplayName(theme),
+        description: getThemeDisplayDescription(theme),
+      })),
+    ],
+    [themes, t]
+  );
+
   return (
     <div className="theme-config">
       <div className="theme-config__content">
@@ -150,14 +167,16 @@ function BasicsAppearanceSection() {
                   value={themeId ?? ''}
                   onChange={(value) => handleThemeChange(value as string)}
                   disabled={loading}
-                  options={themes.map((theme) => ({
-                    value: theme.id,
-                    label: getThemeDisplayName(theme),
-                    description: getThemeDisplayDescription(theme),
-                  }))}
+                  options={themeSelectOptions}
                   renderOption={(option) => {
-                    const theme = themes.find((item) => item.id === String(option.value));
-                    const fullTheme = theme ? themeService.getTheme(theme.id) : null;
+                    const v = String(option.value);
+                    const fullTheme =
+                      v === SYSTEM_THEME_ID
+                        ? themeService.getTheme(themeService.getResolvedThemeId())
+                        : (() => {
+                            const meta = themes.find((item) => item.id === v);
+                            return meta ? themeService.getTheme(meta.id) : null;
+                          })();
                     const optionContent = (
                       <div className="theme-config__theme-option">
                         <span className="theme-config__theme-option-name">{option.label}</span>