diff --git a/src/interface/theme.ts b/src/interface/theme.ts
index 705490f48..dc319a42f 100644
--- a/src/interface/theme.ts
+++ b/src/interface/theme.ts
@@ -1,4 +1,4 @@
-import { EnumThemeTabMode, EnumThemeHorizontalMenuPosition, EnumThemeAnimateMode } from '@/enum';
+import { EnumThemeLayoutMode, EnumThemeTabMode, EnumThemeHorizontalMenuPosition, EnumThemeAnimateMode } from '@/enum';
 import type { ThemeLayoutMode, ThemeTabMode, ThemeHorizontalMenuPosition, ThemeAnimateMode } from './enum';
 
 /** 主题相关类型 */
@@ -37,6 +37,12 @@ interface ThemeLayout {
   minWidth: number;
   /** 布局模式 */
   mode: ThemeLayoutMode;
+  /** 布局模式列表 */
+  modeList: ThemeLayoutModeList[];
+}
+interface ThemeLayoutModeList {
+  value: ThemeLayoutMode;
+  label: EnumThemeLayoutMode;
 }
 
 /** 其他主题颜色 */
diff --git a/src/layouts/Layout/index.vue b/src/layouts/Layout/index.vue
deleted file mode 100644
index 161f132a8..000000000
--- a/src/layouts/Layout/index.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-  <soybean-layout
-    :mode="mode"
-    :fixed-header-and-tab="theme.fixedHeaderAndTab"
-    :header-height="theme.header.height"
-    :tab-visible="theme.tab.visible"
-    :tab-height="theme.tab.height"
-    :sider-visible="siderVisible"
-    :sider-width="siderWidth"
-    :sider-collapsed-width="siderCollapsedWidth"
-    :sider-collapse="false"
-    :fixed-footer="theme.footer.fixed"
-  >
-    <template #header>
-      <global-header />
-    </template>
-    <template #tab>
-      <global-tab />
-    </template>
-    <template #sider>
-      <global-sider />
-    </template>
-    <global-content />
-    <template #footer>
-      <global-footer />
-    </template>
-  </soybean-layout>
-  <setting-drawer />
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { useAppStore, useThemeStore } from '@/store';
-import { SoybeanLayout } from '@/package';
-import { SettingDrawer, GlobalHeader, GlobalTab, GlobalSider, GlobalContent, GlobalFooter } from '../common';
-
-const app = useAppStore();
-const theme = useThemeStore();
-
-const siderVisible = computed(() => theme.layout.mode !== 'horizontal');
-
-type LayoutMode = 'vertical' | 'horizontal';
-const mode = computed(() => {
-  const vertical: LayoutMode = 'vertical';
-  const horizontal: LayoutMode = 'horizontal';
-  return theme.layout.mode.includes(vertical) ? vertical : horizontal;
-});
-
-const siderWidth = computed(() => {
-  const { width, mixWidth, mixChildMenuWidth } = theme.sider;
-  const isVerticalMix = theme.layout.mode === 'vertical-mix';
-  let w = isVerticalMix ? mixWidth : width;
-  if (isVerticalMix && app.mixSiderFixed) {
-    w += mixChildMenuWidth;
-  }
-  return w;
-});
-
-const siderCollapsedWidth = computed(() => {
-  const { collapsedWidth, mixCollapsedWidth, mixChildMenuWidth } = theme.sider;
-  const isVerticalMix = theme.layout.mode === 'vertical-mix';
-  let w = isVerticalMix ? mixCollapsedWidth : collapsedWidth;
-  if (isVerticalMix && app.mixSiderFixed) {
-    w += mixChildMenuWidth;
-  }
-  return w;
-});
-</script>
-<style scoped></style>
diff --git a/src/layouts/common/SettingDrawer/components/DarkMode/index.vue b/src/layouts/common/SettingDrawer/components/DarkMode/index.vue
new file mode 100644
index 000000000..1ea1e837a
--- /dev/null
+++ b/src/layouts/common/SettingDrawer/components/DarkMode/index.vue
@@ -0,0 +1,25 @@
+<template>
+  <n-divider title-placement="center">深色主题</n-divider>
+  <div class="flex-center">
+    <n-switch :value="theme.darkMode" @update:value="theme.setDarkMode">
+      <template #checked>
+        <icon-mdi-white-balance-sunny class="text-14px text-primary" />
+      </template>
+      <template #unchecked>
+        <icon-mdi-moon-waning-crescent class="text-14px text-primary" />
+      </template>
+    </n-switch>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { NDivider, NSwitch } from 'naive-ui';
+import { useThemeStore } from '@/store';
+
+const theme = useThemeStore();
+</script>
+<style scoped>
+:deep(.n-switch__rail) {
+  background-color: #000e1c !important;
+}
+</style>
diff --git a/src/layouts/common/SettingDrawer/components/LayoutMode/components/LayoutCheckbox.vue b/src/layouts/common/SettingDrawer/components/LayoutMode/components/LayoutCheckbox.vue
new file mode 100644
index 000000000..5ccf294a5
--- /dev/null
+++ b/src/layouts/common/SettingDrawer/components/LayoutMode/components/LayoutCheckbox.vue
@@ -0,0 +1,73 @@
+<template>
+  <div
+    class="border-2px rounded-6px cursor-pointer hover:border-primary"
+    :class="[checked ? 'border-primary' : 'border-transparent']"
+  >
+    <n-tooltip :placement="activeConfig.placement" trigger="hover">
+      <template #trigger>
+        <div class="layout-checkbox__shadow relative w-56px h-48px bg-white rounded-4px overflow-hidden">
+          <div class="absolute-lt bg-[#273352]" :class="activeConfig.menuClass"></div>
+          <div class="absolute-rb bg-[#f0f2f5]" :class="activeConfig.mainClass"></div>
+        </div>
+      </template>
+      <span>{{ label }}</span>
+    </n-tooltip>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { NTooltip } from 'naive-ui';
+import type { FollowerPlacement } from 'vueuc';
+import { EnumThemeLayoutMode } from '@/enum';
+import type { ThemeLayoutMode } from '@/interface';
+
+interface Props {
+  /** 布局模式 */
+  mode: ThemeLayoutMode;
+  /** 布局模式文本 */
+  label: EnumThemeLayoutMode;
+  /** 选中状态 */
+  checked: boolean;
+}
+
+const props = defineProps<Props>();
+
+type LayoutConfig = {
+  [key in ThemeLayoutMode]: {
+    placement: FollowerPlacement;
+    menuClass: string;
+    mainClass: string;
+  };
+};
+
+const layoutConfig: LayoutConfig = {
+  vertical: {
+    placement: 'bottom-start',
+    menuClass: 'w-1/3 h-full',
+    mainClass: 'w-2/3 h-3/4'
+  },
+  'vertical-mix': {
+    placement: 'bottom',
+    menuClass: 'w-1/4 h-full',
+    mainClass: 'w-2/3 h-3/4'
+  },
+  horizontal: {
+    placement: 'bottom',
+    menuClass: 'w-full h-1/4',
+    mainClass: 'w-full h-3/4'
+  },
+  'horizontal-mix': {
+    placement: 'bottom-end',
+    menuClass: 'w-full h-1/4',
+    mainClass: 'w-2/3 h-3/4'
+  }
+};
+
+const activeConfig = computed(() => layoutConfig[props.mode]);
+</script>
+<style scoped>
+.layout-checkbox__shadow {
+  box-shadow: 0 1px 2.5px rgba(0, 0, 0, 0.18);
+}
+</style>
diff --git a/src/layouts/common/SettingDrawer/components/LayoutMode/components/index.ts b/src/layouts/common/SettingDrawer/components/LayoutMode/components/index.ts
new file mode 100644
index 000000000..5397f1894
--- /dev/null
+++ b/src/layouts/common/SettingDrawer/components/LayoutMode/components/index.ts
@@ -0,0 +1,3 @@
+import LayoutCheckbox from './LayoutCheckbox.vue';
+
+export { LayoutCheckbox };
diff --git a/src/layouts/common/SettingDrawer/components/LayoutMode/index.vue b/src/layouts/common/SettingDrawer/components/LayoutMode/index.vue
new file mode 100644
index 000000000..e2851c7be
--- /dev/null
+++ b/src/layouts/common/SettingDrawer/components/LayoutMode/index.vue
@@ -0,0 +1,22 @@
+<template>
+  <n-divider title-placement="center">布局模式</n-divider>
+  <n-space justify="space-between">
+    <layout-checkbox
+      v-for="item in theme.layout.modeList"
+      :key="item.value"
+      :mode="item.value"
+      :label="item.label"
+      :checked="item.value === theme.layout.mode"
+      @click="theme.setLayoutMode(item.value)"
+    />
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { NDivider, NSpace } from 'naive-ui';
+import { useThemeStore } from '@/store';
+import { LayoutCheckbox } from './components';
+
+const theme = useThemeStore();
+</script>
+<style scoped></style>
diff --git a/src/layouts/common/SettingDrawer/components/ThemeColorSelect/components/ColorCheckbox.vue b/src/layouts/common/SettingDrawer/components/ThemeColorSelect/components/ColorCheckbox.vue
new file mode 100644
index 000000000..fe66731f4
--- /dev/null
+++ b/src/layouts/common/SettingDrawer/components/ThemeColorSelect/components/ColorCheckbox.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="flex-center w-20px h-20px rounded-2px shadow cursor-pointer" :style="{ backgroundColor: color }">
+    <icon-ic-outline-check v-if="checked" :class="[iconClass, isWhite ? 'text-gray-700' : 'text-white']" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+interface Props {
+  /** 颜色 */
+  color: string;
+  /** 是否选中 */
+  checked: boolean;
+  /** 图标的class */
+  iconClass?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  iconClass: 'text-14px'
+});
+
+const whiteColors = ['#ffffff', '#fff', 'rgb(255,255,255)'];
+const isWhite = computed(() => whiteColors.includes(props.color));
+</script>
+<style scoped></style>
diff --git a/src/layouts/common/SettingDrawer/components/ThemeColorSelect/components/ColorModal.vue b/src/layouts/common/SettingDrawer/components/ThemeColorSelect/components/ColorModal.vue
new file mode 100644
index 000000000..3695fcc7c
--- /dev/null
+++ b/src/layouts/common/SettingDrawer/components/ThemeColorSelect/components/ColorModal.vue
@@ -0,0 +1,49 @@
+<template>
+  <n-modal :show="visible" preset="card" class="w-640px h-480px" @close="handleClose">
+    <div class="flex-x-center">
+      <n-gradient-text type="primary" :size="24">中国传统颜色</n-gradient-text>
+    </div>
+    <n-tabs>
+      <n-tab-pane v-for="item in traditionColors" :key="item.label" :name="item.label" :tab="item.label">
+        <n-grid :cols="8" :x-gap="16" :y-gap="8">
+          <n-grid-item v-for="i in item.data" :key="i.label">
+            <color-checkbox
+              class="!w-full !h-36px !rounded-4px"
+              :color="i.color"
+              :checked="i.color === theme.themeColor"
+              icon-class="text-20px"
+              @click="theme.setThemeColor(i.color)"
+            />
+            <p class="text-center">{{ i.label }}</p>
+          </n-grid-item>
+        </n-grid>
+      </n-tab-pane>
+    </n-tabs>
+  </n-modal>
+</template>
+
+<script setup lang="ts">
+import { NModal, NGradientText, NTabs, NTabPane, NGrid, NGridItem } from 'naive-ui';
+import { traditionColors } from '@/settings';
+import { useThemeStore } from '@/store';
+import ColorCheckbox from './ColorCheckbox.vue';
+
+interface Props {
+  visible: boolean;
+}
+
+interface Emits {
+  (e: 'close'): void;
+}
+
+defineProps<Props>();
+
+const emit = defineEmits<Emits>();
+
+const theme = useThemeStore();
+
+function handleClose() {
+  emit('close');
+}
+</script>
+<style scoped></style>
diff --git a/src/layouts/common/SettingDrawer/components/ThemeColorSelect/components/index.ts b/src/layouts/common/SettingDrawer/components/ThemeColorSelect/components/index.ts
new file mode 100644
index 000000000..008d99013
--- /dev/null
+++ b/src/layouts/common/SettingDrawer/components/ThemeColorSelect/components/index.ts
@@ -0,0 +1,4 @@
+import ColorCheckbox from './ColorCheckbox.vue';
+import ColorModal from './ColorModal.vue';
+
+export { ColorCheckbox, ColorModal };
diff --git a/src/layouts/common/SettingDrawer/components/ThemeColorSelect/index.vue b/src/layouts/common/SettingDrawer/components/ThemeColorSelect/index.vue
new file mode 100644
index 000000000..3b052d7f3
--- /dev/null
+++ b/src/layouts/common/SettingDrawer/components/ThemeColorSelect/index.vue
@@ -0,0 +1,26 @@
+<template>
+  <n-divider title-placement="center">系统主题</n-divider>
+  <n-grid :cols="8" :x-gap="8" :y-gap="12">
+    <n-grid-item v-for="color in theme.themeColorList" :key="color" class="flex-x-center">
+      <color-checkbox :color="color" :checked="color === theme.themeColor" @click="theme.setThemeColor(color)" />
+    </n-grid-item>
+  </n-grid>
+  <n-button :block="true" :type="otherColorBtnType" class="mt-12px" @click="openModal">更多颜色</n-button>
+  <color-modal :visible="visible" @close="closeModal" />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { NDivider, NGrid, NGridItem, NButton } from 'naive-ui';
+import { useThemeStore } from '@/store';
+import { useBoolean } from '@/hooks';
+import { ColorCheckbox, ColorModal } from './components';
+
+const theme = useThemeStore();
+
+const { bool: visible, setTrue: openModal, setFalse: closeModal } = useBoolean();
+
+const isInOther = computed(() => !theme.themeColorList.includes(theme.themeColor));
+const otherColorBtnType = computed(() => (isInOther.value ? 'primary' : 'default'));
+</script>
+<style scoped></style>
diff --git a/src/layouts/common/SettingDrawer/components/index.ts b/src/layouts/common/SettingDrawer/components/index.ts
index 36bb4699d..45552df0f 100644
--- a/src/layouts/common/SettingDrawer/components/index.ts
+++ b/src/layouts/common/SettingDrawer/components/index.ts
@@ -1,3 +1,6 @@
 import DrawerButton from './DrawerButton/index.vue';
