fix: use dialog theme customizer in app mode

src/components/ThemeCustomizer.vue

@@ -9,6 +9,7 @@ import {
 import { usePWA } from '@/composables/usePWA'
 import { useI18n } from 'vue-i18n'
 import { useTheme } from 'vuetify'
+import { VDialog, VNavigationDrawer } from 'vuetify/components'
 
 const props = withDefaults(
   defineProps<{
@@ -37,6 +38,26 @@ const drawer = computed({
   set: value => emit('update:modelValue', value),
 })
 
+const customizerContainer = computed(() => (appMode.value ? VDialog : VNavigationDrawer))
+
+const customizerContainerProps = computed(() => {
+  if (appMode.value) {
+    return {
+      class: 'theme-customizer-dialog-overlay',
+      maxWidth: 420,
+      scrim: true,
+    }
+  }
+
+  return {
+    class: 'theme-customizer-drawer',
+    location: 'right' as const,
+    scrim: false,
+    temporary: true,
+    width: 420,
+  }
+})
+
 const themeOptions = computed<Array<{ icon: string; title: string; value: ThemeCustomizerTheme }>>(() => [
   { title: t('theme.light'), value: 'light', icon: 'mdi-white-balance-sunny' },
   { title: t('theme.dark'), value: 'dark', icon: 'mdi-weather-night' },
@@ -108,14 +129,12 @@ async function handleResetSettings() {
 </script>
 
 <template>
-  <VNavigationDrawer
+  <component
+    :is="customizerContainer"
     v-model="drawer"
-    class="theme-customizer-drawer"
+    v-bind="customizerContainerProps"
-    location="right"
-    temporary
-    width="420"
-    :scrim="false"
   >
+    <div class="theme-customizer-panel" :class="{ 'theme-customizer-panel--dialog': appMode }">
       <div class="theme-customizer-header">
         <div>
           <h2 class="theme-customizer-title">{{ t('theme.customizer.title') }}</h2>
@@ -263,7 +282,8 @@ async function handleResetSettings() {
           </div>
         </section>
       </PerfectScrollbar>
-  </VNavigationDrawer>
+    </div>
+  </component>
 </template>
 
 <style lang="scss">
@@ -285,16 +305,48 @@ async function handleResetSettings() {
   }
 }
 
+.theme-customizer-dialog-overlay {
+  z-index: 12000 !important;
+}
+
+.theme-customizer-panel {
+  display: flex;
+  flex-direction: column;
+  block-size: 100%;
+  min-block-size: 0;
+}
+
+.theme-customizer-panel--dialog {
+  overflow: hidden;
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
+  border-radius: 16px;
+  background: rgb(var(--v-theme-surface));
+  block-size: auto;
+  box-shadow: 0 8px 22px rgba(0, 0, 0, 12%);
+  inline-size: min(420px, calc(100vw - 32px));
+  max-block-size: 85vh;
+  max-block-size: 85dvh;
+}
+
+.theme-customizer-panel--dialog .theme-customizer-body {
+  max-block-size: calc(85vh - 104px);
+  max-block-size: calc(85dvh - 104px);
+}
+
 .theme-customizer-drawer.v-theme--transparent,
 .v-theme--transparent .theme-customizer-drawer,
-html[data-theme='transparent'] .theme-customizer-drawer {
+html[data-theme='transparent'] .theme-customizer-drawer,
+.v-theme--transparent .theme-customizer-panel--dialog,
+html[data-theme='transparent'] .theme-customizer-panel--dialog {
   backdrop-filter: blur(var(--transparent-blur-heavy, 16px));
   background-color: rgba(var(--v-theme-surface), var(--transparent-opacity-heavy, 0.5)) !important;
 }
 
 // 透明主题的全局 overlay 毛玻璃会影响临时抽屉绘制，主题定制器改由 drawer 自身承担背景。
 html[data-theme='transparent'] .v-overlay__content:has(.theme-customizer-drawer),
-.v-theme--transparent .v-overlay__content:has(.theme-customizer-drawer) {
+.v-theme--transparent .v-overlay__content:has(.theme-customizer-drawer),
+html[data-theme='transparent'] .v-overlay__content:has(.theme-customizer-panel--dialog),
+.v-theme--transparent .v-overlay__content:has(.theme-customizer-panel--dialog) {
   border-radius: 0 !important;
   backdrop-filter: none !important;
   background: transparent !important;
@@ -380,8 +432,8 @@ html[data-theme='transparent'] .v-overlay__content:has(.theme-customizer-drawer)
 
 .theme-customizer-color-grid {
   display: grid;
-  gap: 14px;
+  gap: 12px;
-  grid-template-columns: repeat(6, minmax(0, 1fr));
+  grid-template-columns: repeat(auto-fill, 48px);
 }
 
 .theme-customizer-color-option {
@@ -392,9 +444,10 @@ html[data-theme='transparent'] .v-overlay__content:has(.theme-customizer-drawer)
   border: 1px solid rgba(var(--v-theme-on-surface), 0.12);
   border-radius: 10px;
   appearance: none;
-  aspect-ratio: 1;
+  block-size: 48px;
   color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
   cursor: pointer;
+  inline-size: 48px;
   transition:
     border-color 0.18s ease,
     background-color 0.18s ease,
@@ -409,9 +462,9 @@ html[data-theme='transparent'] .v-overlay__content:has(.theme-customizer-drawer)
 
 .theme-customizer-color-swatch {
   display: block;
-  border-radius: 9px;
+  border-radius: 8px;
-  block-size: 68%;
+  block-size: 30px;
-  inline-size: 68%;
+  inline-size: 30px;
 }
 
 .theme-customizer-color-option--picker {
@@ -592,7 +645,6 @@ html[data-theme='transparent'] .v-overlay__content:has(.theme-customizer-drawer)
     padding-inline: 22px;
   }
 
-  .theme-customizer-color-grid,
   .theme-customizer-preview-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }