diff --git a/src/web-ui/index.html b/src/web-ui/index.html
index ad51c574..77a1dcc8 100644
--- a/src/web-ui/index.html
+++ b/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;
       }
diff --git a/src/web-ui/public/Logo-ICON.png b/src/web-ui/public/Logo-ICON.png
index 2d84e948..e250ea97 100644
Binary files a/src/web-ui/public/Logo-ICON.png and b/src/web-ui/public/Logo-ICON.png differ
diff --git a/src/web-ui/src/features/onboarding/components/steps/ThemeStep.tsx b/src/web-ui/src/features/onboarding/components/steps/ThemeStep.tsx
index cc94d780..9ad94bf2 100644
--- a/src/web-ui/src/features/onboarding/components/steps/ThemeStep.tsx
+++ b/src/web-ui/src/features/onboarding/components/steps/ThemeStep.tsx
@@ -6,8 +6,9 @@
 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;
@@ -15,6 +16,11 @@ interface ThemeStepProps {
 }
 
 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
diff --git a/src/web-ui/src/features/onboarding/services/OnboardingService.ts b/src/web-ui/src/features/onboarding/services/OnboardingService.ts
index 06680806..e5acc67a 100644
--- a/src/web-ui/src/features/onboarding/services/OnboardingService.ts
+++ b/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 {
diff --git a/src/web-ui/src/features/onboarding/store/onboardingStore.ts b/src/web-ui/src/features/onboarding/store/onboardingStore.ts
index 1d02ecda..cf6023c4 100644
--- a/src/web-ui/src/features/onboarding/store/onboardingStore.ts
+++ b/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 });
       },
       
diff --git a/src/web-ui/src/infrastructure/config/components/BasicsConfig.tsx b/src/web-ui/src/infrastructure/config/components/BasicsConfig.tsx
index 5cf5434e..cbc2970e 100644
--- a/src/web-ui/src/infrastructure/config/components/BasicsConfig.tsx
+++ b/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>
diff --git a/src/web-ui/src/infrastructure/theme/core/ThemeService.ts b/src/web-ui/src/infrastructure/theme/core/ThemeService.ts
index 23f04e84..18ebeeb1 100644
--- a/src/web-ui/src/infrastructure/theme/core/ThemeService.ts
+++ b/src/web-ui/src/infrastructure/theme/core/ThemeService.ts
@@ -11,8 +11,10 @@ import {
   ThemeEventListener,
   ThemeHooks,
   ThemeAdapter,
+  SYSTEM_THEME_ID,
+  ThemeSelectionId,
 } from '../types';
-import { builtinThemes, DEFAULT_THEME_ID } from '../presets';
+import { builtinThemes, getSystemPreferredDefaultThemeId } from '../presets';
 import { configAPI } from '@/infrastructure/api';
 import { monacoThemeSync } from '../integrations/MonacoThemeSync';
 import { createLogger } from '@/shared/utils/logger';
