diff --git a/locales/zh-chs.yml b/locales/zh-chs.yml
index f84c756..17b6e6d 100644
--- a/locales/zh-chs.yml
+++ b/locales/zh-chs.yml
@@ -107,7 +107,7 @@ layout:
     warningColor: 警告色
     errorColor: 错误色
     infoColor: 信息色
-    headerTheme: 顶栏主题
+    headerDark: 顶栏深色
     sidebarDark: 侧边栏深色
 
     menuDrag: 侧边菜单拖拽
diff --git a/src/auto-imports.d.ts b/src/auto-imports.d.ts
index 8322aba..abd178d 100644
--- a/src/auto-imports.d.ts
+++ b/src/auto-imports.d.ts
@@ -26,6 +26,7 @@ declare global {
   const createApp: typeof import('vue')['createApp']
   const createEventHook: typeof import('@vueuse/core')['createEventHook']
   const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
+  const createGridLayoutListen: typeof import('./composables/web/theme')['createGridLayoutListen']
   const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
   const createMediaPrefersColorSchemeListen: typeof import('./composables/web/theme')['createMediaPrefersColorSchemeListen']
   const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
@@ -382,6 +383,7 @@ declare module 'vue' {
     readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
     readonly createEventHook: UnwrapRef<typeof import('@vueuse/core')['createEventHook']>
     readonly createGlobalState: UnwrapRef<typeof import('@vueuse/core')['createGlobalState']>
+    readonly createGridLayoutListen: UnwrapRef<typeof import('./composables/web/theme')['createGridLayoutListen']>
     readonly createInjectionState: UnwrapRef<typeof import('@vueuse/core')['createInjectionState']>
     readonly createMediaPrefersColorSchemeListen: UnwrapRef<typeof import('./composables/web/theme')['createMediaPrefersColorSchemeListen']>
     readonly createReactiveFn: UnwrapRef<typeof import('@vueuse/core')['createReactiveFn']>
@@ -721,6 +723,7 @@ declare module '@vue/runtime-core' {
     readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
     readonly createEventHook: UnwrapRef<typeof import('@vueuse/core')['createEventHook']>
     readonly createGlobalState: UnwrapRef<typeof import('@vueuse/core')['createGlobalState']>
+    readonly createGridLayoutListen: UnwrapRef<typeof import('./composables/web/theme')['createGridLayoutListen']>
     readonly createInjectionState: UnwrapRef<typeof import('@vueuse/core')['createInjectionState']>
     readonly createMediaPrefersColorSchemeListen: UnwrapRef<typeof import('./composables/web/theme')['createMediaPrefersColorSchemeListen']>
     readonly createReactiveFn: UnwrapRef<typeof import('@vueuse/core')['createReactiveFn']>
diff --git a/src/composables/setting/header-setting.ts b/src/composables/setting/header-setting.ts
index a9b420c..fd130a7 100644
--- a/src/composables/setting/header-setting.ts
+++ b/src/composables/setting/header-setting.ts
@@ -18,7 +18,6 @@ export function useHeaderSetting() {
   const getHeaderTheme = computed(() => appConfig.header.value.theme)
   const getShowHeader = computed(() => appConfig.header.value.show)
   const getFixed = computed(() => appConfig.header.value.fixed)
-  const getHeaderBgColor = computed(() => appConfig.header.value.bgColor)
   const getShowSearch = computed(() => appConfig.header.value.showSearch)
   const getUseLockPage = computed(() => false)
   const getShowFullScreen = computed(() => appConfig.header.value.showFullScreen)
@@ -80,7 +79,6 @@ export function useHeaderSetting() {
     getShowFullHeaderRef,
     getShowInsetHeaderRef,
     getUnFixedAndFull,
-    getHeaderBgColor,
     getShowLocalePicker,
   }
 }
diff --git a/src/composables/web/theme.ts b/src/composables/web/theme.ts
index 2bf5adc..1780da2 100644
--- a/src/composables/web/theme.ts
+++ b/src/composables/web/theme.ts
@@ -1,25 +1,25 @@
 import { storeToRefs } from 'pinia'
 import { ThemeEnum } from '~/constants'
 import type { MaybeElementRef } from '~/utils'
-import { darken, generateColors, lighten, pickTextColorBasedOnBgColor, setCssVar, toggleClass } from '~/utils'
+import { generateColors, setCssVar, toggleClass } from '~/utils'
 
 const HEADER_HEIGHT = '--header-height'
-const HEADER_BG_COLOR_VAR = '--header-background-color'
-const HEADER_TEXT_COLOR_VAR = '--header-text-color'
-const HEADER_ACTION_HOVER_BG_COLOR_VAR = '--header-action-hover-bg-color'
+// const HEADER_BG_COLOR_VAR = '--header-background-color'
+// const HEADER_TEXT_COLOR_VAR = '--header-text-color'
+// const HEADER_ACTION_HOVER_BG_COLOR_VAR = '--header-action-hover-bg-color'
 
 const ASIDE_WIDTH = '--aside-width'
-const ASIDE_DARK_BG_COLOR = '--aside-background-color'
-const ASIDE_TEXT_COLOR_VAR = '--aside-text-color'
+// const ASIDE_DARK_BG_COLOR = '--aside-background-color'
+// const ASIDE_TEXT_COLOR_VAR = '--aside-text-color'
 
-const TRIGGER_BG_COLOR_VAR = '--trigger-background-color'
+// const TRIGGER_BG_COLOR_VAR = '--trigger-background-color'
 
 const TAB_BAR_HEIGHT = '--tab-bar-height'
 
 const FOOTER_HEIGHT = '--footer-height'
 
-const LIGHT_TEXT_COLOR = 'rgba(0,0,0,.85)'
-const DARK_TEXT_COLOR = '#fff'
+// const LIGHT_TEXT_COLOR = 'rgba(0,0,0,.85)'
+// const DARK_TEXT_COLOR = '#fff'
 
 export function createMediaPrefersColorSchemeListen() {
   const { setAppConfig } = useAppConfig()
@@ -107,81 +107,65 @@ export function createGridLayoutListen(el: MaybeElementRef | null) {
 
 export function createThemeColorListen() {
   const {
-    sidebar,
-    header,
     grayMode,
     colorWeak,
-    setAppConfig,
   } = useAppConfig()
 
-  const headerBgColor = useCssVar(HEADER_BG_COLOR_VAR, null, {
-    initialValue: `${unref(header).bgColor}px`,
-  })
-
-  const headerTextColor = useCssVar(
-    HEADER_TEXT_COLOR_VAR,
-    null,
-    {
-      initialValue: LIGHT_TEXT_COLOR,
-    },
-  )
-  const headerActionHoverBgColor = useCssVar(
-    HEADER_ACTION_HOVER_BG_COLOR_VAR,
-    null,
-  )
-
-  const sidebarBgColor = useCssVar(
-    ASIDE_DARK_BG_COLOR,
-    null,
-    {
-      initialValue: `${unref(sidebar).bgColor}px`,
-    },
-  )
-
-  const asideTextColor = useCssVar(
-    ASIDE_TEXT_COLOR_VAR,
-    null,
-    {
-      initialValue: LIGHT_TEXT_COLOR,
-    },
-  )
-  const triggerBackgroundColor = useCssVar(
-    TRIGGER_BG_COLOR_VAR,
-    null,
-  )
+  // const headerTextColor = useCssVar(
+  //   HEADER_TEXT_COLOR_VAR,
+  //   null,
+  //   {
+  //     initialValue: LIGHT_TEXT_COLOR,
+  //   },
+  // )
+  // const headerActionHoverBgColor = useCssVar(
+  //   HEADER_ACTION_HOVER_BG_COLOR_VAR,
+  //   null,
+  // )
+
+  // const asideTextColor = useCssVar(
+  //   ASIDE_TEXT_COLOR_VAR,
+  //   null,
+  //   {
+  //     initialValue: LIGHT_TEXT_COLOR,
+  //   },
+  // )
+  // const triggerBackgroundColor = useCssVar(
+  //   TRIGGER_BG_COLOR_VAR,
+  //   null,
+  // )
 
   watchEffect(() => {
-    headerBgColor.value = unref(header).bgColor
-    headerTextColor.value = pickTextColorBasedOnBgColor(
-      unref(header).bgColor,
-      LIGHT_TEXT_COLOR,
-      DARK_TEXT_COLOR,
-    )
-
-    if (['#fff', '#ffffff'].includes(unref(header).bgColor.toLowerCase())) {
-      headerActionHoverBgColor.value = darken(unref(header).bgColor, 6)
-      setAppConfig({ header: { theme: ThemeEnum.LIGHT } })
-    }
-    else {
-      headerActionHoverBgColor.value = lighten(unref(header).bgColor, 6)
-      setAppConfig({ header: { theme: ThemeEnum.DARK } })
-    }
+    // headerTextColor.value = pickTextColorBasedOnBgColor(
+    //   unref(header).bgColor,
+    //   LIGHT_TEXT_COLOR,
+    //   DARK_TEXT_COLOR,
+    // )
 
-    sidebarBgColor.value = unref(sidebar).bgColor
-    asideTextColor.value = pickTextColorBasedOnBgColor(
-      unref(sidebar).bgColor,
-      LIGHT_TEXT_COLOR,
-      DARK_TEXT_COLOR,
-    )
+    // if (['#fff', '#ffffff'].includes(unref(header).bgColor.toLowerCase())) {
+    //   headerActionHoverBgColor.value = darken(unref(header).bgColor, 6)
+    //   setAppConfig({ header: { theme: ThemeEnum.LIGHT } })
+    // }
+    // else {
+    //   headerActionHoverBgColor.value = lighten(unref(header).bgColor, 6)
+    //   setAppConfig({ header: { theme: ThemeEnum.DARK } })
+    // }
+
+    // sidebarBgColor.value = unref(sidebar).bgColor
+    // asideTextColor.value = pickTextColorBasedOnBgColor(
+    //   unref(sidebar).bgColor,
+    //   LIGHT_TEXT_COLOR,
+    //   DARK_TEXT_COLOR,
+    // )
 
-    if (['#fff', '#ffffff'].includes(unref(sidebar).bgColor.toLowerCase())) {
-      triggerBackgroundColor.value = darken(unref(sidebar).bgColor, 6)
-      setAppConfig({ sidebar: { theme: ThemeEnum.LIGHT } })
-    }
-    else {
-      triggerBackgroundColor.value = lighten(unref(sidebar).bgColor, 6)
-      setAppConfig({ sidebar: { theme: ThemeEnum.DARK } })
-    }
+    // if (['#fff', '#ffffff'].includes(unref(sidebar).bgColor.toLowerCase())) {
+    //   triggerBackgroundColor.value = darken(unref(sidebar).bgColor, 6)
+    //   setAppConfig({ sidebar: { theme: ThemeEnum.LIGHT } })
+    // }
+    // else {
+    //   triggerBackgroundColor.value = lighten(unref(sidebar).bgColor, 6)
+    //   setAppConfig({ sidebar: { theme: ThemeEnum.DARK } })
+    // }
 
     toggleGrayMode(unref(grayMode))
     toggleColorWeak(unref(colorWeak))
diff --git a/src/constants/design.ts b/src/constants/design.ts
index f4b94d0..a5fb22e 100644
--- a/src/constants/design.ts
+++ b/src/constants/design.ts
@@ -1,3 +1,4 @@
+// primary preset color
 export const APP_PRESET_COLOR_LIST: string[] = [
   '#0960bd',
   '#0084f4',
@@ -10,49 +11,6 @@ export const APP_PRESET_COLOR_LIST: string[] = [
   '#ff9800',
 ]
 
-// header preset color
-export const HEADER_PRESET_BG_COLOR_LIST: string[] = [
-  '#ffffff',
-  '#151515',
-  '#009688',
-  '#5172DC',
-  '#018ffb',
-  '#409eff',
-  '#e74c3c',
-  '#24292e',
-  '#394664',
-  '#001529',
-  '#383f45',
-]
-
-// sider preset color
-export const SIDE_BAR_BG_COLOR_LIST: string[] = [
-  '#001529',
-  '#212121',
-  '#273352',
-  '#ffffff',
-  '#191b24',
-  '#191a23',
-  '#304156',
-  '#001628',
-  '#28333E',
-  '#344058',
-  '#383f45',
-]
-
-export enum ThemeChangeEnum {
-  THEME_CHANGE,
-
-  THEME_PRIMARY_COLOR_CHANGE,
-  THEME_INFO_COLOR_CHANGE,
-  THEME_SUCCESS_COLOR_CHANGE,
-  THEME_WARNING_COLOR_CHANGE,
-  THEME_ERROR_COLOR_CHANGE,
-
-  THEME_HEADER_BG_COLOR_CHANGE,
-  THEME_SIDEBAR_BG_COLOR_CHANGE,
-}
-
 // 设置事件Enum
 export enum HandlerSettingEnum {
   CHANGE_LAYOUT,
@@ -101,3 +59,16 @@ export enum HandlerSettingEnum {
   OPEN_PAGE_LOADING,
   OPEN_ROUTE_TRANSITION,
 }
+
+export enum ThemeChangeEnum {
+  THEME_CHANGE,
+
+  THEME_PRIMARY_COLOR_CHANGE,
+  THEME_INFO_COLOR_CHANGE,
+  THEME_SUCCESS_COLOR_CHANGE,
+  THEME_WARNING_COLOR_CHANGE,
+  THEME_ERROR_COLOR_CHANGE,
+
+  THEME_HEADER_BG_COLOR_CHANGE,
+  THEME_SIDEBAR_BG_COLOR_CHANGE,
+}
diff --git a/src/layouts/nlayout/components/header.vue b/src/layouts/nlayout/components/header.vue
index 94cf2e8..9452574 100644
--- a/src/layouts/nlayout/components/header.vue
+++ b/src/layouts/nlayout/components/header.vue
@@ -14,6 +14,8 @@ const {
   menu,
 } = useAppConfig()
 
+const { isHeaderDark } = useAppTheme()
+
 const {
   getShowHeader,
   getShowFullScreen,
@@ -62,57 +64,59 @@ const { isFullscreen } = useFullscreen()
 
 <template>
   <NSpace :class="bem()" vertical>
-    <NSpace
-      v-if="getShowFullHeaderRef"
-      class="h-48px shadow"
-      :class="[{ 'mb-8px': !getShowHeaderMultipleTab }]"
-      :style="{ '--un-shadow-color': 'var(--n-border-color)' }"
-      justify="space-between"
-      align="center"
-    >
-      <slot name="logo">
-        <NSpace align="center" class="items-center" :size="0">
-          <Logo
-            v-if="showHeaderLogoRef"
-            :style="{
-              width: `${logoWidth}px`,
-              maxWidth: `${logoWidth}px`,
-            }"
-          />
-          <HeaderTrigger v-if="getShowHeaderTrigger" class="mx-2" />
-          <slot v-if="showHeaderBreadcrumb" name="breadcrumb">
-            <BreadCrumb />
-          </slot>
-        </NSpace>
-      </slot>
-      <slot v-if="!showHeaderBreadcrumb" name="menu" />
-      <div class="pl-8px" :class="bem('action')">
-        <NSpace :size="0" align="center" :wrap-item="false">
-          <!-- Search -->
-          <!-- Notify -->
-          <NPopover trigger="hover">
-            <template #trigger>
-              <Fullscreen v-if="getShowFullScreen" :class="bem('action__item')" />
-            </template>
-            <span>{{ unref(isFullscreen) ? $t('layout.header.tooltipExitFull') : $t('layout.header.tooltipEntryFull') }}</span>
-          </NPopover>
-          <NPopover trigger="hover">
-            <template #trigger>
-              <LLocalePicker v-if="getShowLocalePicker" :class="bem('action__item')" :reload="true" :show-text="false" />
-            </template>
-            <span>{{ $t('layout.header.tooltipLanguage') }}</span>
-          </NPopover>
-
-          <!-- UserDropDown -->
-          <NPopover trigger="hover">
-            <template #trigger>
-              <SettingButton v-if="getShowSetting" :class="bem('action__item')" />
-            </template>
-            <span>{{ $t('layout.header.tooltipSettings') }}</span>
-          </NPopover>
-        </NSpace>
-      </div>
-    </NSpace>
+    <NLayoutHeader :inverted="isHeaderDark">
+      <NSpace
+        v-if="getShowFullHeaderRef"
+        class="h-48px shadow"
+        :style="{ '--un-shadow-color': 'var(--n-border-color)' }"
+        justify="space-between"
+        align="center"
+      >
+        <slot name="logo">
+          <NSpace align="center" class="items-center" :size="0">
+            <Logo
+              v-if="showHeaderLogoRef"
+              :style="{
+                width: `${logoWidth}px`,
+                maxWidth: `${logoWidth}px`,
+              }"
+            />
+            <HeaderTrigger v-if="getShowHeaderTrigger" class="mx-2" />
+            <slot v-if="showHeaderBreadcrumb" name="breadcrumb">
+              <BreadCrumb />
+            </slot>
+          </NSpace>
+        </slot>
+        <slot v-if="!showHeaderBreadcrumb" name="menu" />
+        <div class="pl-8px" :class="bem('action')">
+          <NSpace :size="0" align="center" :wrap-item="false">
+            <!-- Search -->
+            <!-- Notify -->
+            <NPopover trigger="hover">
+              <template #trigger>
+                <Fullscreen v-if="getShowFullScreen" :class="bem('action__item')" />
+              </template>
+              <span>{{ unref(isFullscreen) ? $t('layout.header.tooltipExitFull') : $t('layout.header.tooltipEntryFull') }}</span>
+            </NPopover>
+            <NPopover trigger="hover">
+              <template #trigger>
+                <LLocalePicker v-if="getShowLocalePicker" :class="bem('action__item')" :reload="true" :show-text="false" />
+              </template>
+              <span>{{ $t('layout.header.tooltipLanguage') }}</span>
+            </NPopover>
+
+            <!-- UserDropDown -->
+            <NPopover trigger="hover">
+              <template #trigger>
+                <SettingButton v-if="getShowSetting" :class="bem('action__item')" />
+              </template>
+              <span>{{ $t('layout.header.tooltipSettings') }}</span>
+            </NPopover>
+          </NSpace>
+        </div>
+      </NSpace>
+    </NLayoutHeader>
+
     <!-- Multiple tab -->
     <template v-if="getShowHeaderMultipleTab">
       <slot name="tabs">
diff --git a/src/layouts/nlayout/components/menu/index.vue b/src/layouts/nlayout/components/menu/index.vue
index 20cc91d..bfe0209 100644
--- a/src/layouts/nlayout/components/menu/index.vue
+++ b/src/layouts/nlayout/components/menu/index.vue
@@ -16,8 +16,6 @@ const props = withDefaults(defineProps<{
   split: false,
 })
 
-const { isSidebarDark } = useAppTheme()
-
 const {
   menu,
   isMixSidebar,
@@ -25,8 +23,13 @@ const {
   sidebar,
   isSidebar,
   isMix,
+  isTopMenu,
 } = useAppConfig()
 
+const { isSidebarDark, isHeaderDark } = useAppTheme()
+
+const inverted = computed(() => unref(isTopMenu) ? unref(isHeaderDark) : unref(isSidebarDark))
+
 const {
   getTopMenuAlign,
   getShowFooterTrigger,
@@ -202,7 +205,7 @@ function clickMenu(key: any) {
         :root-indent="18"
         :mode="props.mode"
         :accordion="menu.accordion"
-        :inverted="mode === 'vertical' && isSidebarDark"
+        :inverted="inverted"
         @update:value="clickMenu"
       />
       <NEmpty
@@ -238,21 +241,5 @@ div:has(> div[class='layout-menu']) {
     flex: 1;
     flex-basis: auto;
   }
-
-  // &__menu:not(.n-menu--collapsed) {
-  //   .n-menu-item-content {
-  //     &::before {
-  //       left: 5px;
-  //       right: 5px;
-  //     }
-
-  //     &.n-menu-item-content--selected,
-  //     &:hover {
-  //       &::before {
-  //         border-left: 4px solid var(--primary-color);
-  //       }
-  //     }
-  //   }
-  // }
 }
 </style>
diff --git a/src/layouts/nlayout/components/setting/components/theme-editor.vue b/src/layouts/nlayout/components/setting/components/theme-editor.vue
index 06bdb1c..5681702 100644
--- a/src/layouts/nlayout/components/setting/components/theme-editor.vue
+++ b/src/layouts/nlayout/components/setting/components/theme-editor.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import ThemeColorPicker from './theme-color-picker.vue'
 import SwitchItem from './switch-item.vue'
-import { APP_PRESET_COLOR_LIST, HEADER_PRESET_BG_COLOR_LIST, ThemeChangeEnum } from '~/constants'
+import { APP_PRESET_COLOR_LIST, ThemeChangeEnum } from '~/constants'
 
-const { getHeaderBgColor } = useHeaderSetting()
 const {
   primaryColor,
   infoColor,
@@ -11,7 +10,9 @@ const {
   warningColor,
   errorColor,
   isSidebarDark,
+  isHeaderDark,
   toggleSidebarTheme,
+  toggleHeaderTheme,
 } = useAppTheme()
 </script>
 
@@ -43,16 +44,15 @@ const {
       :def="errorColor"
       :event="ThemeChangeEnum.THEME_ERROR_COLOR_CHANGE"
     />
-    <ThemeColorPicker
-      :title="$t('layout.setting.headerTheme')"
-      :def="getHeaderBgColor"
-      :event="ThemeChangeEnum.THEME_HEADER_BG_COLOR_CHANGE"
-      :color-list="HEADER_PRESET_BG_COLOR_LIST"
-    />
     <SwitchItem
       :title="$t('layout.setting.sidebarDark')"
       :value="isSidebarDark"
       :callback="toggleSidebarTheme"
     />
+    <SwitchItem
+      :title="$t('layout.setting.headerDark')"
+      :value="isHeaderDark"
+      :callback="toggleHeaderTheme"
+    />
   </NSpace>
 </template>
diff --git a/src/layouts/nlayout/components/tabs/index.vue b/src/layouts/nlayout/components/tabs/index.vue
index 91019e7..c835955 100644
--- a/src/layouts/nlayout/components/tabs/index.vue
+++ b/src/layouts/nlayout/components/tabs/index.vue
@@ -72,7 +72,7 @@ function handleClose(e: MouseEvent, route: RouteLocationNormalized) {
 </script>
 
 <template>
-  <div>
+  <div class="mt-2">
     <NTabs
       id="drag"
       v-model:value="activeTabName"
diff --git a/src/layouts/nlayout/left-menu.vue b/src/layouts/nlayout/left-menu.vue
index 6d0ebca..00650dd 100644
--- a/src/layouts/nlayout/left-menu.vue
+++ b/src/layouts/nlayout/left-menu.vue
@@ -63,11 +63,11 @@ const { isSidebarDark } = useAppTheme()
       </slot>
     </NLayoutSider>
     <NLayout>
-      <NLayoutHeader ref="headerRef">
+      <NLayout ref="headerRef">
         <slot name="header">
           <LayoutHeader />
         </slot>
-      </NLayoutHeader>
+      </NLayout>
       <NLayout :content-style="contentStyle">
         <NLayoutContent ref="contentRef" :content-style="mainStyle">
           <LayoutMain>
diff --git a/src/setting/design.ts b/src/setting/design.ts
new file mode 100644
index 0000000..36a95e0
--- /dev/null
+++ b/src/setting/design.ts
@@ -0,0 +1,10 @@
+import { APP_PRESET_COLOR_LIST, ThemeEnum } from '~/constants'
+
+export const namespace = 'nl'
+export const primaryColor = '#0960bd'
+export const darkMode = ThemeEnum.LIGHT
+
+export {
+  // app theme preset color
+  APP_PRESET_COLOR_LIST,
+}
diff --git a/src/setting/index.ts b/src/setting/index.ts
new file mode 100644
index 0000000..0632d75
--- /dev/null
+++ b/src/setting/index.ts
@@ -0,0 +1,2 @@
+export * from './design'
+export * from './project'
diff --git a/src/setting/project.ts b/src/setting/project.ts
new file mode 100644
index 0000000..fa7327d
--- /dev/null
+++ b/src/setting/project.ts
@@ -0,0 +1,107 @@
+import { primaryColor } from './'
+import {
+  AlignEnum,
+  ContentLayoutEnum,
+  MenuModeEnum,
+  MixSidebarTriggerEnum,
+  NavBarModeEnum,
+  PermissionModeEnum,
+  PlacementEnum,
+  RouterTransitionEnum,
+  SessionTimeoutProcessingEnum,
+  SettingButtonPositionEnum,
+  ThemeEnum,
+  TriggerEnum,
+} from '~/constants'
+
+// ! You need to clear the browser cache after the change
+export const projectSetting: DefineAppConfigOptions = {
+  theme: ThemeEnum.LIGHT,
+  navBarMode: NavBarModeEnum.SIDEBAR,
+  themeColor: primaryColor,
+  showThemeModeToggle: true,
+  openKeepAlive: true,
+  useOpenBackTop: true,
+  closeMessageOnSwitch: false,
+  removeAllHttpPending: true,
+  // permissionCacheType: CacheTypeEnum.LOCAL,
+  settingButtonPosition: SettingButtonPositionEnum.AUTO,
+  openSettingDrawer: false,
+  permissionMode: PermissionModeEnum.PERM,
+  sessionTimeoutProcessing: SessionTimeoutProcessingEnum.ROUTE_JUMP,
+  grayMode: false,
+  colorWeak: false,
+  lockTime: 0,
+  useLockPage: false,
+  canEmbedIFramePage: true,
+  closeMixSidebarOnChange: false,
+  sidebar: {
+    theme: ThemeEnum.DARK,
+    show: true,
+    visible: true,
+    fixed: false,
+    width: 210,
+    mixSidebarWidth: 80,
+    collapsedWidth: 48,
+    collapsed: false,
+    trigger: TriggerEnum.CENTER,
+  },
+  menu: {
+    show: true,
+    canDrag: false,
+    split: false,
+    mode: MenuModeEnum.VERTICAL,
+    accordion: false,
+    collapsedShowTitle: false,
+    mixSideTrigger: MixSidebarTriggerEnum.CLICK,
+    mixSideFixed: false,
+    topMenuAlign: AlignEnum.START,
+    dropdownPlacement: PlacementEnum.TOP_START,
+    subMenuWidth: 0,
+  },
+  header: {
+    theme: ThemeEnum.DARK,
+    show: true,
+    visible: true,
+    fixed: false,
+    height: 48,
+    showDoc: true,
+    showBreadCrumb: true,
+    showBreadCrumbIcon: true,
+    showFullScreen: true,
+    showNotice: true,
+    showSearch: true,
+    showLocalePicker: true,
+    showSetting: true,
+  },
+  logo: {
+    show: true,
+    visible: true,
+    showTitle: true,
+  },
+  tabTar: {
+    show: true,
+    visible: true,
+    height: 36,
+    cache: true,
+    canDrag: false,
+    showFold: true,
+    showQuick: true,
+    showRedo: true,
+  },
+  content: {
+    fullScreen: false,
+    mode: ContentLayoutEnum.FULL,
+  },
+  footer: {
+    height: 60,
+    show: false,
+    visible: false,
+  },
+  transition: {
+    enable: true,
+    basicTransition: RouterTransitionEnum.FADE_SIDE,
+    openPageLoading: true,
+    openNProgress: false,
+  },
+}
diff --git a/src/stores/app-config.ts b/src/stores/app-config.ts
index aa7fcdf..22f46fe 100644
--- a/src/stores/app-config.ts
+++ b/src/stores/app-config.ts
@@ -1,117 +1,13 @@
 import { acceptHMRUpdate, defineStore } from 'pinia'
 import {
-  AlignEnum,
-  ContentLayoutEnum,
-  HEADER_PRESET_BG_COLOR_LIST,
   MenuModeEnum,
-  MixSidebarTriggerEnum,
   NavBarModeEnum,
-  PermissionModeEnum,
-  PlacementEnum,
-  RouterTransitionEnum,
-  SIDE_BAR_BG_COLOR_LIST,
-  SessionTimeoutProcessingEnum,
-  SettingButtonPositionEnum,
-  ThemeEnum,
-  TriggerEnum,
 } from '~/constants'
+import { projectSetting } from '~/setting'
 import { _assign, _merge } from '~/utils'
 
-const initState: DefineAppConfigOptions = {
-  theme: ThemeEnum.LIGHT,
-  navBarMode: NavBarModeEnum.SIDEBAR,
-  themeColor: '',
-  showThemeModeToggle: true,
-  openKeepAlive: true,
-  useOpenBackTop: true,
-  closeMessageOnSwitch: false,
-  removeAllHttpPending: true,
-  // permissionCacheType: CacheTypeEnum.LOCAL,
-  settingButtonPosition: SettingButtonPositionEnum.AUTO,
-  openSettingDrawer: false,
-  permissionMode: PermissionModeEnum.PERM,
-  sessionTimeoutProcessing: SessionTimeoutProcessingEnum.ROUTE_JUMP,
-  grayMode: false,
-  colorWeak: false,
-  lockTime: 0,
-  useLockPage: false,
-  canEmbedIFramePage: true,
-  closeMixSidebarOnChange: false,
-  sidebar: {
-    theme: ThemeEnum.LIGHT,
-    show: true,
-    visible: true,
-    bgColor: SIDE_BAR_BG_COLOR_LIST[0],
-    fixed: false,
-    width: 210,
-    mixSidebarWidth: 80,
-    collapsedWidth: 48,
-    collapsed: false,
-    trigger: TriggerEnum.CENTER,
-  },
-  menu: {
-    show: true,
-    canDrag: false,
-    split: false,
-    mode: MenuModeEnum.VERTICAL,
-    accordion: false,
-    collapsedShowTitle: false,
-    mixSideTrigger: MixSidebarTriggerEnum.CLICK,
-    mixSideFixed: false,
-    topMenuAlign: AlignEnum.START,
-    dropdownPlacement: PlacementEnum.TOP_START,
-    subMenuWidth: 0,
-  },
-  header: {
-    theme: ThemeEnum.DARK,
-    show: true,
-    visible: true,
-    bgColor: HEADER_PRESET_BG_COLOR_LIST[0],
-    fixed: false,
-    height: 48,
-    showDoc: true,
-    showBreadCrumb: true,
-    showBreadCrumbIcon: true,
-    showFullScreen: true,
-    showNotice: true,
-    showSearch: true,
-    showLocalePicker: true,
-    showSetting: true,
-  },
-  logo: {
-    show: true,
-    visible: true,
-    showTitle: true,
-  },
-  tabTar: {
-    show: true,
-    visible: true,
-    height: 36,
-    cache: true,
-    canDrag: false,
-    showFold: true,
-    showQuick: true,
-    showRedo: true,
-  },
-  content: {
-    fullScreen: false,
-    mode: ContentLayoutEnum.FULL,
-  },
-  footer: {
-    height: 60,
-    show: false,
-    visible: false,
-  },
-  transition: {
-    enable: true,
-    basicTransition: RouterTransitionEnum.FADE_SIDE,
-    openPageLoading: true,
-    openNProgress: false,
-  },
-}
-
 export const useAppConfigStore = defineStore('APP_CONFIG', () => {
-  let state = $ref<DefineAppConfigOptions>(Object.assign({}, initState))
+  let state = $ref<DefineAppConfigOptions>(Object.assign({}, projectSetting))
 
   // computed
   const isSidebar = computed(() => state.navBarMode === NavBarModeEnum.SIDEBAR)
@@ -183,7 +79,7 @@ export const useAppConfigStore = defineStore('APP_CONFIG', () => {
   }
 }, {
   persist: {
-    paths: Object.keys(initState),
+    paths: Object.keys(projectSetting),
   },
 })
 
diff --git a/src/types/app-config.d.ts b/src/types/app-config.d.ts
index 7c4d9d3..08f650d 100644
--- a/src/types/app-config.d.ts
+++ b/src/types/app-config.d.ts
@@ -69,7 +69,6 @@ declare global {
     show: boolean
     visible: boolean
     fixed: boolean
-    bgColor: string
     collapsed: boolean
     width: number
     trigger: TriggerEnum
@@ -98,7 +97,6 @@ declare global {
     theme: ThemeEnum
     show: boolean
     visible: boolean
-    bgColor: string
     fixed: boolean
     showFullScreen: boolean
     showDoc: boolean