diff --git a/index.html b/index.html
index 40dcdf5..dcc01d3 100644
--- a/index.html
+++ b/index.html
@@ -1,13 +1,13 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/icons/snow.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>DC-Admin</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
-</html>
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/assets/svgs/snow.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DC-Admin</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/src/App.vue b/src/App.vue
index c4e5a8e..61f911b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,9 +6,17 @@
 
 <script setup lang="ts">
 import { loadingPage } from "@/utils/loading-page";
+import { useRoutingMethod } from "@/hooks/useThemeMethods";
 
+// 初始化主题
+const onTheme = () => {
+  let { darkMode } = useRoutingMethod();
+  darkMode();
+};
+onTheme();
+
+// 加载动画
 loadingPage.start();
-
 onMounted(() => {
   loadingPage.done(200);
 });
diff --git a/src/hooks/useThemeMethods.ts b/src/hooks/useThemeMethods.ts
new file mode 100644
index 0000000..c5ab8b1
--- /dev/null
+++ b/src/hooks/useThemeMethods.ts
@@ -0,0 +1,22 @@
+import { storeToRefs } from "pinia";
+import { useThemeConfig } from "@/store/modules/theme-config";
+/* 主题处理hooks */
+export const useRoutingMethod = () => {
+  /**
+   * @description: 暗黑模式
+   */
+  const darkMode = () => {
+    const themeStore = useThemeConfig();
+    const { darkMode } = storeToRefs(themeStore);
+    if (darkMode.value) {
+      // 设置为暗黑主题
+      document.body.setAttribute("arco-theme", "dark");
+    } else {
+      // 恢复亮色主题
+      document.body.removeAttribute("arco-theme");
+    }
+  };
+  return {
+    darkMode
+  };
+};
diff --git a/src/layout/components/Aside/index.vue b/src/layout/components/Aside/index.vue
index 3877aa5..02ef3be 100644
--- a/src/layout/components/Aside/index.vue
+++ b/src/layout/components/Aside/index.vue
@@ -75,4 +75,9 @@ const { collapsed } = storeToRefs(themeStore);
     display: none;
   }
 }
+
+// 去掉sider背景
+.arco-layout-sider {
+  background: unset;
+}
 </style>
diff --git a/src/layout/components/Header/index.vue b/src/layout/components/Header/index.vue
index d48be50..60b9560 100644
--- a/src/layout/components/Header/index.vue
+++ b/src/layout/components/Header/index.vue
@@ -27,10 +27,11 @@
         </template>
       </a-dropdown>
       <!-- 切换黑夜模式 -->
-      <a-tooltip :content="$t(`language.switch-to-night-mode`)">
-        <a-button size="mini" type="text" class="icon_btn">
+      <a-tooltip :content="$t(`language.${!darkMode ? 'switch-to-night-mode' : 'switch-to-daytime-mode'}`)">
+        <a-button size="mini" type="text" class="icon_btn" @click="onNightMode">
           <template #icon>
-            <icon-sun-fill :size="18" />
+            <icon-sun-fill :size="18" v-if="!darkMode" />
+            <icon-moon-fill :size="18" v-else />
           </template>
         </a-button>
       </a-tooltip>
@@ -124,12 +125,25 @@ import { useThemeConfig } from "@/store/modules/theme-config";
 const i18n = useI18n();
 const router = useRouter();
 const themeStore = useThemeConfig();
-const { collapsed, language } = storeToRefs(themeStore);
+const { collapsed, language, darkMode } = storeToRefs(themeStore);
 
 const onCollapsed = () => {
   themeStore.setCollapsed(!collapsed.value);
 };
 
+// 黑暗模式
+const onNightMode = () => {
+  darkMode.value = !darkMode.value;
+  if (darkMode.value) {
+    // 设置为暗黑主题
+    document.body.setAttribute("arco-theme", "dark");
+  } else {
+    // 恢复亮色主题
+    document.body.removeAttribute("arco-theme");
+  }
+  console.log("黑暗模式", darkMode.value);
+};
+
 // 语言
 const onLange = (e: string) => {
   if (e === "Chinese" || e === "中文") {
diff --git a/src/layout/components/Menu/index.vue b/src/layout/components/Menu/index.vue
index 9216f81..a5a2324 100644
--- a/src/layout/components/Menu/index.vue
+++ b/src/layout/components/Menu/index.vue
@@ -40,4 +40,11 @@ const onMenuItem = (key: string) => {
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+// .arco-menu-light {
+//   background: unset;
+// }
+// .arco-menu-light .arco-menu-item {
+//   background: unset;
+// }
+</style>
diff --git a/src/store/modules/theme-config.ts b/src/store/modules/theme-config.ts
index 77f4636..7ab9b13 100644
--- a/src/store/modules/theme-config.ts
+++ b/src/store/modules/theme-config.ts
@@ -10,7 +10,8 @@ export const useThemeConfig = defineStore("theme-config", {
   state: (): any => ({
     collapsed: false, // 是否折叠菜单
     refreshPage: true, // 刷新页面
-    language: "zh-CN" // 系统语言
+    language: "zh-CN", // 系统语言
+    darkMode: false // 黑暗模式
   }),
   actions: {
     // 折叠菜单
diff --git a/src/style/global-theme.scss b/src/style/global-theme.scss
index 47f262f..3605611 100644
--- a/src/style/global-theme.scss
+++ b/src/style/global-theme.scss
@@ -27,10 +27,10 @@ $shadow-border-5: inset 0 0 0 1px violet;
 $shadow-border-6: inset 0 0 0 1px green;
 
 // 填充色
-$color-fill-1: #eeeeee; // 常规填充色/灰底悬浮
-$color-fill-2: #d1d1d1; // 深/灰底悬浮
-$color-fill-3: #b6b6b6; // 重/特殊场景
-$color-fill-4: #9b9b9b; // 浅/禁用
+$color-fill-1: var(--color-fill-1); // 浅/禁用
+$color-fill-2: var(--color-fill-2); // 常规填充色/灰底悬浮
+$color-fill-3: var(--color-fill-3); // 深/灰底悬浮
+$color-fill-4: var(--color-fill-4); // 重/特殊场景
 
 // 设置全局主题色：https://arco.design/vue/docs/token
 $color-primary: rgb(var(--primary-6)); // 主题色-主要
diff --git a/src/style/index.scss b/src/style/index.scss
index aea37f0..fc4b394 100644
--- a/src/style/index.scss
+++ b/src/style/index.scss
@@ -24,3 +24,10 @@ html {
   height: 100vh;
   overflow: hidden;
 }
+
+// 设置全局颜色-关联黑暗模式
+body {
+  background-color: var(--color-bg-1);
+  color: var(--color-text-1);
+  // color-scheme: dark; // 这个属性设置后，滚动条也能表现为暗色模式
+}
diff --git a/src/views/login/login.vue b/src/views/login/login.vue
index 5859a82..ecf2299 100644
--- a/src/views/login/login.vue
+++ b/src/views/login/login.vue
@@ -139,7 +139,7 @@ const onSubmit = ({ errors }: any) => {
     transform: translate(-50%, -50%);
     display: flex;
     align-items: center;
-    box-shadow: 0 0 8px 1px $color-fill-1;
+    box-shadow: 0 0 8px 1px $color-fill-2;
     .banner_box {
       width: 650px;
       height: 100%;
