diff --git a/src/App.vue b/src/App.vue
index 92b4a47..8f75878 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -62,7 +62,7 @@ const { locale, t } = useI18n()
 
 const settings = ref({
   language: 'zh-CN',
-  theme: 'Xcode',
+  uiTheme: 'Light',
   bootAnimationShown: true,
   checkpointing: { enabled: true },
   mcpServers: {},
@@ -263,7 +263,7 @@ const loadSettings = async () => {
     if (!data.checkpointing) data.checkpointing = { enabled: true }
     if (!data.mcpServers) data.mcpServers = {}
     if (data.language === undefined) data.language = 'zh-CN'
-    if (data.theme === undefined) data.theme = 'Xcode'
+    if (data.uiTheme === undefined) data.uiTheme = 'Light'
     if (data.bootAnimationShown === undefined) data.bootAnimationShown = true
     if (!data.selectedAuthType) data.selectedAuthType = 'openai-compatible'
     if (data.apiKey === undefined) data.apiKey = ''
@@ -308,7 +308,7 @@ const showSection = section => {
 const serverCount = computed(() => (settings.value.mcpServers ? Object.keys(settings.value.mcpServers).length : 0))
 
 const themeClass = computed(() => {
-  const theme = settings.value.theme
+  const theme = settings.value.uiTheme
   if (theme === 'Dark') return 'dark'
   if (theme === 'Solarized Dark') return 'solarized-dark'
   return ''
@@ -318,7 +318,7 @@ const acrylicStyle = computed(() => {
   const intensity = settings.value.acrylicIntensity
   if (intensity === undefined || intensity === null) return {}
   const opacity = 1 - intensity / 100
-  const isDark = settings.value.theme === 'Dark'
+  const isDark = settings.value.uiTheme === 'Dark'
 
   if (isDark) {
     return {
@@ -471,7 +471,7 @@ const closeMessageDialog = () => {
 }
 
 watch(
-  () => settings.value.theme,
+  () => settings.value.uiTheme,
   theme => {
     const cls = themeClass.value
     if (cls) {
@@ -496,7 +496,7 @@ const applyAcrylicStyle = () => {
   const intensity = settings.value.acrylicIntensity
   if (intensity === undefined || intensity === null) return
   const opacity = 1 - intensity / 100
-  const isDark = settings.value.theme === 'Dark'
+  const isDark = settings.value.uiTheme === 'Dark'
   const root = document.documentElement
 
   if (isDark) {
diff --git a/src/views/GeneralSettings.test.js b/src/views/GeneralSettings.test.js
index 4d05aea..36b7dda 100644
--- a/src/views/GeneralSettings.test.js
+++ b/src/views/GeneralSettings.test.js
@@ -6,9 +6,10 @@ import GeneralSettings from './GeneralSettings.vue';
 describe('GeneralSettings.vue', () => {
   const mockSettings = {
     language: 'zh-CN',
-    theme: 'Xcode',
+    uiTheme: 'Light',
     bootAnimationShown: true,
     checkpointing: { enabled: true },
+    acrylicIntensity: 50,
   };
 
   it('renders correctly with props', () => {
@@ -60,11 +61,9 @@ describe('GeneralSettings.vue', () => {
     });
 
     const themeOptions = wrapper.findAll('.form-select')[1].findAll('option');
-    expect(themeOptions.length).toBe(4);
-    expect(themeOptions[0].attributes('value')).toBe('Xcode');
+    expect(themeOptions.length).toBe(2);
+    expect(themeOptions[0].attributes('value')).toBe('Light');
     expect(themeOptions[1].attributes('value')).toBe('Dark');
-    expect(themeOptions[2].attributes('value')).toBe('Light');
-    expect(themeOptions[3].attributes('value')).toBe('Solarized Dark');
   });
 
   it('reflects current settings in form controls', async () => {
@@ -82,7 +81,7 @@ describe('GeneralSettings.vue', () => {
     await nextTick();
     const selectElements = wrapper.findAll('.form-select');
     expect(selectElements[0].element.value).toBe('zh-CN');
-    expect(selectElements[1].element.value).toBe('Xcode');
+    expect(selectElements[1].element.value).toBe('Light');
     expect(selectElements[2].element.value).toBe('true');
     expect(selectElements[3].element.value).toBe('true');
   });
@@ -149,9 +148,9 @@ describe('GeneralSettings.vue', () => {
       },
     });
 
-    expect(wrapper.findAll('.form-row').length).toBe(2);
-    expect(wrapper.findAll('.form-group').length).toBe(4);
-    expect(wrapper.findAll('.form-label').length).toBe(4);
+    expect(wrapper.findAll('.form-row').length).toBe(3);
+    expect(wrapper.findAll('.form-group').length).toBe(5);
+    expect(wrapper.findAll('.form-label').length).toBe(5);
     expect(wrapper.findAll('.form-select').length).toBe(4);
   });
 });
diff --git a/src/views/GeneralSettings.vue b/src/views/GeneralSettings.vue
index 2da314c..8165412 100644
--- a/src/views/GeneralSettings.vue
+++ b/src/views/GeneralSettings.vue
@@ -20,7 +20,7 @@
         </div>
         <div class="form-group">
           <label class="form-label">{{ $t('general.theme') }}</label>
-          <select class="form-select" v-model="localSettings.theme">
+          <select class="form-select" v-model="localSettings.uiTheme">
             <option value="Light">{{ $t('theme.light') }}</option>
             <option value="Dark">{{ $t('theme.dark') }}</option>
           </select>
@@ -89,7 +89,7 @@ const localSettings = computed({
 })
 
 const supportsAcrylic = computed(() => {
-  return typeof document !== 'undefined' && 'backdropFilter' in document.documentElement.style && props.settings.theme !== 'Dark'
+  return typeof document !== 'undefined' && 'backdropFilter' in document.documentElement.style && props.settings.uiTheme !== 'Dark'
 })
 
 const sliderRef = ref(null)
@@ -109,7 +109,7 @@ onMounted(() => {
 })
 
 watch(
-  () => props.settings.theme,
+  () => props.settings.uiTheme,
   () => {
     nextTick(() => {
       if (sliderRef.value && supportsAcrylic.value) {