+import DarkMode from './DarkMode/index.vue';
+import LayoutMode from './LayoutMode/index.vue';
+import ThemeColorSelect from './ThemeColorSelect/index.vue';
 
-export { DrawerButton };
+export { DarkMode, DrawerButton, LayoutMode, ThemeColorSelect };
diff --git a/src/layouts/common/SettingDrawer/index.vue b/src/layouts/common/SettingDrawer/index.vue
index 6c427f257..dd022ab63 100644
--- a/src/layouts/common/SettingDrawer/index.vue
+++ b/src/layouts/common/SettingDrawer/index.vue
@@ -1,6 +1,10 @@
 <template>
   <n-drawer :show="app.settingDrawerVisible" display-directive="show" :width="330" @mask-click="app.closeSettingDrawer">
-    <n-drawer-content title="主题配置" :native-scrollbar="false"></n-drawer-content>
+    <n-drawer-content title="主题配置" :native-scrollbar="false">
+      <dark-mode />
+      <layout-mode />
+      <theme-color-select />
+    </n-drawer-content>
   </n-drawer>
   <drawer-button />
 </template>
@@ -8,7 +12,7 @@
 <script setup lang="ts">
 import { NDrawer, NDrawerContent } from 'naive-ui';
 import { useAppStore } from '@/store';
