diff --git a/package-lock.json b/package-lock.json
index 182e8edb..076040a4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -49,11 +49,11 @@
         "@volar/vue-language-plugin-pug": "^1.6.5",
         "@vue/language-plugin-pug": "^1.8.27",
         "babel-loader": "^9.1.3",
-        "browserslist": "^4.22.3",
+        "browserslist": "^4.23.0",
         "chalk": "^4.1.2",
         "changelog-parser": "^3.0.1",
         "copy-webpack-plugin": "^12.0.2",
-        "core-js": "^3.35.1",
+        "core-js": "^3.36.0",
         "cross-env": "^7.0.3",
         "css-loader": "^6.10.0",
         "css-minimizer-webpack-plugin": "^6.0.0",
@@ -62,7 +62,7 @@
         "electron-builder": "^24.10.0",
         "electron-debug": "^3.2.0",
         "electron-devtools-installer": "^3.2.0",
-        "electron-to-chromium": "^1.4.668",
+        "electron-to-chromium": "^1.4.673",
         "electron-updater": "^6.1.7",
         "eslint": "^8.56.0",
         "eslint-config-standard": "^17.1.0",
@@ -87,21 +87,21 @@
         "svg-sprite-loader": "^6.0.11",
         "svg-transform-loader": "^2.0.13",
         "svgo-loader": "^4.0.0",
-        "terser": "^5.27.0",
+        "terser": "^5.27.1",
         "terser-webpack-plugin": "^5.3.10",
         "ts-loader": "^9.5.1",
         "typescript": "^5.3.3",
         "vue-eslint-parser": "^9.4.2",
         "vue-loader": "^17.4.2",
         "vue-template-compiler": "^2.7.16",
-        "webpack": "^5.90.1",
+        "webpack": "^5.90.2",
         "webpack-cli": "^5.1.4",
-        "webpack-dev-server": "^5.0.1",
+        "webpack-dev-server": "^5.0.2",
         "webpack-hot-middleware": "github:lyswhut/webpack-hot-middleware#329c4375134b89d39da23a56a94db651247c74a1",
         "webpack-merge": "^5.10.0"
       },
       "engines": {
-        "node": ">= 16",
+        "node": ">= 18",
         "npm": ">=8.5.2"
       }
     },
@@ -4995,9 +4995,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.22.3",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.3.tgz",
-      "integrity": "sha512-UAp55yfwNv0klWNapjs/ktHoguxuQNGnOzxYmfnXIS+8AsRDZkSDxg7R1AX3GKzn078SBI5dzwzj/Yx0Or0e3A==",
+      "version": "4.23.0",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz",
+      "integrity": "sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==",
       "dev": true,
       "funding": [
         {
@@ -5014,8 +5014,8 @@
         }
       ],
       "dependencies": {
-        "caniuse-lite": "^1.0.30001580",
-        "electron-to-chromium": "^1.4.648",
+        "caniuse-lite": "^1.0.30001587",
+        "electron-to-chromium": "^1.4.668",
         "node-releases": "^2.0.14",
         "update-browserslist-db": "^1.0.13"
       },