@@ -22,7 +24,11 @@ const log = createLogger('ThemeService');
  
 export class ThemeService {
   private themes: Map<ThemeId, ThemeConfig> = new Map();
-  private currentThemeId: ThemeId = DEFAULT_THEME_ID;
+  /** User choice from settings (including follow-system). */
+  private themeSelection: ThemeSelectionId = SYSTEM_THEME_ID;
+  /** Currently applied built-in or custom theme (never `system`). */
+  private resolvedThemeId: ThemeId = getSystemPreferredDefaultThemeId();
+  private systemThemeCleanup: (() => void) | null = null;
   private listeners: Map<ThemeEventType, Set<ThemeEventListener>> = new Map();
   private hooks: ThemeHooks = {};
   private adapters: ThemeAdapter[] = [];
@@ -47,34 +53,27 @@ export class ThemeService {
       
       const preInjectedThemeId = document.documentElement.getAttribute('data-theme');
       
-      let themeIdToApply: ThemeId | null = null;
-      
       if (preInjectedThemeId && this.themes.has(preInjectedThemeId as ThemeId)) {
-        
-        themeIdToApply = preInjectedThemeId as ThemeId;
+        await this.applyTheme(preInjectedThemeId as ThemeId);
       } else {
-        
-        const savedThemeId = await this.loadCurrentThemeId();
-        if (savedThemeId && this.themes.has(savedThemeId)) {
-          themeIdToApply = savedThemeId;
+        const saved = await this.loadThemeSelection();
+        if (saved === SYSTEM_THEME_ID) {
+          await this.applyTheme(SYSTEM_THEME_ID);
+        } else if (saved && this.themes.has(saved)) {
+          await this.applyTheme(saved);
+        } else {
+          await this.applyTheme(SYSTEM_THEME_ID);
         }
       }
       
       
-      if (themeIdToApply) {
-        await this.applyTheme(themeIdToApply);
-      } else {
-        await this.applyTheme(DEFAULT_THEME_ID);
-      }
-      
-      
       this.loadUserThemes().catch(() => {
         
       });
     } catch (error) {
       log.error('Theme system initialization failed', error);
       
-      await this.applyTheme(DEFAULT_THEME_ID);
+      await this.applyTheme(SYSTEM_THEME_ID);
     }
   }
   
@@ -100,14 +99,17 @@ export class ThemeService {
   }
   
    
-  private async loadCurrentThemeId(): Promise<ThemeId | null> {
+  private async loadThemeSelection(): Promise<ThemeSelectionId | null> {
     try {
       
-      const themeId = await configAPI.getConfig('themes.current', {
+      const raw = await configAPI.getConfig('themes.current', {
         skipRetryOnNotFound: true
-      }) as ThemeId | undefined;
+      }) as string | undefined;
       
-      return themeId || null;
+      if (raw === SYSTEM_THEME_ID) {
+        return SYSTEM_THEME_ID;
+      }
+      return raw || null;
     } catch (error) {
       return null;
     }
@@ -117,6 +119,10 @@ export class ThemeService {
   
    
   registerTheme(theme: ThemeConfig): void {
+    if (theme.id === SYSTEM_THEME_ID) {
+      log.error('Reserved theme id', { id: theme.id });
+      throw new Error(`Theme id "${SYSTEM_THEME_ID}" is reserved`);
+    }
     if (this.themes.has(theme.id)) {
       log.warn('Theme already exists, will override', { id: theme.id });
     }
@@ -142,8 +148,8 @@ export class ThemeService {
     }
     
     
-    if (this.currentThemeId === themeId) {
-      this.applyTheme(DEFAULT_THEME_ID);
+    if (this.themeSelection === themeId) {
+      void this.applyTheme(SYSTEM_THEME_ID);
     }
     
     this.themes.delete(themeId);
@@ -163,12 +169,18 @@ export class ThemeService {
   
    
   getCurrentTheme(): ThemeConfig {
-    return this.themes.get(this.currentThemeId) || builtinThemes[0];
+    return this.themes.get(this.resolvedThemeId) || builtinThemes[0];
   }
   
    
-  getCurrentThemeId(): ThemeId {
-    return this.currentThemeId;
+  /** User selection for UI (may be `system`). */
+  getCurrentThemeId(): ThemeSelectionId {
+    return this.themeSelection;
+  }
+
+  /** Actually applied theme id (never `system`). */
+  getResolvedThemeId(): ThemeId {
+    return this.resolvedThemeId;
   }
   
    
@@ -187,51 +199,92 @@ export class ThemeService {
   
   
    
-  async applyTheme(themeId: ThemeId): Promise<void> {
-    const theme = this.themes.get(themeId);
+  private detachSystemThemeListener(): void {
+    if (this.systemThemeCleanup) {
+      this.systemThemeCleanup();
+      this.systemThemeCleanup = null;
+    }
+  }
+
+  private attachSystemThemeListener(): void {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+      return;
+    }
+    if (this.systemThemeCleanup) {
+      return;
+    }
+    const mq = window.matchMedia('(prefers-color-scheme: dark)');
+    const handler = () => {
+      if (this.themeSelection !== SYSTEM_THEME_ID) {
+        return;
+      }
+      const next = getSystemPreferredDefaultThemeId();
+      if (next === this.resolvedThemeId) {
+        return;
+      }
+      void this.applyResolvedTheme(next);
+    };
+    mq.addEventListener('change', handler);
+    this.systemThemeCleanup = () => mq.removeEventListener('change', handler);
+  }
+
+  private async applyResolvedTheme(resolvedId: ThemeId): Promise<void> {
+    const theme = this.themes.get(resolvedId);
     if (!theme) {
-      log.error('Theme not found', { id: themeId });
-      throw new Error(`Theme ${themeId} not found`);
+      log.error('Theme not found', { id: resolvedId });
+      throw new Error(`Theme ${resolvedId} not found`);
     }
-    
+
     const oldTheme = this.getCurrentTheme();
-    
+
     try {
-      
       if (this.hooks.beforeChange) {
         await this.hooks.beforeChange(theme, oldTheme);
       }
-      this.emitEvent('theme:before-change', themeId, theme, oldTheme);
-      
-      
-      this.currentThemeId = themeId;
-      
-      
+      this.emitEvent('theme:before-change', resolvedId, theme, oldTheme);
+
+      this.resolvedThemeId = resolvedId;
+
       this.injectCSSVariables(theme);
-      
-      
+
       try {
         monacoThemeSync.syncTheme(theme);
       } catch (error) {
         log.warn('Monaco Editor theme sync failed', error);
       }
-      
-      
-      
-      await this.saveCurrentThemeId(themeId);
-      
-      
+
       if (this.hooks.afterChange) {
         await this.hooks.afterChange(theme, oldTheme);
       }
-      this.emitEvent('theme:after-change', themeId, theme, oldTheme);
-      
-      log.info('Theme applied', { id: themeId, name: theme.name });
+      this.emitEvent('theme:after-change', resolvedId, theme, oldTheme);
+
+      log.info('Theme applied', { id: resolvedId, name: theme.name, selection: this.themeSelection });
     } catch (error) {
       log.error('Failed to apply theme', error);
       throw error;
     }
   }
+
+  async applyTheme(themeId: ThemeId | typeof SYSTEM_THEME_ID): Promise<void> {
+    if (themeId !== SYSTEM_THEME_ID && !this.themes.has(themeId)) {
+      log.error('Theme not found', { id: themeId });
+      throw new Error(`Theme ${themeId} not found`);
+    }
+
+    this.detachSystemThemeListener();
+
+    if (themeId === SYSTEM_THEME_ID) {
+      this.themeSelection = SYSTEM_THEME_ID;
+      await this.saveThemeSelection(SYSTEM_THEME_ID);
+      this.attachSystemThemeListener();
+      const resolved = getSystemPreferredDefaultThemeId();
+      await this.applyResolvedTheme(resolved);
+    } else {
+      this.themeSelection = themeId;
+      await this.saveThemeSelection(themeId);
+      await this.applyResolvedTheme(themeId);
+    }
+  }
   
    
   private injectCSSVariables(theme: ThemeConfig): void {
@@ -634,9 +687,9 @@ export class ThemeService {
   }
   
    
-  private async saveCurrentThemeId(themeId: ThemeId): Promise<void> {
+  private async saveThemeSelection(selection: ThemeSelectionId): Promise<void> {
     try {
-      await configAPI.setConfig('themes.current', themeId);
+      await configAPI.setConfig('themes.current', selection);
     } catch (error) {
       log.warn('Failed to save current theme ID', error);
     }
diff --git a/src/web-ui/src/infrastructure/theme/hooks/useTheme.ts b/src/web-ui/src/infrastructure/theme/hooks/useTheme.ts
index 31c95db3..1ffa8a19 100644
--- a/src/web-ui/src/infrastructure/theme/hooks/useTheme.ts
+++ b/src/web-ui/src/infrastructure/theme/hooks/useTheme.ts
@@ -2,7 +2,8 @@
 
 import { useEffect, useMemo } from 'react';
 import { useThemeStore } from '../store/themeStore';
-import { ThemeType } from '../types';
+import { themeService } from '../core/ThemeService';
+import { ThemeType, SYSTEM_THEME_ID } from '../types';
 export function useTheme() {
   const {
     currentTheme,
@@ -95,6 +96,9 @@ export function useThemeManagement() {
  
 export function useThemeToggle() {
   const { themeId, themes, setTheme, isDark, isLight } = useTheme();
+
+  const anchorThemeId =
+    themeId === SYSTEM_THEME_ID ? themeService.getResolvedThemeId() : (themeId ?? '');
   
   
   const toggleTheme = () => {
@@ -108,7 +112,7 @@ export function useThemeToggle() {
   
   
   const nextTheme = () => {
-    const currentIndex = themes.findIndex(t => t.id === themeId);
+    const currentIndex = Math.max(0, themes.findIndex(t => t.id === anchorThemeId));
     const nextIndex = (currentIndex + 1) % themes.length;
     const nextTheme = themes[nextIndex];
     
@@ -119,7 +123,7 @@ export function useThemeToggle() {
   
   
   const prevTheme = () => {
-    const currentIndex = themes.findIndex(t => t.id === themeId);
+    const currentIndex = Math.max(0, themes.findIndex(t => t.id === anchorThemeId));
     const prevIndex = (currentIndex - 1 + themes.length) % themes.length;
     const prevTheme = themes[prevIndex];
     
diff --git a/src/web-ui/src/infrastructure/theme/presets/index.ts b/src/web-ui/src/infrastructure/theme/presets/index.ts
index 41c4108f..404b8d4b 100644
--- a/src/web-ui/src/infrastructure/theme/presets/index.ts
+++ b/src/web-ui/src/infrastructure/theme/presets/index.ts
@@ -15,7 +15,27 @@ import { bitfunChinaStyleTheme } from './china-style-theme';
 import { bitfunChinaNightTheme } from './china-night-theme';
 import { bitfunCyberTheme } from './cyber-theme';
 import { bitfunSlateTheme } from './slate-theme';
-import { ThemeConfig } from '../types';
+import { ThemeConfig, ThemeId } from '../types';
+
+/** Default light / dark builtin themes used when following system appearance. */
+export const DEFAULT_LIGHT_THEME_ID: ThemeId = 'bitfun-light';
+export const DEFAULT_DARK_THEME_ID: ThemeId = 'bitfun-dark';
+
+/**
+ * Picks bitfun-dark vs bitfun-light from `prefers-color-scheme`.
+ * Used when the user has no saved theme preference.
+ */
+export function getSystemPreferredDefaultThemeId(): ThemeId {
+  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+    return DEFAULT_LIGHT_THEME_ID;
+  }
+  return window.matchMedia('(prefers-color-scheme: dark)').matches
+    ? DEFAULT_DARK_THEME_ID
+    : DEFAULT_LIGHT_THEME_ID;
+}
+
+/** Static fallback when system preference is unavailable (e.g. SSR). */
+export const DEFAULT_THEME_ID: ThemeId = DEFAULT_LIGHT_THEME_ID;
 
  
 export const builtinThemes: ThemeConfig[] = [
@@ -29,7 +49,6 @@ export const builtinThemes: ThemeConfig[] = [
 ];
 
  
-export const DEFAULT_THEME_ID = 'bitfun-light';
 
 
 
diff --git a/src/web-ui/src/infrastructure/theme/store/themeStore.ts b/src/web-ui/src/infrastructure/theme/store/themeStore.ts
index 1bba49a9..cdd24e69 100644
--- a/src/web-ui/src/infrastructure/theme/store/themeStore.ts
+++ b/src/web-ui/src/infrastructure/theme/store/themeStore.ts
@@ -1,7 +1,7 @@
  
 
 import { create } from 'zustand';
-import { ThemeConfig, ThemeId, ThemeMetadata } from '../types';
+import { ThemeConfig, ThemeId, ThemeMetadata, ThemeSelectionId } from '../types';
 import { themeService } from '../core/ThemeService';
 import { createLogger } from '@/shared/utils/logger';
 
@@ -11,14 +11,14 @@ const log = createLogger('ThemeStore');
 interface ThemeState {
   
   currentTheme: ThemeConfig | null;
-  currentThemeId: ThemeId | null;
+  currentThemeId: ThemeSelectionId | null;
   themes: ThemeMetadata[];
   loading: boolean;
   error: string | null;
   
   
   initialize: () => Promise<void>;
-  setTheme: (themeId: ThemeId) => Promise<void>;
+  setTheme: (themeId: ThemeSelectionId) => Promise<void>;
   refreshThemes: () => void;
   addTheme: (theme: ThemeConfig) => Promise<void>;
   removeTheme: (themeId: ThemeId) => Promise<void>;
@@ -41,10 +41,10 @@ export const useThemeStore = create<ThemeState>((set) => ({
     
     try {
       
-      themeService.on('theme:after-change', (event) => {
+      themeService.on('theme:after-change', () => {
         set({
-          currentTheme: event.theme || null,
-          currentThemeId: event.themeId,
+          currentTheme: themeService.getCurrentTheme(),
+          currentThemeId: themeService.getCurrentThemeId(),
         });
       });
       
@@ -67,6 +67,8 @@ export const useThemeStore = create<ThemeState>((set) => ({
       set({
         themes,
         loading: false,
+        currentTheme: themeService.getCurrentTheme(),
+        currentThemeId: themeService.getCurrentThemeId(),
       });
     } catch (error) {
       log.error('Failed to initialize', error);
@@ -78,7 +80,7 @@ export const useThemeStore = create<ThemeState>((set) => ({
   },
   
   
-  setTheme: async (themeId: ThemeId) => {
+  setTheme: async (themeId: ThemeSelectionId) => {
     set({ loading: true, error: null });
     
     try {
diff --git a/src/web-ui/src/infrastructure/theme/types/index.ts b/src/web-ui/src/infrastructure/theme/types/index.ts
index 4aabb082..503a6b14 100644
--- a/src/web-ui/src/infrastructure/theme/types/index.ts
+++ b/src/web-ui/src/infrastructure/theme/types/index.ts
@@ -11,6 +11,10 @@ export type ColorValue = string; // hex, rgb, rgba, hsl, hsla
  
 export type ThemeId = string;
 
+/** Reserved config value: follow OS light/dark (maps to bitfun-light / bitfun-dark). */
+export const SYSTEM_THEME_ID = 'system' as const;
+export type ThemeSelectionId = ThemeId | typeof SYSTEM_THEME_ID;
+
 
 
  
diff --git a/src/web-ui/src/locales/en-US/onboarding.json b/src/web-ui/src/locales/en-US/onboarding.json
index 0d9a35cb..e7636f84 100644
--- a/src/web-ui/src/locales/en-US/onboarding.json
+++ b/src/web-ui/src/locales/en-US/onboarding.json
@@ -36,6 +36,10 @@
     "title": "Choose Your Theme",
     "description": "Select a theme that suits your preference for a comfortable coding experience",
     "themes": {
+      "system": {
+        "name": "Match system",
+        "description": "Follow OS light/dark mode; BitFun updates automatically when your system changes"
+      },
       "bitfun-dark": {
         "name": "Dark",
         "description": "Default dark theme"
diff --git a/src/web-ui/src/locales/en-US/settings/basics.json b/src/web-ui/src/locales/en-US/settings/basics.json
index 0705fdca..6ff652ca 100644
--- a/src/web-ui/src/locales/en-US/settings/basics.json
+++ b/src/web-ui/src/locales/en-US/settings/basics.json
@@ -17,6 +17,8 @@
     "importFailed": "Failed to import theme. Please check the file format.",
     "languageRowHint": "Choose one language pack as the active UI language.",
     "themeRowHint": "Pick an installed theme or manage custom themes.",
+    "systemTheme": "Match system",
+    "systemThemeDescription": "Use light or dark theme based on your OS appearance. Updates when the system switches.",
     "presets": {
       "bitfun-dark": {
         "name": "Dark",
diff --git a/src/web-ui/src/locales/zh-CN/onboarding.json b/src/web-ui/src/locales/zh-CN/onboarding.json
index d9e9c000..f06735f4 100644
--- a/src/web-ui/src/locales/zh-CN/onboarding.json
+++ b/src/web-ui/src/locales/zh-CN/onboarding.json
@@ -36,6 +36,10 @@
     "title": "选择主题风格",
     "description": "选择您喜欢的界面主题，打造舒适的编程环境",
     "themes": {
+      "system": {
+        "name": "跟随系统",
+        "description": "随系统浅色/深色模式自动切换，系统切换时 BitFun 同步更新"
+      },
       "bitfun-dark": {
         "name": "暗色",
         "description": "默认暗色主题"
diff --git a/src/web-ui/src/locales/zh-CN/settings/basics.json b/src/web-ui/src/locales/zh-CN/settings/basics.json
index 43556c1f..f8b52688 100644
--- a/src/web-ui/src/locales/zh-CN/settings/basics.json
+++ b/src/web-ui/src/locales/zh-CN/settings/basics.json
@@ -17,6 +17,8 @@
     "importFailed": "主题导入失败，请检查文件格式。",
     "languageRowHint": "选择一个语言包作为当前界面语言。",
     "themeRowHint": "选择已安装的主题或管理自定义主题。",
+    "systemTheme": "跟随系统",
+    "systemThemeDescription": "根据系统浅色/深色外观自动在亮暗主题间切换，并随系统切换而更新。",
     "presets": {
       "bitfun-dark": {
         "name": "暗色",