-import { DrawerButton } from './components';
+import { DrawerButton, DarkMode, LayoutMode, ThemeColorSelect } from './components';
 
 const app = useAppStore();
 </script>
diff --git a/src/layouts/index.ts b/src/layouts/index.ts
index 700257e60..90c3e3699 100644
--- a/src/layouts/index.ts
+++ b/src/layouts/index.ts
@@ -1,5 +1,4 @@
-import Layout from './Layout/index.vue';
 import BasicLayout from './BasicLayout/index.vue';
 import BlankLayout from './BlankLayout/index.vue';
 
-export { Layout, BasicLayout, BlankLayout };
+export { BasicLayout, BlankLayout };
diff --git a/src/settings/color.json b/src/settings/color.json
new file mode 100644
index 000000000..42b6c5759
--- /dev/null
+++ b/src/settings/color.json
@@ -0,0 +1,678 @@
+[
+	{
+			"label": "红色系",
+			"data": [
+					{
+							"label": "绾",
+							"color": "#A98175"
+					},
+					{
+							"label": "檀",
+							"color": "#B36D61"
+					},
+					{
+							"label": "栗色",
+							"color": "#60281E"
+					},
+					{
+							"label": "玄",
+							"color": "#622A1D"
+					},
+					{
+							"label": "胭脂",
+							"color": "#9D2933"
+					},
+					{
+							"label": "殷红",
+							"color": "#BE002F"
+					},
+					{
+							"label": "枣红",
+							"color": "#C32136"
+					},
+					{
+							"label": "赤",
+							"color": "#C3272B"
+					},
+					{
+							"label": "绯红",
+							"color": "#C83C23"
+					},
+					{
+							"label": "赫赤",
+							"color": "#C91F37"
+					},
+					{
+							"label": "樱桃红",
+							"color": "#C93756"
+					},
+					{
+							"label": "茜色",
+							"color": "#CB3A56"
+					},
+					{
+							"label": "海棠红",
+							"color": "#DB5A6B"
+					},
+					{
+							"label": "酡红",
+							"color": "#DC3023"
+					},
+					{
+							"label": "妃色",
+							"color": "#ED5736"
+					},
+					{
+							"label": "嫣红",
+							"color": "#EF7A82"
+					},
+					{
+							"label": "品红",
+							"color": "#F00056"
+					},
+					{
+							"label": "石榴红",
+							"color": "#F20C00"
+					},
+					{
+							"label": "银红",
+							"color": "#F05654"
+					},
+					{
+							"label": "彤",
+							"color": "#F35336"
+					},
+					{
+							"label": "桃红",
+							"color": "#F47983"
+					},
+					{
+							"label": "酡颜",
+							"color": "#F9906F"
+					},
+					{
+							"label": "洋红",
+							"color": "#FF0097"
+					},
+					{
+							"label": "大红",
+							"color": "#FF2121"
+					},
+					{
+							"label": "火红",
+							"color": "#FF2D51"
+					},
+					{
+							"label": "炎",
+							"color": "#FF3300"
+					},
+					{
+							"label": "朱红",
+							"color": "#FF4C00"
+					},
+					{
+							"label": "丹",
+							"color": "#FF4E20"
+					},
+					{
+							"label": "粉红",
+							"color": "#FFB3A7"
+					},
+					{
+							"label": "藕荷",
+							"color": "#E4C6D0"
+					},
+					{
+							"label": "藕",
+							"color": "#EDD1D8"
+					},
+					{
+							"label": "水红",
+							"color": "#F3D3E7"
+					},
+					{
+							"label": "鱼肚白",
+							"color": "#FCEFE8"
+					}
+			]
+	},
+	{
+			"label": "橙色系",
+			"data": [
+					{
+							"label": "褐色",
+							"color": "#6E511E"
+					},
+					{
+							"label": "棕黑",
+							"color": "#7C4B00"
+					},
+					{
+							"label": "赭色",
+							"color": "#955539"
+					},
+					{
+							"label": "棕红",
+							"color": "#9B4400"
+					},
+					{
+							"label": "赭",
+							"color": "#9C5333"
+					},
+					{
+							"label": "驼色",
+							"color": "#A88462"
+					},
+					{
+							"label": "棕色",
+							"color": "#B25D25"
+					},
+					{
+							"label": "茶色",
+							"color": "#B35C44"
+					},
+					{
+							"label": "琥珀",
+							"color": "#CA6924"
+					},
+					{
+							"label": "黄栌",
+							"color": "#E29C45"
+					},
+					{
+							"label": "橙色",
+							"color": "#FA8C35"
+					},
+					{
+							"label": "橘红",
+							"color": "#FF7500"
+					},
+					{
+							"label": "橘黄",
+							"color": "#FF8936"
+					},
+					{
+							"label": "杏红",
+							"color": "#FF8C31"
+					},
+					{
+							"label": "橙黄",
+							"color": "#FFA400"
+					},
+					{
+							"label": "杏黄",
+							"color": "#FFA631"
+					},
+					{
+							"label": "姜黄",
+							"color": "#FFC773"
+					}
+			]
+	},
+	{
+			"label": "黄色系",
+			"data": [
+					{
+							"label": "黧",
+							"color": "#5D513C"
+					},
+					{
+							"label": "黎",
+							"color": "#75664D"
+					},
+					{
+							"label": "棕绿",
+							"color": "#827100"
+					},
+					{
+							"label": "秋色",
+							"color": "#896C39"
+					},
+					{
+							"label": "苍黄",
+							"color": "#A29B7C"
+					},
+					{
+							"label": "乌金",
+							"color": "#A78E44"
+					},
+					{
+							"label": "棕黄",
+							"color": "#AE7000"
+					},
+					{
+							"label": "昏黄",
+							"color": "#C89B40"
+					},
+					{
+							"label": "枯黄",
+							"color": "#D3B17D"
+					},
+					{
+							"label": "秋香色",
+							"color": "#D9B611"
+					},
+					{
+							"label": "金",
+							"color": "#EACD76"
+					},
+					{
+							"label": "牙",
+							"color": "#EEDEB0"
+					},
+					{
+							"label": "缃色",
+							"color": "#F0C239"
+					},
+					{
+							"label": "赤金",
+							"color": "#F2BE45"
+					},
+					{
+							"label": "鸭黄",
+							"color": "#FAFF72"
+					},
+					{
+							"label": "鹅黄",
+							"color": "#FFF143"
+					},
+					{
+							"label": "缟",
+							"color": "#F2ECDE"
+					},
+					{
+							"label": "象牙白",
+							"color": "#FFFBF0"
+					}
+			]
+	},
+	{
+			"label": "绿色系",
+			"data": [
+					{
+							"label": "竹青",
+							"color": "#789262"
+					},
+					{
+							"label": "黯",
+							"color": "#41555D"
+					},
+					{
+							"label": "黛绿",
+							"color": "#426666"
+					},
+					{
+							"label": "松花绿",
+							"color": "#057748"
+					},
+					{
+							"label": "绿沈",
+							"color": "#0C8918"
+					},
+					{
+							"label": "深绿",
+							"color": "#009900"
+					},
+					{
+							"label": "青葱",
+							"color": "#0AA344"
+					},
+					{
+							"label": "铜绿",
+							"color": "#549688"
+					},
+					{
+							"label": "苍翠",
+							"color": "#519A73"
+					},
+					{
+							"label": "松柏绿",
+							"color": "#21A675"
+					},
+					{
+							"label": "葱青",
+							"color": "#0EB83A"
+					},
+					{
+							"label": "油绿",
+							"color": "#00BC12"
+					},
+					{
+							"label": "绿",
+							"color": "#00E500"
+					},
+					{
+							"label": "草绿",
+							"color": "#40DE5A"
+					},
+					{
+							"label": "豆青",
+							"color": "#96CE54"
+					},
+					{
+							"label": "豆绿",
+							"color": "#9ED048"
+					},
+					{
+							"label": "葱绿",
+							"color": "#9ED900"
+					},
+					{
+							"label": "葱黄",
+							"color": "#A3D900"
+					},
+					{
+							"label": "柳绿",
+							"color": "#AFDD22"
+					},
+					{
+							"label": "嫩绿",
+							"color": "#BDDD22"
+					},
+					{
+							"label": "柳黄",
+							"color": "#C9DD22"
+					},
+					{
+							"label": "松花",
+							"color": "#BCE672"
+					},
+					{
+							"label": "樱草色",
+							"color": "#EAFF56"
+					}
+			]
+	},
+	{
+			"label": "青色系",
+			"data": [
+					{
+							"label": "水",
+							"color": "#88ADA6"
+					},
+					{
+							"label": "青碧",
+							"color": "#48C0A3"
+					},
+					{
+							"label": "碧",
+							"color": "#1BD1A5"
+					},
+					{
+							"label": "石青",
+							"color": "#7BCFA6"
+					},
+					{
+							"label": "青翠",
+							"color": "#00E079"
+					},
+					{
+							"label": "青",
+							"color": "#00E09E"
+					},
+					{
+							"label": "碧绿",
+							"color": "#2ADD9C"
+					},
+					{
+							"label": "玉",
+							"color": "#2EDFA3"
+					},
+					{
+							"label": "翡翠",
+							"color": "#3DE1AD"
+					},
+					{
+							"label": "缥",
+							"color": "#7FECAD"
+					},
+					{
+							"label": "碧蓝",
+							"color": "#3EEDE7"
+					},
+					{
+							"label": "湖绿",
+							"color": "#25F8CD"
+					},
+					{
+							"label": "艾绿",
+							"color": "#A4E2C6"
+					},
+					{
+							"label": "青白",
+							"color": "#C0EBD7"
+					},
+					{
+							"label": "水绿",
+							"color": "#D4F2E7"
+					},
+					{
+							"label": "鸭卵青",
+							"color": "#E0EEE8"
+					},
+					{
+							"label": "素",
+							"color": "#E0F0E9"
+					},
+					{
+							"label": "荼白",
+							"color": "#F3F9F1"
+					}
+			]
+	},
+	{
+			"label": "蓝色系",
+			"data": [
+					{
+							"label": "藏蓝",
+							"color": "#3B2E7E"
+					},
+					{
+							"label": "宝蓝",
+							"color": "#4B5CC4"
+					},
+					{
+							"label": "绀青",
+							"color": "#003371"
+					},
+					{
+							"label": "藏青",
+							"color": "#2E4E7E"
+					},
+					{
+							"label": "靛蓝",
+							"color": "#065279"
+					},
+					{
+							"label": "靛青",
+							"color": "#177CB0"
+					},
+					{
+							"label": "群青",
+							"color": "#4C8DAE"
+					},
+					{
+							"label": "蓝",
+							"color": "#44CEF6"
+					},
+					{
+							"label": "湖蓝",
+							"color": "#30DFF3"
+					},
+					{
+							"label": "蔚蓝",
+							"color": "#70F3FF"
+					},
+					{
+							"label": "月白",
+							"color": "#D6ECF0"
+					},
+					{
+							"label": "水蓝",
+							"color": "#D2F0F4"
+					},
+					{
+							"label": "莹白",
+							"color": "#E3F9FD"
+					},
+					{
+							"label": "雪白",
+							"color": "#F0FCFF"
+					}
+			]
+	},
+	{
+			"label": "紫色系",
+			"data": [
+					{
+							"label": "黛",
+							"color": "#4A4266"
+					},
+					{
+							"label": "紫檀",
+							"color": "#4C211B"
+					},
+					{
+							"label": "紫棠",
+							"color": "#56004F"
+					},
+					{
+							"label": "黛紫",
+							"color": "#574266"
+					},
+					{
+							"label": "绛紫",
+							"color": "#8C4356"
+					},
+					{
+							"label": "紫酱",
+							"color": "#815463"
+					},
+					{
+							"label": "酱紫",
+							"color": "#815476"
+					},
+					{
+							"label": "黝",
+							"color": "#6B6882"
+					},
+					{
+							"label": "青莲",
+							"color": "#801DAE"
+					},
+					{
+							"label": "紫",
+							"color": "#8D4BBB"
+					},
+					{
+							"label": "雪青",
+							"color": "#B0A4E3"
+					},
+					{
+							"label": "丁香",
+							"color": "#CCA4E3"
+					}
+			]
+	},
+	{
+			"label": "灰色系",
+			"data": [
+					{
+							"label": "黑",
+							"color": "#000000"
+					},
+					{
+							"label": "漆黑",
+							"color": "#161823"
+					},
+					{
+							"label": "象牙黑",
+							"color": "#312520"
+					},
+					{
+							"label": "乌黑",
+							"color": "#392F41"
+					},
+					{
+							"label": "玄青",
+							"color": "#3D3B4F"
+					},
+					{
+							"label": "缁",
+							"color": "#493131"
+					},
+					{
+							"label": "黝黑",
+							"color": "#665757"
+					},
+					{
+							"label": "鸦青",
+							"color": "#424C50"
+					},
+					{
+							"label": "黛蓝",
+							"color": "#425066"
+					},
+					{
+							"label": "苍黑",
+							"color": "#395260"
+					},
+					{
+							"label": "墨",
+							"color": "#50616D"
+					},
+					{
+							"label": "灰",
+							"color": "#808080"
+					},
+					{
+							"label": "苍",
+							"color": "#75878A"
+					},
+					{
+							"label": "墨灰",
+							"color": "#758A99"
+					},
+					{
+							"label": "苍青",
+							"color": "#7397AB"
+					},
+					{
+							"label": "蓝灰",
+							"color": "#A1AFC9"
+					},
+					{
+							"label": "老银",
+							"color": "#BACAC6"
+					},
+					{
+							"label": "蟹壳青",
+							"color": "#BBCDC5"
+					},
+					{
+							"label": "苍白",
+							"color": "#D1D9E0"
+					},
+					{
+							"label": "淡青",
+							"color": "#D3E0F3"
+					},
+					{
+							"label": "银白",
+							"color": "#E9E7EF"
+					},
+					{
+							"label": "霜",
+							"color": "#E9F1F6"
+					},
+					{
+							"label": "铅白",
+							"color": "#F0F0F4"
+					},
+					{
+							"label": "精白",
+							"color": "#FFFFFF"
+					}
+			]
+	}
+]
diff --git a/src/settings/color.ts b/src/settings/color.ts
new file mode 100644
index 000000000..256e6dcf9
--- /dev/null
+++ b/src/settings/color.ts
@@ -0,0 +1,13 @@
+import colorJson from './color.json';
+
+interface TraditionColorDetail {
+  label: string;
+  color: string;
+}
+interface TraditionColor {
+  label: string;
+  data: TraditionColorDetail[];
+}
+
+/** 中国传统颜色 */
+export const traditionColors = colorJson as TraditionColor[];
diff --git a/src/settings/index.ts b/src/settings/index.ts
index 7b1f54ecf..dafbcb8a7 100644
--- a/src/settings/index.ts
+++ b/src/settings/index.ts
@@ -1 +1,2 @@
 export * from './theme';
