packages/@core/base/typings/src/app.d.ts

@@ -18,6 +18,7 @@ type ThemeModeType = 'auto' | 'dark' | 'light';
 type PreferencesButtonPositionType = 'auto' | 'fixed' | 'header';
 
 type BuiltinThemeType =
+  | 'amber'
   | 'custom'
   | 'deep-blue'
   | 'deep-green'

packages/@core/preferences/src/config.ts

@@ -109,9 +109,9 @@ const defaultPreferences: Preferences = {
     wheelable: true,
   },
   theme: {
-    builtinType: 'default',
+    builtinType: 'amber',
     colorDestructive: 'hsl(348 100% 61%)',
-    colorPrimary: 'hsl(212 100% 45%)',
+    colorPrimary: 'hsl(37 100% 52%)',
     colorSuccess: 'hsl(144 57% 58%)',
     colorWarning: 'hsl(42 84% 61%)',
     mode: 'dark',

packages/@core/preferences/src/constants.ts

@@ -8,6 +8,10 @@ interface BuiltinThemePreset {
 }
 
 const BUILT_IN_THEME_PRESETS: BuiltinThemePreset[] = [
+  {
+    color: 'hsl(37 100% 52%)',
+    type: 'amber',
+  },
   {
     color: 'hsl(212 100% 45%)',
     type: 'default',
@@ -112,7 +116,7 @@ const DEFAULT_TIME_ZONE_OPTIONS: TimezoneOption[] = [
   },
 ];
 
-export const COLOR_PRESETS = [...BUILT_IN_THEME_PRESETS].slice(0, 7);
+export const COLOR_PRESETS = [...BUILT_IN_THEME_PRESETS].slice(0, 8);
 
 export { BUILT_IN_THEME_PRESETS, DEFAULT_TIME_ZONE_OPTIONS };
 

packages/effects/layouts/src/authentication/toolbar.vue

@@ -6,7 +6,6 @@ import { computed } from 'vue';
 import { preferences } from '@vben/preferences';
 
 import {
-  AuthenticationColorToggle,
   AuthenticationLayoutToggle,
   LanguageToggle,
   ThemeToggle,
@@ -24,7 +23,7 @@ const props = withDefaults(defineProps<Props>(), {
   toolbarList: () => ['color', 'language', 'layout', 'theme'],
 });
 
-const showColor = computed(() => props.toolbarList.includes('color'));
+// const showColor = computed(() => props.toolbarList.includes('color'));
 const showLayout = computed(() => props.toolbarList.includes('layout'));
 const showLanguage = computed(() => props.toolbarList.includes('language'));
 const showTheme = computed(() => props.toolbarList.includes('theme'));
@@ -39,7 +38,7 @@ const showTheme = computed(() => props.toolbarList.includes('theme'));
   >
     <!-- Only show on medium and larger screens -->
     <div class="hidden md:flex">
-      <AuthenticationColorToggle v-if="showColor" />
+      <!-- <AuthenticationColorToggle v-if="showColor" /> -->
       <AuthenticationLayoutToggle v-if="showLayout" />
     </div>
     <!-- Always show Language and Theme toggles -->