@@ -5295,9 +5295,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001581",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001581.tgz",
-      "integrity": "sha512-whlTkwhqV2tUmP3oYhtNfaWGYHDdS3JYFQBKXxcUR9qqPWsRhFHhoISO2Xnl/g0xyKzht9mI1LZpiNWfMzHixQ==",
+      "version": "1.0.30001588",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001588.tgz",
+      "integrity": "sha512-+hVY9jE44uKLkH0SrUTqxjxqNTOWHsbnQDIKjwkZ3lNTzUUVdBLBGXtj/q5Mp5u98r3droaZAewQuEDzjQdZlQ==",
       "dev": true,
       "funding": [
         {
@@ -5963,9 +5963,9 @@
       }
     },
     "node_modules/core-js": {
-      "version": "3.35.1",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.35.1.tgz",
-      "integrity": "sha512-IgdsbxNyMskrTFxa9lWHyMwAJU5gXOPP+1yO+K59d50VLVAIDAbs7gIv705KzALModfK3ZrSZTPNpC0PQgIZuw==",
+      "version": "3.36.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.36.0.tgz",
+      "integrity": "sha512-mt7+TUBbTFg5+GngsAxeKBTl5/VS0guFeJacYge9OmHb+m058UwwIm41SE9T4Den7ClatV57B6TYTuJ0CX1MAw==",
       "dev": true,
       "hasInstallScript": true,
       "funding": {
@@ -7085,9 +7085,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.668",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.668.tgz",
-      "integrity": "sha512-ZOBocMYCehr9W31+GpMclR+KBaDZOoAEabLdhpZ8oU1JFDwIaFY0UDbpXVEUFc0BIP2O2Qn3rkfCjQmMR4T/bQ==",
+      "version": "1.4.673",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.673.tgz",
+      "integrity": "sha512-zjqzx4N7xGdl5468G+vcgzDhaHkaYgVcf9MqgexcTqsl2UHSCmOj/Bi3HAprg4BZCpC7HyD8a6nZl6QAZf72gw==",
       "dev": true
     },
     "node_modules/electron-updater": {
@@ -16097,9 +16097,9 @@
       }
     },
     "node_modules/terser": {
-      "version": "5.27.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.27.0.tgz",
-      "integrity": "sha512-bi1HRwVRskAjheeYl291n3JC4GgO/Ty4z1nVs5AAsmonJulGxpSektecnNedrwK9C7vpvVtcX3cw00VSLt7U2A==",
+      "version": "5.27.1",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.27.1.tgz",
+      "integrity": "sha512-29wAr6UU/oQpnTw5HoadwjUZnFQXGdOfj0LjZ4sVxzqwHh/QVkvr7m8y9WoR4iN3FRitVduTc6KdjcW38Npsug==",
       "dev": true,
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
@@ -17219,9 +17219,9 @@
       }
     },
     "node_modules/webpack": {
-      "version": "5.90.1",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.90.1.tgz",
-      "integrity": "sha512-SstPdlAC5IvgFnhiRok8hqJo/+ArAbNv7rhU4fnWGHNVfN59HSQFaxZDSAL3IFG2YmqxuRs+IU33milSxbPlog==",
+      "version": "5.90.2",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.90.2.tgz",
+      "integrity": "sha512-ziXu8ABGr0InCMEYFnHrYweinHK2PWrMqnwdHk2oK3rRhv/1B+2FnfwYv5oD+RrknK/Pp/Hmyvu+eAsaMYhzCw==",
       "dev": true,
       "dependencies": {
         "@types/eslint-scope": "^3.7.3",
@@ -17348,9 +17348,9 @@
       }
     },
     "node_modules/webpack-dev-server": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-5.0.1.tgz",
