diff --git a/src/assets/style.css b/src/assets/style.css
new file mode 100644
index 0000000..e1b1b5e
--- /dev/null
+++ b/src/assets/style.css
@@ -0,0 +1,11 @@
+:root {
+  --primary-color: #0055ff; /* 亮色主题主色 */
+  --background-color: #ffffff; /* 亮色背景 */
+  --text-color: #333333; /* 亮色文字颜色 */
+}
+
+.dark-theme {
+  --primary-color: #0a65cc; /* 暗色主题主色 */
+  --background-color: #1e1e1e; /* 暗色背景 */
+  --text-color: #ffffff; /* 暗色文字颜色 */
+}
diff --git a/src/components/GlobalHeader.vue b/src/components/GlobalHeader.vue
index 9cde60a..2092a0a 100644
--- a/src/components/GlobalHeader.vue
+++ b/src/components/GlobalHeader.vue
@@ -1,5 +1,5 @@
 <template>
-  <div >
+  <div style=" background-color: var(--background-color);color: var(--text-color);">
     <a-row id="globalHeader" align="center" :wrap="false">
       <a-col flex="auto">
         <a-menu
@@ -118,6 +118,7 @@ let mode=ref(1)
 const drak=()=>{
 mode.value=0
 document.body.setAttribute('arco-theme', 'dark')
+document.body.classList.add('dark-theme'); // 添加暗色主题类
 
 // // 恢复亮色主题
 // document.body.removeAttribute('arco-theme');
@@ -125,6 +126,7 @@ document.body.setAttribute('arco-theme', 'dark')
 const day=()=>{
 mode.value=1
 // // 恢复亮色主题
+document.body.classList.remove('dark-theme'); // 移除暗色主题类
 document.body.removeAttribute('arco-theme');
 }
 const logout=async()=>{
diff --git a/src/layouts/BasicLayout.vue b/src/layouts/BasicLayout.vue
index d2ea130..ae75dfc 100644
--- a/src/layouts/BasicLayout.vue
+++ b/src/layouts/BasicLayout.vue
@@ -942,7 +942,7 @@
       <router-view />
     </a-layout-content>
     <!-- 底部 -->
-    <a-layout-footer class="footer">By 曙光 shuguangwl.com</a-layout-footer>
+    <a-layout-footer class="footer" style=" background-color: var(--background-color);color: var(--text-color);">By 曙光 shuguangwl.com</a-layout-footer>
   </a-layout>
 </template>
 <script setup lang="ts">
diff --git a/src/main.ts b/src/main.ts
index 6457d9c..6b0e2ac 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,7 +4,7 @@ import store from "./store";
 import ArcoVue from "@arco-design/web-vue";
 import App from "./App.vue";
 import "@arco-design/web-vue/dist/arco.css";
-import axios from 'axios'
+import '@/assets/style.css'
 import '@/access'
 // 额外引入图标库
 import ArcoVueIcon from '@arco-design/web-vue/es/icon';
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 60128b1..4a9937f 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -4,7 +4,7 @@
   <link rel="stylesheet" type="text/css" href="https://auth.idcbook.com/template/assets/home/shiwaiyun/static/common.css">
   <link rel="stylesheet" type="text/css" href="https://auth.idcbook.com/template/assets/home/shiwaiyun/static/index.css">
 
-  
+    <div style=" background-color: var(--background-color);color: var(--text-color);">
     <!-- 页面主要内容 -->
     <div>
       <!-- banner 菜单开始 -->
@@ -90,7 +90,7 @@
       <!-- 优势部分结束 -->
 
       <!-- 开始使用部分 -->
-      <div class="start-box">
+      <div class="start-box" style=" background-color: var(--background-color);color: var(--text-color);">
         <div class="auto-width join-apy-wrap sm-p-lr-15">
           <div class="text-content" layout-align="space-between center">
             <div class="bdr-5 font-size-18 font-weight-bold">
@@ -158,6 +158,7 @@
 	  </div>
   </div>
 </div>
+</div>
 </template>
 
 <script lang="ts" setup>
@@ -306,7 +307,7 @@ const handleCancel = () => {
   height: 30px;
   line-height: 30px;
   text-align: center;
-  background-color: #ffffff;
+	background-color: var(--background-color);
   border-radius: 5px;
   border: solid 1px #05f;
   color: #05f;
diff --git a/src/views/forum/ForumView.vue b/src/views/forum/ForumView.vue
index c2f6de1..ad034e3 100644
--- a/src/views/forum/ForumView.vue
+++ b/src/views/forum/ForumView.vue
@@ -120,7 +120,8 @@ const paginationProps=reactive({
   margin: 0 4px;
 }
 .header {
-  background: #ffffff;
+	background-color: var(--background-color);
+  color: var(--text-color);
   padding: 0 20px;
   display: flex;
   align-items: center;
@@ -141,17 +142,20 @@ const paginationProps=reactive({
 }
 
 .sidebar {
-  background: #ffffff;
+	background-color: var(--background-color);
+  color: var(--text-color);
   border-radius: 8px;
 }
 
 .post-list {
-  background: #ffffff;
+	background-color: var(--background-color);
+  color: var(--text-color);
   border-radius: 8px;
 }
 .footer {
   text-align: center;
   padding: 10px;
-  background: #ffffff;
+	background-color: var(--background-color);
+  color: var(--text-color);
 }
 </style>