diff --git a/dashboard/src/components/shared/ExtensionCard.vue b/dashboard/src/components/shared/ExtensionCard.vue
index 33b24eba9..b9d4d8c6c 100644
--- a/dashboard/src/components/shared/ExtensionCard.vue
+++ b/dashboard/src/components/shared/ExtensionCard.vue
@@ -76,7 +76,9 @@ const viewReadme = () => {
 
 <template>
   <v-card class="mx-auto d-flex flex-column" :elevation="highlight ? 0 : 1"
-    :style="{ height: $vuetify.display.xs ? '250px' : '220px', backgroundColor: useCustomizerStore().uiTheme==='PurpleThemeDark' ? 'var(--v-theme-surface)' : 'var(--v-theme-lightprimary)', color: 'var(--v-theme-primaryText)' }">
+    :style="{ height: $vuetify.display.xs ? '250px' : '220px',
+     backgroundColor: useCustomizerStore().uiTheme==='PurpleTheme' ? '#eef2f6' : '#282833',
+     color: useCustomizerStore().uiTheme==='PurpleTheme' ? '#000000dd' : '#ffffff'}">
     <v-card-text style="padding: 16px; padding-bottom: 0px; display: flex; justify-content: space-between;">
 
       <div class="flex-grow-1">
diff --git a/dashboard/src/components/shared/Logo.vue b/dashboard/src/components/shared/Logo.vue
index 294fae094..db3e6cc66 100644
--- a/dashboard/src/components/shared/Logo.vue
+++ b/dashboard/src/components/shared/Logo.vue
@@ -6,7 +6,9 @@
       </div>
       <div class="logo-text">
         <h2 class="text-secondary">AstrBot 仪表盘</h2>
-        <h4 class="text-disabled">登录以继续</h4>
+        <!-- 父子组件传递css变量可能会出错，暂时使用十六进制颜色值 -->
+        <h4 :style="{color: useCustomizerStore().uiTheme === 'PurpleTheme' ? '#000000aa' : '#ffffffcc'}"
+            class="hint-text">登录以继续</h4>
       </div>
     </div>
   </div>
@@ -14,6 +16,7 @@
 
 <script setup lang="ts">
 // No props or other logic needed for this simple component
+import {useCustomizerStore} from "@/stores/customizer";
 </script>
 
 <style scoped>
@@ -56,7 +59,6 @@
   margin: 0;
   font-size: 1.8rem;
   font-weight: 600;
-  color: #5e35b1;
   letter-spacing: 0.5px;
 }
 
@@ -64,7 +66,7 @@
   margin: 4px 0 0 0;
   font-size: 1rem;
   font-weight: 400;
-  color: #616161;
   letter-spacing: 0.3px;
 }
+
 </style>
diff --git a/dashboard/src/config.ts b/dashboard/src/config.ts
index 6ddf02b75..d7739aea2 100644
--- a/dashboard/src/config.ts
+++ b/dashboard/src/config.ts
@@ -12,7 +12,7 @@ const config: ConfigProps = {
   Customizer_drawer: false,
   mini_sidebar: false,
   fontTheme: 'Roboto',
-  uiTheme: 'PurpleThemeDark',
+  uiTheme: 'PurpleTheme',
   inputBg: false
 };
 
diff --git a/dashboard/src/layouts/full/vertical-header/VerticalHeader.vue b/dashboard/src/layouts/full/vertical-header/VerticalHeader.vue
index ba9d3ef23..b61a8f1ca 100644
--- a/dashboard/src/layouts/full/vertical-header/VerticalHeader.vue
+++ b/dashboard/src/layouts/full/vertical-header/VerticalHeader.vue
@@ -250,7 +250,8 @@ if (localStorage.getItem('change_pwd_hint') != null && localStorage.getItem('cha
     <v-btn size="small" @click="toggleDarkMode();" class="text-primary mr-2" color="var(--v-theme-surface)"
            variant="flat" rounded="sm">
       <!-- 明暗主题切换按钮 -->
-      <v-icon>mdi-lightbulb-night-outline</v-icon>
+      <v-icon v-if="useCustomizerStore().uiTheme === 'PurpleThemeDark'">mdi-weather-night</v-icon>
+      <v-icon v-else>mdi-white-balance-sunny</v-icon>
     </v-btn>
 
     <v-dialog v-model="updateStatusDialog" width="1000">
diff --git a/dashboard/src/views/ChatPage.vue b/dashboard/src/views/ChatPage.vue
index 30ef26259..96e1664b8 100644
--- a/dashboard/src/views/ChatPage.vue
+++ b/dashboard/src/views/ChatPage.vue
@@ -33,7 +33,7 @@ marked.setOptions({
                             <v-list density="compact" nav class="conversation-list"
                                 @update:selected="getConversationMessages">
                                 <v-list-item v-for="(item, i) in conversations" :key="item.cid" :value="item.cid"
-                                    color="primary" rounded="lg" class="conversation-item" active-color="primary">
+                                    rounded="lg" class="conversation-item" active-color="primary">
                                     <template v-slot:prepend>
                                         <v-icon size="small" icon="mdi-message-text-outline"></v-icon>
                                     </template>
@@ -674,7 +674,7 @@ export default {
     height: 100%;
     border-radius: 12px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
-    background-color: var(--v-theme-background);
+    background-color: var(--v-theme-surface);
 }
 
 .chat-page-container {
@@ -697,7 +697,7 @@ export default {
     flex-direction: column;
     padding: 0;
     border-right: 1px solid rgba(0, 0, 0, 0.05);
-    background-color: var(--v-theme-background);
+    background-color: var(--v-theme-surface) !important;
     height: 100%;
     position: relative;
 }
@@ -1065,7 +1065,7 @@ export default {
 }
 
 .markdown-content pre {
-    background-color: #f8f8f8;
+    background-color: var(--v-theme-surface);
     padding: 12px;
     border-radius: 6px;
     overflow-x: auto;
@@ -1073,12 +1073,12 @@ export default {
 }
 
 .markdown-content code {
-    background-color: #f5f0ff;
+    background-color: var(--v-theme-codeBg);
     padding: 2px 4px;
     border-radius: 4px;
     font-family: 'Fira Code', monospace;
     font-size: 0.9em;
-    color: #673ab7;
+    color: var(--v-theme-code);
 }
 
 .markdown-content img {
@@ -1088,9 +1088,9 @@ export default {
 }
 
 .markdown-content blockquote {
-    border-left: 4px solid #673ab7;
+    border-left: 4px solid var(--v-theme-secondary);
     padding-left: 16px;
-    color: #666;
+    color: var(--v-theme-secondaryText);
     margin: 16px 0;
 }
 
@@ -1102,13 +1102,13 @@ export default {
 
 .markdown-content th,
 .markdown-content td {
-    border: 1px solid #eee;
+    border: 1px solid var(--v-theme-background);
     padding: 8px 12px;
     text-align: left;
 }
 
 .markdown-content th {
-    background-color: #f5f0ff;
+    background-color: var(--v-theme-containerBg);
 }
 
 /* 动画类 */
diff --git a/dashboard/src/views/ExtensionMarketplace.vue b/dashboard/src/views/ExtensionMarketplace.vue
index 0f46b775c..f286b3882 100644
--- a/dashboard/src/views/ExtensionMarketplace.vue
+++ b/dashboard/src/views/ExtensionMarketplace.vue
@@ -52,13 +52,16 @@ import 'highlight.js/styles/github.css';
 
                 <v-card-text>
 
-                    <small style="color: var(--v-theme-secondaryText, #bbb);">每个插件都是作者无偿提供的的劳动成果。如果您喜欢某个插件，请 Star！</small>
+                    <small style="color: var(--v-theme-secondaryText);">每个插件都是作者无偿提供的的劳动成果。如果您喜欢某个插件，请 Star！</small>
                     <div v-if="pinnedPlugins.length > 0" class="mt-4">
                         <h2>🥳 推荐</h2>
 
                         <v-row style="margin-top: 8px;">
                             <v-col cols="12" md="6" lg="6" v-for="plugin in pinnedPlugins">
-                                <ExtensionCard :extension="plugin" market-mode="true" :highlight="true" @install="extension_url=plugin.repo; newExtension()">
+                                <ExtensionCard :extension="plugin" class="h-120 rounded-lg"
+                                               market-mode="true" :highlight="true"
+                                               @install="extension_url=plugin.repo;
+                                               newExtension()">
                                 </ExtensionCard>
                             </v-col>
                         </v-row>
@@ -565,7 +568,7 @@ export default {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
     line-height: 1.6;
     padding: 8px 0;
-    color: #24292e;
+    color: var(--v-theme-secondaryText);
 }
 
 .markdown-body h1,
@@ -582,13 +585,13 @@ export default {
 
 .markdown-body h1 {
     font-size: 2em;
-    border-bottom: 1px solid #eaecef;
+    border-bottom: 1px solid var(--v-theme-border);
     padding-bottom: 0.3em;
 }
 
 .markdown-body h2 {
     font-size: 1.5em;
-    border-bottom: 1px solid #eaecef;
+    border-bottom: 1px solid var(--v-theme-border);
     padding-bottom: 0.3em;
 }
 
@@ -600,7 +603,7 @@ export default {
 .markdown-body code {
     padding: 0.2em 0.4em;
     margin: 0;
-    background-color: rgba(27, 31, 35, 0.05);
+    background-color: var(--v-theme-codeBg);
     border-radius: 3px;
     font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
     font-size: 85%;
@@ -611,7 +614,7 @@ export default {
     overflow: auto;
     font-size: 85%;
     line-height: 1.45;
-    background-color: #f6f8fa;
+    background-color: var(--v-theme-containerBg);
     border-radius: 3px;
     margin-bottom: 16px;
 }
@@ -631,19 +634,19 @@ export default {
     max-width: 100%;
     margin: 8px 0;
     box-sizing: border-box;
-    background-color: #fff;
+    background-color: var(--v-theme-background);
     border-radius: 3px;
 }
 
 .markdown-body blockquote {
     padding: 0 1em;
-    color: #6a737d;
-    border-left: 0.25em solid #dfe2e5;
+    color: var(--v-theme-secondaryText);
+    border-left: 0.25em solid var(--v-theme-border);
     margin-bottom: 16px;
 }
 
 .markdown-body a {
-    color: #0366d6;
+    color: var(--v-theme-primary);
     text-decoration: none;
 }
 
@@ -662,23 +665,23 @@ export default {
 .markdown-body table th,
 .markdown-body table td {
     padding: 6px 13px;
-    border: 1px solid #dfe2e5;
+    border: 1px solid var(--v-theme-background);
 }
 
 .markdown-body table tr {
-    background-color: #fff;
-    border-top: 1px solid #c6cbd1;
+    background-color: var(--v-theme-surface);
+    border-top: 1px solid var(--v-theme-border);
 }
 
 .markdown-body table tr:nth-child(2n) {
-    background-color: #f6f8fa;
+    background-color: var(--v-theme-background);
 }
 
 .markdown-body hr {
     height: 0.25em;
     padding: 0;
     margin: 24px 0;
-    background-color: #e1e4e8;
+    background-color: var(--v-theme-containerBg);
     border: 0;
 }
 </style>
\ No newline at end of file
diff --git a/dashboard/src/views/authentication/auth/LoginPage.vue b/dashboard/src/views/authentication/auth/LoginPage.vue
index d6c99f89b..63caeda47 100644
--- a/dashboard/src/views/authentication/auth/LoginPage.vue
+++ b/dashboard/src/views/authentication/auth/LoginPage.vue
@@ -44,7 +44,7 @@ onMounted(() => {
     </v-card>
   </div>
   <div v-else class="login-page-container-dark">
-    <div class="login-background"></div>
+    <div class="login-background-dark"></div>
     <v-card
         variant="outlined"
         class="login-card"
@@ -97,6 +97,17 @@ onMounted(() => {
   animation: rotate 60s linear infinite;
 }
 
+.login-background-dark {
+  position: absolute;
+  width: 200%;
+  height: 200%;
+  top: -50%;
+  left: -50%;
+  background-color: var(--v-theme-surface);
+  z-index: 0;
+  animation: rotate 60s linear infinite;
+}
+
 @keyframes rotate {
   0% {
     transform: rotate(0deg);
@@ -109,10 +120,11 @@ onMounted(() => {
 .login-card {
   max-width: 520px;
   width: 90%;
+  color: var(--v-theme-primaryText) !important;
   border-radius: 12px !important;
   border-color: var(--v-theme-border) !important;
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07) !important;
-  background-color: var(--v-theme-background) !important;
+  background-color: var(--v-theme-surface) !important;
   transform: translateY(20px);
   opacity: 0;
   transition: all 0.5s ease;
diff --git a/dashboard/src/views/authentication/authForms/AuthLogin.vue b/dashboard/src/views/authentication/authForms/AuthLogin.vue
index 21e8ddc8b..0ca68bc67 100644
--- a/dashboard/src/views/authentication/authForms/AuthLogin.vue
+++ b/dashboard/src/views/authentication/authForms/AuthLogin.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import {ref, useCssModule} from 'vue';
 import { useAuthStore } from '@/stores/auth';
 import { Form } from 'vee-validate';
 import md5 from 'js-md5';
+import {useCustomizerStore} from "@/stores/customizer";
 
 const valid = ref(false);
 const show1 = ref(false);
@@ -42,8 +43,8 @@ async function validate(values: any, { setErrors }: any) {
       required 
       density="comfortable"
       hide-details="auto" 
-      variant="outlined" 
-      color="primary"
+      variant="outlined"
+      :style="{color: useCustomizerStore().uiTheme === 'PurpleTheme' ? '#000000dd' : '#ffffff'}"
       prepend-inner-icon="mdi-account"
       :disabled="loading"
     ></v-text-field>
@@ -54,7 +55,7 @@ async function validate(values: any, { setErrors }: any) {
       required 
       density="comfortable" 
       variant="outlined"
-      color="primary" 
+      :style="{color: useCustomizerStore().uiTheme === 'PurpleTheme' ? '#000000dd' : '#ffffff'}"
       hide-details="auto" 
       :append-icon="show1 ? 'mdi-eye' : 'mdi-eye-off'"
       :type="show1 ? 'text' : 'password'" 
@@ -64,9 +65,9 @@ async function validate(values: any, { setErrors }: any) {
       :disabled="loading"
     ></v-text-field>
 
-    <div class="mt-1 mb-5 hint-text">
+    <v-label :style="{color: useCustomizerStore().uiTheme === 'PurpleTheme' ? '#000000aa' : '#ffffffcc'}" class="mt-1 mb-5">
       <small>默认用户名和密码为 astrbot</small>
-    </div>
+    </v-label>
     
     <v-btn 
       color="secondary"