-      "integrity": "sha512-Mbla51FSVfk9WvGiCWRJLsMLq87LNxQitz477z0LIhHbx7ig/fIkU9R/OCNmf6A3tTaJoObwmYco9buC1oN+yA==",
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-5.0.2.tgz",
+      "integrity": "sha512-IVj3qsQhiLJR82zVg3QdPtngMD05CYP/Am+9NG5QSl+XwUR/UPtFwllRBKrMwM9ttzFsC6Zj3DMgniPyn/Z0hQ==",
       "dev": true,
       "dependencies": {
         "@types/bonjour": "^3.5.13",
@@ -21458,13 +21458,13 @@
       }
     },
     "browserslist": {
-      "version": "4.22.3",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.3.tgz",
-      "integrity": "sha512-UAp55yfwNv0klWNapjs/ktHoguxuQNGnOzxYmfnXIS+8AsRDZkSDxg7R1AX3GKzn078SBI5dzwzj/Yx0Or0e3A==",
+      "version": "4.23.0",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz",
+      "integrity": "sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==",
       "dev": true,
       "requires": {
-        "caniuse-lite": "^1.0.30001580",
-        "electron-to-chromium": "^1.4.648",
+        "caniuse-lite": "^1.0.30001587",
+        "electron-to-chromium": "^1.4.668",
         "node-releases": "^2.0.14",
         "update-browserslist-db": "^1.0.13"
       }
@@ -21677,9 +21677,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001581",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001581.tgz",
-      "integrity": "sha512-whlTkwhqV2tUmP3oYhtNfaWGYHDdS3JYFQBKXxcUR9qqPWsRhFHhoISO2Xnl/g0xyKzht9mI1LZpiNWfMzHixQ==",
+      "version": "1.0.30001588",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001588.tgz",
+      "integrity": "sha512-+hVY9jE44uKLkH0SrUTqxjxqNTOWHsbnQDIKjwkZ3lNTzUUVdBLBGXtj/q5Mp5u98r3droaZAewQuEDzjQdZlQ==",
       "dev": true
     },
     "chalk": {
@@ -22185,9 +22185,9 @@
       }
     },
     "core-js": {
-      "version": "3.35.1",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.35.1.tgz",
-      "integrity": "sha512-IgdsbxNyMskrTFxa9lWHyMwAJU5gXOPP+1yO+K59d50VLVAIDAbs7gIv705KzALModfK3ZrSZTPNpC0PQgIZuw==",
+      "version": "3.36.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.36.0.tgz",
+      "integrity": "sha512-mt7+TUBbTFg5+GngsAxeKBTl5/VS0guFeJacYge9OmHb+m058UwwIm41SE9T4Den7ClatV57B6TYTuJ0CX1MAw==",
       "dev": true
     },
     "core-js-compat": {
@@ -22987,9 +22987,9 @@
       }
     },
     "electron-to-chromium": {
-      "version": "1.4.668",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.668.tgz",
-      "integrity": "sha512-ZOBocMYCehr9W31+GpMclR+KBaDZOoAEabLdhpZ8oU1JFDwIaFY0UDbpXVEUFc0BIP2O2Qn3rkfCjQmMR4T/bQ==",
+      "version": "1.4.673",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.673.tgz",
+      "integrity": "sha512-zjqzx4N7xGdl5468G+vcgzDhaHkaYgVcf9MqgexcTqsl2UHSCmOj/Bi3HAprg4BZCpC7HyD8a6nZl6QAZf72gw==",
       "dev": true
     },
     "electron-updater": {
@@ -29789,9 +29789,9 @@
       }
     },
     "terser": {
-      "version": "5.27.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.27.0.tgz",
-      "integrity": "sha512-bi1HRwVRskAjheeYl291n3JC4GgO/Ty4z1nVs5AAsmonJulGxpSektecnNedrwK9C7vpvVtcX3cw00VSLt7U2A==",
+      "version": "5.27.1",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.27.1.tgz",
+      "integrity": "sha512-29wAr6UU/oQpnTw5HoadwjUZnFQXGdOfj0LjZ4sVxzqwHh/QVkvr7m8y9WoR4iN3FRitVduTc6KdjcW38Npsug==",
       "dev": true,
       "requires": {
         "@jridgewell/source-map": "^0.3.3",
@@ -30648,9 +30648,9 @@
       }
     },
     "webpack": {
-      "version": "5.90.1",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.90.1.tgz",
-      "integrity": "sha512-SstPdlAC5IvgFnhiRok8hqJo/+ArAbNv7rhU4fnWGHNVfN59HSQFaxZDSAL3IFG2YmqxuRs+IU33milSxbPlog==",
+      "version": "5.90.2",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.90.2.tgz",
+      "integrity": "sha512-ziXu8ABGr0InCMEYFnHrYweinHK2PWrMqnwdHk2oK3rRhv/1B+2FnfwYv5oD+RrknK/Pp/Hmyvu+eAsaMYhzCw==",
       "dev": true,
       "requires": {
         "@types/eslint-scope": "^3.7.3",
@@ -30735,9 +30735,9 @@
       }
     },
     "webpack-dev-server": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-5.0.1.tgz",
-      "integrity": "sha512-Mbla51FSVfk9WvGiCWRJLsMLq87LNxQitz477z0LIhHbx7ig/fIkU9R/OCNmf6A3tTaJoObwmYco9buC1oN+yA==",
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-5.0.2.tgz",
+      "integrity": "sha512-IVj3qsQhiLJR82zVg3QdPtngMD05CYP/Am+9NG5QSl+XwUR/UPtFwllRBKrMwM9ttzFsC6Zj3DMgniPyn/Z0hQ==",
       "dev": true,
       "requires": {
         "@types/bonjour": "^3.5.13",
diff --git a/package.json b/package.json
index cd257304..f1bedf87 100644
--- a/package.json
+++ b/package.json
@@ -124,11 +124,11 @@
     "@volar/vue-language-plugin-pug": "^1.6.5",
     "@vue/language-plugin-pug": "^1.8.27",
     "babel-loader": "^9.1.3",
-    "browserslist": "^4.22.3",
+    "browserslist": "^4.23.0",
     "chalk": "^4.1.2",
     "changelog-parser": "^3.0.1",
     "copy-webpack-plugin": "^12.0.2",
-    "core-js": "^3.35.1",
+    "core-js": "^3.36.0",
     "cross-env": "^7.0.3",
     "css-loader": "^6.10.0",
     "css-minimizer-webpack-plugin": "^6.0.0",
@@ -137,7 +137,7 @@
     "electron-builder": "^24.10.0",
     "electron-debug": "^3.2.0",
     "electron-devtools-installer": "^3.2.0",
-    "electron-to-chromium": "^1.4.668",
+    "electron-to-chromium": "^1.4.673",
     "electron-updater": "^6.1.7",
     "eslint": "^8.56.0",
     "eslint-config-standard": "^17.1.0",
@@ -162,16 +162,16 @@
     "svg-sprite-loader": "^6.0.11",
     "svg-transform-loader": "^2.0.13",
     "svgo-loader": "^4.0.0",
-    "terser": "^5.27.0",
+    "terser": "^5.27.1",
     "terser-webpack-plugin": "^5.3.10",
     "ts-loader": "^9.5.1",
     "typescript": "^5.3.3",
     "vue-eslint-parser": "^9.4.2",
     "vue-loader": "^17.4.2",
     "vue-template-compiler": "^2.7.16",
-    "webpack": "^5.90.1",
+    "webpack": "^5.90.2",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.0.1",
+    "webpack-dev-server": "^5.0.2",
     "webpack-hot-middleware": "github:lyswhut/webpack-hot-middleware#329c4375134b89d39da23a56a94db651247c74a1",
     "webpack-merge": "^5.10.0"
   },
diff --git a/publish/changeLog.md b/publish/changeLog.md
index ae707845..40b44e62 100644
--- a/publish/changeLog.md
+++ b/publish/changeLog.md
@@ -1,4 +1,6 @@
 ### 优化
+
+- 主题设置默认折叠其他主题以优化进入设置界面时的性能
 - 不再丢弃kg源逐行歌词
 - 支持kw源排行榜显示大小（revert @Folltoshe #1460）
 
diff --git a/src/lang/en-us.json b/src/lang/en-us.json
index daca9104..a9789e8f 100644
--- a/src/lang/en-us.json
+++ b/src/lang/en-us.json
@@ -661,6 +661,7 @@
   "theme_max_tip": "You can only add up to 10 themes, delete some and add more 😜",
   "theme_mid_autumn": "Mid-Autumn",
   "theme_ming": "Ming",
+  "theme_more_btn_show": "More theme",
   "theme_naruto": "Naruto",
   "theme_orange": "Orange",
   "theme_pink": "Pink",
diff --git a/src/lang/zh-cn.json b/src/lang/zh-cn.json
index 99a085a9..8fc6678a 100644
--- a/src/lang/zh-cn.json
+++ b/src/lang/zh-cn.json
@@ -661,6 +661,7 @@
   "theme_max_tip": "最多只能添加10个主题哦，删掉一些再添加吧 😜 ",
   "theme_mid_autumn": "月里嫦娥",
   "theme_ming": "青出于黑",