+export * from './color';
diff --git a/src/settings/theme.ts b/src/settings/theme.ts
index 8b4b9ab95..8fe1b0f82 100644
--- a/src/settings/theme.ts
+++ b/src/settings/theme.ts
@@ -1,14 +1,15 @@
-import { EnumThemeTabMode, EnumThemeHorizontalMenuPosition, EnumThemeAnimateMode } from '@/enum';
+import { EnumThemeLayoutMode, EnumThemeTabMode, EnumThemeHorizontalMenuPosition, EnumThemeAnimateMode } from '@/enum';
 import type { ThemeSetting } from '@/interface';
 
 const themeColorList = [
-  '#409EFF',
-  '#2d8cf0',
-  '#0960bd',
+  '#1890ff',
   '#009688',
   '#536dfe',
+  '#409EFF',
   '#ff5c93',
+  '#0960bd',
   '#ee4f12',
+  '#2d8cf0',
   '#0096c7',
   '#9c27b0',
   '#ff9800',
@@ -18,7 +19,7 @@ const themeColorList = [
   '#171010',
   '#78DEC7',
   '#1768AC',
-  '#FB9300',
+  '#fadb14',
   '#FC5404'
 ];
 
@@ -26,15 +27,21 @@ const defaultThemeSetting: ThemeSetting = {
   darkMode: false,
   layout: {
     minWidth: 900,
-    mode: 'vertical'
+    mode: 'vertical',
+    modeList: [
+      { value: 'vertical', label: EnumThemeLayoutMode.vertical },
+      { value: 'vertical-mix', label: EnumThemeLayoutMode['vertical-mix'] },
+      { value: 'horizontal', label: EnumThemeLayoutMode.horizontal },
+      { value: 'horizontal-mix', label: EnumThemeLayoutMode['horizontal-mix'] }
+    ]
   },
   themeColor: themeColorList[0],
   themeColorList,
   otherColor: {
     info: '#2080f0',
-    success: '#67C23A',
-    warning: '#E6A23C',
-    error: '#F56C6C'
+    success: '#52c41a',
+    warning: '#faad14',
+    error: '#f5222d'
   },
   fixedHeaderAndTab: true,
   showReload: true,
diff --git a/src/store/modules/theme/helpers.ts b/src/store/modules/theme/helpers.ts
index 87d7ed466..4dc588f4f 100644
--- a/src/store/modules/theme/helpers.ts
+++ b/src/store/modules/theme/helpers.ts
@@ -63,14 +63,27 @@ type ThemeVars = Exclude<GlobalThemeOverrides['common'], undefined>;
 type ThemeVarsKeys = keyof ThemeVars;
 
 /** 添加css vars至html */
-export function addThemeCssVarsToHtml(themeVars: ThemeVars) {
+export function addThemeCssVarsToHtml(themeVars: ThemeVars, action: 'add' | 'update' = 'add') {
   const keys = Object.keys(themeVars) as ThemeVarsKeys[];
   const style: string[] = [];
   keys.forEach(key => {
     style.push(`--${kebabCase(key)}: ${themeVars[key]}`);
   });
   const styleStr = style.join(';');
-  document.documentElement.style.cssText = styleStr;
+  if (action === 'add') {
+    document.documentElement.style.cssText = styleStr;
+  } else {
+    document.documentElement.style.cssText += styleStr;
+  }
+}
+
+/**
+ * 根据主题颜色更新css vars
+ * @param primaryColor
+ */
+export function updateThemeCssVarsByPrimary(primaryColor: string) {
+  const themeColor = getThemeColors([['primary', primaryColor]]);
+  addThemeCssVarsToHtml(themeColor, 'update');
 }
 
 /** windicss 暗黑模式 */
diff --git a/src/store/modules/theme/hooks.ts b/src/store/modules/theme/hooks.ts
index 8d213d82a..aaccbc1db 100644
--- a/src/store/modules/theme/hooks.ts
+++ b/src/store/modules/theme/hooks.ts
@@ -4,7 +4,7 @@ import { useOsTheme } from 'naive-ui';
 import { useElementSize } from '@vueuse/core';
 import { objectAssign } from '@/utils';
 import type { ThemeSetting, ThemeLayoutMode, ThemeTabMode, ThemeAnimateMode } from '@/interface';
-import { handleWindicssDarkMode } from './helpers';
+import { handleWindicssDarkMode, updateThemeCssVarsByPrimary } from './helpers';
 
 export interface LayoutFunc {
   /** 设置布局最小宽度 */
@@ -251,3 +251,16 @@ export function setupHiddenScroll(minWidthOfLayout: ComputedRef<number>) {
     stopHandle();
   });
 }
+
+/**
+ * 监听主题颜色的变化
+ * @param themeColor
+ */
+export function themeColorWatcher(themeColor: Ref<string>) {
+  const stopHandle = watch(themeColor, newValue => {
+    updateThemeCssVarsByPrimary(newValue);
+  });
+  onUnmounted(() => {
+    stopHandle();
+  });
+}
diff --git a/src/store/modules/theme/index.ts b/src/store/modules/theme/index.ts
index 229f36056..4cba7f26a 100644
--- a/src/store/modules/theme/index.ts
+++ b/src/store/modules/theme/index.ts
@@ -17,7 +17,8 @@ import {
   usePageFunc,
   osThemeWatcher,
   setupWindicssDarkMode,
-  setupHiddenScroll
+  setupHiddenScroll,
+  themeColorWatcher
 } from './hooks';
 import type { LayoutFunc, HeaderFunc, TabFunc, SiderFunc, FooterFunc, PageFunc } from './hooks';
 
@@ -169,6 +170,7 @@ export const useThemeStore = defineStore('theme-store', () => {
     handleAdaptOsTheme();
     setupWindicssDarkMode(darkMode);
     setupHiddenScroll(computed(() => layout.minWidth));
+    themeColorWatcher(themeColor);
   }
 
   init();
diff --git a/src/views/dashboard/analysis/index.vue b/src/views/dashboard/analysis/index.vue
index b519b5b71..bed1c34bb 100644
--- a/src/views/dashboard/analysis/index.vue
+++ b/src/views/dashboard/analysis/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="h-[120%]">
+  <div>
     <h3>DashboardAnalysis</h3>
     <router-link to="/about">about</router-link>
     <router-link to="/dashboard/workbench">workbench</router-link>