From 889a5c9e5160cd6e75f54d4da2cf7485db331117 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Tue, 2 Jun 2026 17:02:23 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E5=AE=9A=E5=88=B6=E5=99=A8=E6=8C=89=E9=92=AE=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E5=92=8C=E5=B8=83=E5=B1=80=EF=BC=8C=E6=8F=90=E5=8D=87=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ThemeCustomizer.vue | 47 +++++++++++++++++++-----------
 1 file changed, 30 insertions(+), 17 deletions(-)

diff --git a/src/components/ThemeCustomizer.vue b/src/components/ThemeCustomizer.vue
index a9d67a24..cf5d0711 100644
--- a/src/components/ThemeCustomizer.vue
+++ b/src/components/ThemeCustomizer.vue
@@ -95,12 +95,16 @@ function handleLayoutChange(layout: ThemeCustomizerLayout) {
       </div>
       <div class="theme-customizer-header-actions">
         <VBadge color="error" dot :model-value="isCustomized" location="top end" offset-x="2" offset-y="2">
-          <IconBtn :aria-label="t('theme.customizer.reset')" @click="resetSettings">
-            <VIcon icon="mdi-refresh" />
+          <IconBtn
+            class="theme-customizer-header-icon-btn"
+            :aria-label="t('theme.customizer.reset')"
+            @click="resetSettings"
+          >
+            <VIcon class="theme-customizer-header-icon" icon="mdi-refresh" />
           </IconBtn>
         </VBadge>
-        <IconBtn :aria-label="t('common.close')" @click="drawer = false">
-          <VIcon icon="mdi-close" />
+        <IconBtn class="theme-customizer-header-icon-btn" :aria-label="t('common.close')" @click="drawer = false">
+          <VIcon class="theme-customizer-header-icon" icon="mdi-close" />
         </IconBtn>
       </div>
     </div>
@@ -113,7 +117,7 @@ function handleLayoutChange(layout: ThemeCustomizerLayout) {
 
         <h3 class="theme-customizer-section-title">{{ t('theme.customizer.primaryColor') }}</h3>
         <div class="theme-customizer-color-grid">
-          <button
+          <div
             v-for="color in themeCustomizerPrimaryColors"
             :key="color.value"
             type="button"
@@ -123,9 +127,9 @@ function handleLayoutChange(layout: ThemeCustomizerLayout) {
             @click="setPrimaryColor(color.value)"
           >
             <span class="theme-customizer-color-swatch" :style="{ backgroundColor: color.value }" />
-          </button>
+          </div>
 
-          <button
+          <div
             type="button"
             class="theme-customizer-color-option theme-customizer-color-option--picker"
             :class="{
@@ -134,7 +138,7 @@ function handleLayoutChange(layout: ThemeCustomizerLayout) {
             :aria-label="t('theme.customizer.chooseCustomColor')"
             @click="openColorPicker"
           >
-            <VIcon icon="mdi-palette-outline" size="30" />
+            <VIcon class="theme-customizer-native-icon" icon="mdi-palette-outline" size="30" />
             <input
               ref="customColorInput"
               class="theme-customizer-native-color"
@@ -142,12 +146,12 @@ function handleLayoutChange(layout: ThemeCustomizerLayout) {
               :value="settings.primaryColor"
               @input="handleCustomColorInput"
             />
-          </button>
+          </div>
         </div>
 
         <h3 class="theme-customizer-section-title">{{ t('common.theme') }}</h3>
         <div class="theme-customizer-option-grid theme-customizer-option-grid--theme">
-          <button
+          <div
             v-for="theme in themeOptions"
             :key="theme.value"
             type="button"
@@ -155,14 +159,14 @@ function handleLayoutChange(layout: ThemeCustomizerLayout) {
             :class="{ 'is-active': settings.theme === theme.value }"
             @click="setTheme(theme.value)"
           >
-            <VIcon :icon="theme.icon" size="36" />
+            <VIcon class="theme-customizer-theme-icon" :icon="theme.icon" size="36" />
             <span>{{ theme.title }}</span>
-          </button>
+          </div>
         </div>
 
         <h3 class="theme-customizer-section-title">{{ t('theme.customizer.skins') }}</h3>
         <div class="theme-customizer-preview-grid theme-customizer-preview-grid--skins">
-          <button
+          <div
             v-for="skin in skinOptions"
             :key="skin.value"
             type="button"
@@ -184,7 +188,7 @@ function handleLayoutChange(layout: ThemeCustomizerLayout) {
               </span>
             </span>
             <span>{{ skin.title }}</span>
-          </button>
+          </div>
         </div>
 
         <div v-if="showSemiDarkMenuOption" class="theme-customizer-semi-dark">
@@ -206,7 +210,7 @@ function handleLayoutChange(layout: ThemeCustomizerLayout) {
 
         <h3 class="theme-customizer-section-title"></h3>
         <div class="theme-customizer-preview-grid">
-          <button
+          <div
             v-for="layout in layoutOptions"
             :key="layout.value"
             type="button"
@@ -227,7 +231,7 @@ function handleLayoutChange(layout: ThemeCustomizerLayout) {
               </span>
             </span>
             <span>{{ layout.title }}</span>
-          </button>
+          </div>
         </div>
       </section>
     </PerfectScrollbar>
@@ -252,7 +256,14 @@ function handleLayoutChange(layout: ThemeCustomizerLayout) {
 html[data-theme='transparent'] .theme-customizer-drawer {
   backdrop-filter: blur(var(--transparent-blur-heavy, 16px));
   background-color: rgba(var(--v-theme-surface), var(--transparent-opacity-heavy, 0.5)) !important;
-  box-shadow: -2px 0 6px rgba(0, 0, 0, 16%) !important;
+}
+
+:is(html[data-theme='transparent'], .v-theme--transparent) .theme-customizer-card-option .theme-customizer-theme-icon,
+:is(html[data-theme='transparent'], .v-theme--transparent) .theme-customizer-color-option .theme-customizer-native-icon,
+:is(html[data-theme='transparent'], .v-theme--transparent) .theme-customizer-header-icon {
+  backdrop-filter: none !important;
+  background: transparent !important;
+  box-shadow: none !important;
 }
 
 .theme-customizer-header {
@@ -337,6 +348,7 @@ html[data-theme='transparent'] .theme-customizer-drawer {
   justify-content: center;
   border: 1px solid rgba(var(--v-theme-on-surface), 0.12);
   border-radius: 10px;
+  appearance: none;
   aspect-ratio: 1;
   color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
   cursor: pointer;
@@ -390,6 +402,7 @@ html[data-theme='transparent'] .theme-customizer-drawer {
   align-items: center;
   border: 1px solid rgba(var(--v-theme-on-surface), 0.12);
   border-radius: 10px;
+  appearance: none;
   color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
   cursor: pointer;
   font-size: 1rem;