+  "theme_more_btn_show": "更多主题",
   "theme_naruto": "木叶之村",
   "theme_orange": "橙黄橘绿",
   "theme_pink": "粉装玉琢",
diff --git a/src/lang/zh-tw.json b/src/lang/zh-tw.json
index 29b9b1f9..d60903f0 100644
--- a/src/lang/zh-tw.json
+++ b/src/lang/zh-tw.json
@@ -661,6 +661,7 @@
   "theme_max_tip": "最多只能加10個主題哦，刪除一些再加吧 😜",
   "theme_mid_autumn": "月裡嫦娥",
   "theme_ming": "青出於黑",
+  "theme_more_btn_show": "更多主題",
   "theme_naruto": "木葉之村",
   "theme_orange": "橙黃橘綠",
   "theme_pink": "粉紅裝玉琢",
diff --git a/src/renderer/views/Setting/components/SettingBasic.vue b/src/renderer/views/Setting/components/SettingBasic.vue
index babe7213..f423a36b 100644
--- a/src/renderer/views/Setting/components/SettingBasic.vue
+++ b/src/renderer/views/Setting/components/SettingBasic.vue
@@ -1,30 +1,8 @@
 <template lang="pug">
 dt#basic {{ $t('setting__basic') }}
 dd
-  h3#basic_theme {{ $t('setting__basic_theme') }}
   div
-    ul(:class="$style.theme")
-      li(v-for="theme in defaultThemes" :key="theme.id" :aria-label="$t('theme_' + theme.id)" :style="theme.styles" :class="[$style.themeItem, {[$style.active]: themeId == theme.id}]" @click="toggleTheme(theme)")
-        div(:class="$style.bg")
-        span(:class="$style.label") {{ $t('theme_' + theme.id) }}
-      li(v-for="theme in userThemes" :key="theme.id" :aria-label="theme.name" :style="theme.styles" :class="[$style.themeItem, {[$style.active]: themeId == theme.id}]" @click="toggleTheme(theme)" @contextmenu="handleEditTheme(theme)")
-        div(:class="$style.bg")
-        span(:class="$style.label") {{ theme.name }}
-      li(:aria-label="$t('theme_auto_tip')" :style="autoTheme" :class="[$style.themeItem, $style.auto, {[$style.active]: themeId == 'auto'}]" @click="handleSetThemeAuto" @contextmenu="isShowThemeSelectorModal = true")
-        div(:class="$style.bg")
-          div(:class="$style.bgContent")
-            div(:class="$style.light")
-            div(:class="$style.dark")
-        span(:class="$style.label") {{ $t('theme_auto') }}
-      li(:aria-label="$t('theme_add')" :class="[$style.themeItem, $style.add]" @click="handleEditTheme()")
-        div(:class="$style.bg")
-          div(:class="$style.bgContent")
-            svg-icon(:class="$style.icon" name="plus")
-        span(:class="$style.label") {{ $t('theme_add') }}
-
-dd
-  div
-    .gap-top.top
+    .gap-top
       base-checkbox(id="setting_show_animate" :model-value="appSetting['common.isShowAnimation']" :label="$t('setting__basic_show_animation')" @update:model-value="updateSetting({'common.isShowAnimation': $event})")
     .gap-top
       base-checkbox(id="setting_animate" :model-value="appSetting['common.randomAnimate']" :label="$t('setting__basic_animation')" @update:model-value="updateSetting({'common.randomAnimate': $event})")
@@ -35,6 +13,28 @@ dd
     .p.gap-top
       base-btn.btn(min @click="isShowPlayTimeoutModal = true") {{ $t('setting__play_timeout')}} {{ timeLabel ? ` (${timeLabel})` : '' }}
 
+dd
+  h3#basic_theme {{ $t('setting__basic_theme') }}
+  div
+    ul(:class="$style.theme")
+      li(v-for="theme in themeList" :key="theme.id" :aria-label="theme.name" :style="theme.styles" :class="[$style.themeItem, {[$style.active]: themeId == theme.id}]" @click="toggleTheme(theme)" @contextmenu="handleEditTheme(theme)")
+        div(:class="$style.bg")
+        span(:class="$style.label") {{ theme.name }}
+      li(v-if="showAllTheme || themeId == 'auto'" :aria-label="$t('theme_auto_tip')" :style="autoTheme" :class="[$style.themeItem, $style.auto, {[$style.active]: themeId == 'auto'}]" @click="handleSetThemeAuto" @contextmenu="isShowThemeSelectorModal = true")
+        div(:class="$style.bg")
+          div(:class="$style.bgContent")
+            div(:class="$style.light")
+            div(:class="$style.dark")
+        span(:class="$style.label") {{ $t('theme_auto') }}
+      li(v-if="showAllTheme" :aria-label="$t('theme_add')" :class="[$style.themeItem, $style.add]" @click="handleEditTheme()")
+        div(:class="$style.bg")
+          div(:class="$style.bgContent")
+            svg-icon(:class="$style.icon" name="plus")
+        span(:class="$style.label") {{ $t('theme_add') }}
+      li(v-if="!showAllTheme" :aria-label="$t('theme_more_btn_show')" :class="[$style.themeItem, $style.moreThme]" @click="showAllTheme = true")
+        span(:class="$style.label") {{ $t('theme_more_btn_show') }}
+        svg-icon(name="angle-right-solid" :class="$style.activeIcon")
+
 dd
   h3#basic_source {{ $t('setting__basic_source') }}
   div
@@ -136,8 +136,23 @@ export default {
   setup() {
     const t = useI18n()
 
-    const defaultThemes = shallowReactive([])
+    const showAllTheme = ref(false)
+    const defaultThemesRaw = shallowReactive([])
+    const defaultThemes = computed(() => {
+      return defaultThemesRaw.map(theme => ({ ...theme, isDefault: true, name: t('theme_' + theme.id) }))
+    })
     const userThemes = shallowReactive([])
+    const allThemes = computed(() => {
+      return [...defaultThemes.value, ...userThemes]
+    })
+    const themeList = computed(() => {
+      if (!allThemes.value.length) return []
+      return showAllTheme.value
+        ? allThemes.value
+        : themeId.value == 'auto'
+          ? []
+          : [allThemes.value.find(t => t.id == themeId.value) ?? allThemes.value[0]]
+    })
     const autoTheme = reactive({})
     const updateAutoTheme = (info) => {
       let light = findTheme(info, appSetting['theme.lightId'])
@@ -163,7 +178,7 @@ export default {
       getThemes((info) => {
         // console.log(info)
         dataPath = info.dataPath
-        defaultThemes.splice(0, defaultThemes.length, ...info.themes.map(t => {
+        defaultThemesRaw.splice(0, defaultThemesRaw.length, ...info.themes.map(t => {
           return {
             id: t.id,
             styles: {
@@ -190,6 +205,7 @@ export default {
     const editThemeId = ref('')
     const handleEditTheme = (theme) => {
       // console.log(theme)
+      if (theme?.isDefault) return
       if (!theme && userThemes.length >= 10) {
         void dialog({
           message: t('theme_max_tip'),
@@ -299,9 +315,10 @@ export default {
     return {
       appSetting,
       updateSetting,
-      defaultThemes,
       userThemes,
       autoTheme,
+      showAllTheme,
+      themeList,
       // currentStting,
       // themes,
       // themeClassName,
@@ -491,6 +508,16 @@ export default {
         color: var(--color-primary-dark-100-alpha-300);
       }
     }
+
+    &.moreThme {
+      flex-direction: row;
+      width: auto;
+      gap: 5px;
+      color: var(--color-primary-font-active);
+      .label {
+        height: auto;
+      }
+    }
   }
 }