Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin

packages/effects/layouts/src/widgets/color-toggle.vue

@@ -13,10 +13,11 @@ defineOptions({
   name: 'AuthenticationColorToggle',
 });
 
-function handleUpdate(value: BuiltinThemeType) {
+function handleUpdate(colorPrimary: string, type: BuiltinThemeType) {
   updatePreferences({
     theme: {
-      builtinType: value,
+      colorPrimary,
+      builtinType: type,
     },
   });
 }
@@ -30,7 +31,7 @@ function handleUpdate(value: BuiltinThemeType) {
       <template v-for="preset in COLOR_PRESETS" :key="preset.color">
         <VbenIconButton
           class="flex-center flex-shrink-0"
-          @click="handleUpdate(preset.type)"
+          @click="handleUpdate(preset.color, preset.type)"
         >
           <div
             :style="{ backgroundColor: preset.color }"

packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue

@@ -31,11 +31,30 @@ const builtinThemePresets = computed(() => {
 
 function typeView(name: BuiltinThemeType) {
   switch (name) {
+    case 'custom': {
+      return $t('preferences.theme.builtin.custom');
+    }
+    case 'deep-blue': {
+      return $t('preferences.theme.builtin.deepBlue');
+    }
+    case 'deep-green': {
+      return $t('preferences.theme.builtin.deepGreen');
+    }
     case 'default': {
       return $t('preferences.theme.builtin.default');
     }
-    case 'violet': {
-      return $t('preferences.theme.builtin.violet');
+    case 'gray': {
+      return $t('preferences.theme.builtin.gray');
+    }
+    case 'green': {
+      return $t('preferences.theme.builtin.green');
+    }
+
+    case 'neutral': {
+      return $t('preferences.theme.builtin.neutral');
+    }
+    case 'orange': {
+      return $t('preferences.theme.builtin.orange');
     }
     case 'pink': {
       return $t('preferences.theme.builtin.pink');
@@ -46,18 +65,11 @@ function typeView(name: BuiltinThemeType) {
     case 'sky-blue': {
       return $t('preferences.theme.builtin.skyBlue');
     }
-    case 'deep-blue': {
-      return $t('preferences.theme.builtin.deepBlue');
+    case 'slate': {
+      return $t('preferences.theme.builtin.slate');
     }
-
-    case 'green': {
-      return $t('preferences.theme.builtin.green');
-    }
-    case 'deep-green': {
-      return $t('preferences.theme.builtin.deepGreen');
-    }
-    case 'orange': {
-      return $t('preferences.theme.builtin.orange');
+    case 'violet': {
+      return $t('preferences.theme.builtin.violet');
     }
     case 'yellow': {
       return $t('preferences.theme.builtin.yellow');
@@ -65,18 +77,6 @@ function typeView(name: BuiltinThemeType) {
     case 'zinc': {
       return $t('preferences.theme.builtin.zinc');
     }
-    case 'neutral': {
-      return $t('preferences.theme.builtin.neutral');
-    }
-    case 'slate': {
-      return $t('preferences.theme.builtin.slate');
-    }
-    case 'gray': {
-      return $t('preferences.theme.builtin.gray');
-    }
-    case 'custom': {
-      return $t('preferences.theme.builtin.custom');
-    }
   }
 }
 

packages/effects/layouts/src/widgets/preferences/blocks/theme/theme.vue

@@ -37,14 +37,14 @@ function activeClass(theme: string): string[] {
 
 function nameView(name: string) {
   switch (name) {
-    case 'light': {
-      return $t('preferences.theme.light');
+    case 'auto': {
+      return $t('preferences.followSystem');
     }
     case 'dark': {
       return $t('preferences.theme.dark');
     }
-    case 'auto': {
-      return $t('preferences.followSystem');
+    case 'light': {
+      return $t('preferences.theme.light');
     }
   }
 }