diff --git a/dashboard/src/components/chat/message_list_comps/IPythonToolBlock.vue b/dashboard/src/components/chat/message_list_comps/IPythonToolBlock.vue
index 5ff9469a0e..a031f9bc1f 100644
--- a/dashboard/src/components/chat/message_list_comps/IPythonToolBlock.vue
+++ b/dashboard/src/components/chat/message_list_comps/IPythonToolBlock.vue
@@ -150,7 +150,7 @@ onMounted(async () => {
 }
 
 .code-fallback.dark-theme {
-    background-color: transparent;
+    background-color: rgb(var(--v-theme-codeBg));
 }
 
 .result-section {
@@ -178,7 +178,7 @@ onMounted(async () => {
 }
 
 .result-content.dark-theme {
-    background-color: transparent;
+    background-color: rgb(var(--v-theme-codeBg));
 }
 
 .animate-fade-in {
diff --git a/dashboard/src/components/shared/ConsoleDisplayer.vue b/dashboard/src/components/shared/ConsoleDisplayer.vue
index d69feea39f..cf4be65cfd 100644
--- a/dashboard/src/components/shared/ConsoleDisplayer.vue
+++ b/dashboard/src/components/shared/ConsoleDisplayer.vue
@@ -36,14 +36,14 @@ export default {
       autoScroll: true,
       isFullscreen: false,
       logColorAnsiMap: {
-        '\u001b[1;34m': 'color: #39C5BB; font-weight: bold;',
-        '\u001b[1;36m': 'color: #00FFFF; font-weight: bold;',
-        '\u001b[1;33m': 'color: #FFFF00; font-weight: bold;',
-        '\u001b[31m': 'color: #FF0000;',
-        '\u001b[1;31m': 'color: #FF0000; font-weight: bold;',
+        '\u001b[1;34m': 'color: #6cb6d9; font-weight: bold;',
+        '\u001b[1;36m': 'color: #72c4cc; font-weight: bold;',
+        '\u001b[1;33m': 'color: #d4b95e; font-weight: bold;',
+        '\u001b[31m': 'color: #d46a6a;',
+        '\u001b[1;31m': 'color: #e06060; font-weight: bold;',
         '\u001b[0m': 'color: inherit; font-weight: normal;',
-        '\u001b[32m': 'color: #00FF00;',
-        'default': 'color: #FFFFFF;'
+        '\u001b[32m': 'color: #6cc070;',
+        'default': 'color: #c8c8c8;'
       },
       logLevels: ['DEBUG', 'INFO', 'WARNING', 'ERROR', 'CRITICAL'],
       selectedLevels: [0, 1, 2, 3, 4],
diff --git a/dashboard/src/components/shared/ExtensionCard.vue b/dashboard/src/components/shared/ExtensionCard.vue
index 061a76c56f..f7c05c5c59 100644
--- a/dashboard/src/components/shared/ExtensionCard.vue
+++ b/dashboard/src/components/shared/ExtensionCard.vue
@@ -164,11 +164,13 @@ const viewChangelog = () => {
           ? marketMode
             ? '#f8f0dd'
             : '#ffffff'
-          : '#282833',
+          : marketMode
+            ? '#3a3425'
+            : '#282833',
       color:
         useCustomizerStore().uiTheme === 'PurpleTheme'
           ? '#000000dd'
-          : '#ffffff',
+          : '#ffffffdd',
     }"
   >
     <v-card-text
diff --git a/dashboard/src/components/shared/ReadmeDialog.vue b/dashboard/src/components/shared/ReadmeDialog.vue
index f7c2d2faf6..f3ae7980ef 100644
--- a/dashboard/src/components/shared/ReadmeDialog.vue
+++ b/dashboard/src/components/shared/ReadmeDialog.vue
@@ -4,7 +4,7 @@ import MarkdownIt from "markdown-it";
 import hljs from "highlight.js";
 import axios from "axios";
 import DOMPurify from "dompurify";
-import "highlight.js/styles/github-dark.css";
+import "highlight.js/styles/github.css";
 import { useI18n } from "@/i18n/composables";
 
 // 1. 在 setup 作用域创建 MarkdownIt 实例
diff --git a/dashboard/src/components/shared/T2ITemplateEditor.vue b/dashboard/src/components/shared/T2ITemplateEditor.vue
index feb0b50e16..eac49c7601 100644
--- a/dashboard/src/components/shared/T2ITemplateEditor.vue
+++ b/dashboard/src/components/shared/T2ITemplateEditor.vue
@@ -12,7 +12,7 @@
       </v-btn>
     </template>
     
-    <v-card>
+    <v-card class="t2i-template-editor">
       <v-card-title class="d-flex align-center justify-space-between">
         <span>{{ tm('t2iTemplateEditor.dialogTitle') }}</span>
         <v-spacer></v-spacer>
@@ -560,3 +560,9 @@ code {
   font-size: 0.875em;
 }
 </style>
+
+<style>
+.v-theme--PurpleThemeDark .t2i-template-editor .preview-container {
+  background-color: rgb(var(--v-theme-surface));
+}
+</style>
diff --git a/dashboard/src/layouts/full/vertical-header/VerticalHeader.vue b/dashboard/src/layouts/full/vertical-header/VerticalHeader.vue
index 1fb32b48a0..4ac9e1d6e8 100644
--- a/dashboard/src/layouts/full/vertical-header/VerticalHeader.vue
+++ b/dashboard/src/layouts/full/vertical-header/VerticalHeader.vue
@@ -488,6 +488,7 @@ const isChristmas = computed(() => {
 });
 
 // 语言切换相关
+const mainMenuOpen = ref(false);
 const { languageOptions, currentLanguage, switchLanguage, locale } = useLanguageSwitcher();
 const languages = computed(() => 
   languageOptions.value.map(lang => ({
@@ -499,6 +500,7 @@ const languages = computed(() =>
 const currentLocale = computed(() => locale.value);
 const changeLanguage = async (langCode: string) => {
   await switchLanguage(langCode as Locale);
+  mainMenuOpen.value = false;
 };
 
 onMounted(async () => {
@@ -591,7 +593,7 @@ onMounted(async () => {
 
 
     <!-- 功能菜单 -->
-    <StyledMenu offset="12" location="bottom end">
+    <StyledMenu v-model="mainMenuOpen" offset="12" location="bottom end">
       <template v-slot:activator="{ props: activatorProps }">
         <v-btn
           v-bind="activatorProps"
@@ -632,8 +634,8 @@ onMounted(async () => {
 
       <!-- 语言切换分组 -->
       <v-menu
+        open-on-click
         :open-on-hover="!$vuetify.display.xs"
-        :open-on-click="$vuetify.display.xs"
         :open-delay="!$vuetify.display.xs ? 60 : 0"
         :close-delay="!$vuetify.display.xs ? 120 : 0"
         :location="$vuetify.display.xs ? 'bottom' : 'start center'"
@@ -642,6 +644,7 @@ onMounted(async () => {
         <template v-slot:activator="{ props: languageMenuProps }">
           <v-list-item
             v-bind="languageMenuProps"
+            @click.stop
             class="styled-menu-item language-group-trigger"
             rounded="md"
           >
diff --git a/dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue b/dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue
index a2ec91d379..e2636d211a 100644
--- a/dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue
+++ b/dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue
@@ -1,5 +1,6 @@
 <script setup>
-import { ref, shallowRef, onMounted, onUnmounted, watch } from 'vue';
+import { ref, shallowRef, computed, onMounted, onUnmounted, watch } from 'vue';
+import { useTheme } from 'vuetify';
 import { useCustomizerStore } from '../../../stores/customizer';
 import { useI18n } from '@/i18n/composables';
 import sidebarItems from './sidebarItem';
@@ -10,6 +11,7 @@ import ChangelogDialog from '@/components/shared/ChangelogDialog.vue';
 const { t, locale } = useI18n();
 
 const customizer = useCustomizerStore();
+const theme = useTheme();
 
 function collectGroupValues(items, values = new Set()) {
   items.forEach((item) => {
@@ -84,53 +86,58 @@ const minSidebarWidth = 200;
 const maxSidebarWidth = 300;
 const isResizing = ref(false);
 
-const iframeStyle = ref({
-  position: 'fixed',
-  bottom: '16px',
-  right: '16px',
-  width: '490px',
-  height: '640px',
-  minWidth: '300px',
-  minHeight: '200px',
-  background: 'white',
-  resize: 'both',
-  overflow: 'auto',
-  zIndex: '10000000',
-  borderRadius: '12px',
-  boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.1)',
-});
+const isDark = computed(() => customizer.uiTheme === 'PurpleThemeDark');
+const themeColors = computed(() => theme.current.value.colors);
+const iframeBackground = computed(() => isDark.value ? themeColors.value.surface || 'white' : 'white');
+const dragHeaderBackground = computed(() => isDark.value ? themeColors.value.mcpCardBg || themeColors.value.surface || 'white' : '#f0f0f0');
+const frameBorder = computed(() => `1px solid ${isDark.value ? (themeColors.value.borderLight || '#ccc') : '#ccc'}`);
+
+const isMobile = window.innerWidth < 768;
+if (isMobile) {
+  customizer.Sidebar_drawer = false;
+}
+
+const dragPos = ref({ left: '', top: '' });
 
-if (window.innerWidth < 768) {
-  iframeStyle.value = {
-    position: 'fixed',
-    top: '10%',
-    left: '0%',
-    width: '100%',
-    height: '80%',
+const iframeStyle = computed(() => {
+  const base = isMobile
+    ? { position: 'fixed', top: '10%', left: '0%', width: '100%', height: '80%', zIndex: '1002' }
+    : { position: 'fixed', bottom: '16px', right: '16px', width: '490px', height: '640px', zIndex: '10000000' };
+  const pos = dragPos.value.left ? { left: dragPos.value.left, top: dragPos.value.top, bottom: 'auto', right: 'auto' } : {};
+  return {
+    ...base,
+    ...pos,
     minWidth: '300px',
     minHeight: '200px',
-    background: 'white',
+    background: iframeBackground.value,
     resize: 'both',
     overflow: 'auto',
-    zIndex: '1002',
     borderRadius: '12px',
-    boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.1)',
+    boxShadow: isDark.value ? '0px 4px 16px rgba(0, 0, 0, 0.5)' : '0px 4px 12px rgba(0, 0, 0, 0.1)',
   };
-  customizer.Sidebar_drawer = false;
-}
+});
 
-const dragHeaderStyle = {
+const iframeInnerStyle = computed(() => ({
+  width: '100%',
+  height: 'calc(100% - 66px)',
+  border: 'none',
+  borderBottomLeftRadius: '12px',
+  borderBottomRightRadius: '12px',
+  filter: isDark.value ? 'invert(0.88) hue-rotate(180deg)' : 'none',
+}));
+
+const dragHeaderStyle = computed(() => ({
   width: '100%',
   padding: '8px',
-  background: '#f0f0f0',
-  borderBottom: '1px solid #ccc',
+  background: dragHeaderBackground.value,
+  borderBottom: frameBorder.value,
   borderTopLeftRadius: '8px',
   borderTopRightRadius: '8px',
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
   cursor: 'move'
-};
+}));
 
 function toggleIframe() {
   showIframe.value = !showIframe.value;
@@ -208,9 +215,8 @@ function moveAt(clientX, clientY) {
   const dm = document.getElementById('draggable-iframe');
   const newLeft = clamp(clientX - offsetX, 0, window.innerWidth - dm.offsetWidth);
   const newTop = clamp(clientY - offsetY, 0, window.innerHeight - dm.offsetHeight);
-  // 将拖拽后的位置同步到响应式样式变量中
-  iframeStyle.value.left = newLeft + 'px';
-  iframeStyle.value.top = newTop + 'px';
+  // Sync dragged position to reactive variable
+  dragPos.value = { left: newLeft + 'px', top: newTop + 'px' };
 }
 
 function endDrag() {
@@ -348,7 +354,7 @@ function openChangelogDialog() {
           icon
           @click.stop="openIframeLink('https://astrbot.app')"
           @mousedown.stop
-          style="border-radius: 8px; border: 1px solid #ccc;"
+          :style="{ borderRadius: '8px', border: frameBorder }"
         >
           <v-icon icon="mdi-open-in-new" />
         </v-btn>
@@ -356,7 +362,7 @@ function openChangelogDialog() {
           icon
           @click.stop="toggleIframe"
           @mousedown.stop
-          style="border-radius: 8px; border: 1px solid #ccc;"
+          :style="{ borderRadius: '8px', border: frameBorder }"
         >
           <v-icon icon="mdi-close" />
         </v-btn>
@@ -364,7 +370,7 @@ function openChangelogDialog() {
     </div>
     <iframe
       src="https://astrbot.app"
-      style="width: 100%; height: calc(100% - 66px); border: none; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;"
+      :style="iframeInnerStyle"
       ></iframe>
   </div>
 
diff --git a/dashboard/src/scss/_override.scss b/dashboard/src/scss/_override.scss
index 176297f475..2372d21c2d 100644
--- a/dashboard/src/scss/_override.scss
+++ b/dashboard/src/scss/_override.scss
@@ -45,4 +45,35 @@ pre, code, .markdown pre, .markdown code, .release-notes pre, .release-notes cod
   color: var(--astrbot-code-color);
 }
 
+// Dark mode global overrides
+.v-theme--PurpleThemeDark {
+  // Override code text color for dark mode
+  --astrbot-code-color: rgb(var(--v-theme-on-surface-variant));
 
+  // Soften flat primary buttons for dark mode
+  .v-btn--variant-flat.bg-primary {
+    background-color: rgba(var(--v-theme-primary), 0.85) !important;
+  }
+
+  // Timeline dots: use a muted version
+  .v-timeline-item .v-timeline-divider__dot .v-timeline-divider__inner-dot {
+    opacity: 0.85;
+  }
+
+  // Use a darker scrim for overlays and dialogs in dark mode.
+  .v-overlay__scrim {
+    background-color: rgba(var(--v-theme-background), 0.72) !important;
+    opacity: 1 !important;
+  }
+
+  // Ensure dialog/card surfaces use the dark surface color
+  .v-overlay__content > .v-card {
+    background-color: rgb(var(--v-theme-surface)) !important;
+  }
+
+  // Links inside markdown - slightly muted
+  .markdown-content a,
+  .markstream-vue a {
+    color: rgb(var(--v-theme-primary));
+  }
+}
diff --git a/dashboard/src/scss/components/_HljsDark.scss b/dashboard/src/scss/components/_HljsDark.scss
new file mode 100644
index 0000000000..1b084ad581
--- /dev/null
+++ b/dashboard/src/scss/components/_HljsDark.scss
@@ -0,0 +1,107 @@
+// highlight.js dark mode overrides
+// Scoped to the dark Vuetify theme so the default github.css light styles work in light mode.
+.v-theme--PurpleThemeDark {
+  .hljs {
+    background: transparent;
+    color: #adbac7;
+  }
+
+  .hljs-doctag,
+  .hljs-keyword,
+  .hljs-meta .hljs-keyword,
+  .hljs-template-tag,
+  .hljs-template-variable,
+  .hljs-type,
+  .hljs-variable.language_ {
+    color: #f47067;
+  }
+
+  .hljs-title,
+  .hljs-title.class_,
+  .hljs-title.class_.inherited__,
+  .hljs-title.function_ {
+    color: #dcbdfb;
+  }
+
+  .hljs-attr,
+  .hljs-attribute,
+  .hljs-literal,
+  .hljs-meta,
+  .hljs-number,
+  .hljs-operator,
+  .hljs-selector-attr,
+  .hljs-selector-class,
+  .hljs-selector-id,
+  .hljs-variable {
+    color: #6cb6ff;
+  }
+
+  .hljs-meta .hljs-string,
+  .hljs-regexp,
+  .hljs-string {
+    color: #96d0ff;
+  }
+
+  .hljs-built_in,
+  .hljs-symbol {
+    color: #f69d50;
+  }
+
+  .hljs-code,
+  .hljs-comment,
+  .hljs-formula {
+    color: #768390;
+  }
+
+  .hljs-name,
+  .hljs-quote,
+  .hljs-selector-pseudo,
+  .hljs-selector-tag {
+    color: #8ddb8c;
+  }
+
+  .hljs-subst {
+    color: #adbac7;
+  }
+
+  .hljs-section {
+    color: #316dca;
+    font-weight: bold;
+  }
+
+  .hljs-bullet {
+    color: #eac55f;
+  }
+
+  .hljs-emphasis {
+    color: #adbac7;
+    font-style: italic;
+  }
+
+  .hljs-strong {
+    color: #adbac7;
+    font-weight: bold;
+  }
+
+  .hljs-addition {
+    color: #b4f1b4;
+    background-color: #1b4721;
+  }
+
+  .hljs-deletion {
+    color: #ffd8d3;
+    background-color: #78191b;
+  }
+
+  // markstream-vue dark mode variables override
+  // markstream-vue expects a `.dark` ancestor to activate its dark palette,
+  // but Vuetify uses `.v-theme--PurpleThemeDark` instead.
+  .markstream-vue {
+    --border: 217.2 32.6% 17.5%;
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --secondary: 217.2 32.6% 17.5%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+  }
+}
diff --git a/dashboard/src/scss/style.scss b/dashboard/src/scss/style.scss
index d473cbb68e..6a572c8a34 100644
--- a/dashboard/src/scss/style.scss
+++ b/dashboard/src/scss/style.scss
@@ -13,6 +13,7 @@
 @import './components/VTextField';
 @import './components/VTabs';
 @import './components/VScrollbar';
+@import './components/HljsDark';
 
 @import './pages/dashboards';
 
diff --git a/dashboard/src/theme/DarkTheme.ts b/dashboard/src/theme/DarkTheme.ts
index e8733960bd..d1cedf4b51 100644
--- a/dashboard/src/theme/DarkTheme.ts
+++ b/dashboard/src/theme/DarkTheme.ts
@@ -8,35 +8,35 @@ const PurpleThemeDark: ThemeTypes = {
     'carousel-control-size': 10
   },
   colors: {
-    primary: '#3c96ca',
-    secondary: '#4ea4d8',
+    primary: '#5ba4d4',
+    secondary: '#4a95c4',
     info: '#03c9d7',
     success: '#52c41a',
     accent: '#FFAB91',
     warning: '#faad14',
     error: '#ff4d4f',
-    lightprimary: '#e8f3fa',
-    lightsecondary: '#e8f3fa',
-    lightsuccess: '#b9f6ca',
-    lighterror: '#f9d8d8',
-    lightwarning: '#fff8e1',
-    primaryText: '#ffffff',
-    secondaryText: '#ffffffcc',
-    darkprimary: '#2f86bd',
-    darksecondary: '#2f86bd',
-    borderLight: '#d0d0d0',
+    lightprimary: '#1a2e3d',
+    lightsecondary: '#1a2e3d',
+    lightsuccess: '#1a3a1a',
+    lighterror: '#3d1a1a',
+    lightwarning: '#3d351a',
+    primaryText: '#e8eaed',
+    secondaryText: '#ffffffdd',
+    darkprimary: '#3a8ab8',
+    darksecondary: '#3a8ab8',
+    borderLight: '#3a3a3a',
     border: '#333333ee',
     inputBorder: '#787878',
     containerBg: '#1a1a1a',
-    surface: '#1f1f1f',
-    'on-surface-variant': '#000',
+    surface: '#242424',
+    'on-surface-variant': '#e0e0e0',
     facebook: '#4267b2',
     twitter: '#1da1f2',
     linkedin: '#0e76a8',
     gray100: '#cccccccc',
     primary200: '#84c9ea',
     secondary200: '#8cc4e1',
-    background: '#1d1d1d',
+    background: '#1a1a1a',
     overlay: '#111111aa',
     codeBg: '#282833',
     preBg: 'rgb(23, 23, 23)',
diff --git a/dashboard/src/views/ExtensionPage.vue b/dashboard/src/views/ExtensionPage.vue
index ce859296c0..e2cbf88e85 100644
--- a/dashboard/src/views/ExtensionPage.vue
+++ b/dashboard/src/views/ExtensionPage.vue
@@ -153,7 +153,7 @@ const {
 </script>
 
 <template>
-  <v-row>
+  <v-row class="extension-page">
     <v-col cols="12" md="12">
       <v-card variant="flat" style="background-color: transparent">
         <!-- 标签页 -->
@@ -868,3 +868,9 @@ const {
   box-shadow: 0 12px 20px rgba(var(--v-theme-primary), 0.4);
 }
 </style>
+
+<style>
+.v-theme--PurpleThemeDark .extension-page .plugin-handler-item {
+  background-color: rgb(var(--v-theme-mcpCardBg));
+}
+</style>
diff --git a/dashboard/src/views/PersonaPage.vue b/dashboard/src/views/PersonaPage.vue
index 102028c6da..ec62b5aa5e 100644
--- a/dashboard/src/views/PersonaPage.vue
+++ b/dashboard/src/views/PersonaPage.vue
@@ -5,7 +5,7 @@
             <v-row class="d-flex justify-space-between align-center px-4 py-3 pb-6">
                 <div>
                     <h1 class="text-h1 font-weight-bold mb-2">
-                        <v-icon color="black" class="me-2">mdi-heart</v-icon>{{ t('core.navigation.persona') }}
+                        <v-icon class="me-2">mdi-heart</v-icon>{{ t('core.navigation.persona') }}
                     </h1>
                     <p class="text-subtitle-1 text-medium-emphasis mb-0">
                         {{ tm('page.description') }}
diff --git a/dashboard/src/views/PlatformPage.vue b/dashboard/src/views/PlatformPage.vue
index a6c6898a63..678274f6de 100644
--- a/dashboard/src/views/PlatformPage.vue
+++ b/dashboard/src/views/PlatformPage.vue
@@ -4,7 +4,7 @@
       <v-row class="d-flex justify-space-between align-center px-4 py-3 pb-8">
         <div>
           <h1 class="text-h1 font-weight-bold mb-2 d-flex align-center">
-            <v-icon color="black" class="me-2">mdi-robot</v-icon>{{ tm('title') }}
+            <v-icon class="me-2">mdi-robot</v-icon>{{ tm('title') }}
           </h1>
           <p class="text-subtitle-1 text-medium-emphasis mb-4">
             {{ tm('subtitle') }}
diff --git a/dashboard/src/views/ProviderPage.vue b/dashboard/src/views/ProviderPage.vue
index 70fb6a39e9..3f91a2e355 100644
--- a/dashboard/src/views/ProviderPage.vue
+++ b/dashboard/src/views/ProviderPage.vue
@@ -5,7 +5,7 @@
       <v-row class="d-flex justify-space-between align-center px-4 py-3 pb-4">
         <div>
           <h1 class="text-h1 font-weight-bold mb-2">
-            <v-icon color="black" class="me-2">mdi-creation</v-icon>{{ tm('title') }}
+            <v-icon class="me-2">mdi-creation</v-icon>{{ tm('title') }}
           </h1>
           <p class="text-subtitle-1 text-medium-emphasis mb-4">
             {{ tm('subtitle') }}
diff --git a/dashboard/src/views/alkaid/KnowledgeBase.vue b/dashboard/src/views/alkaid/KnowledgeBase.vue
index aa3783236c..185148257f 100644
--- a/dashboard/src/views/alkaid/KnowledgeBase.vue
+++ b/dashboard/src/views/alkaid/KnowledgeBase.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="flex-grow-1" style="display: flex; flex-direction: column; height: 100%;">
+    <div class="knowledge-base-view flex-grow-1" style="display: flex; flex-direction: column; height: 100%;">
         <div style="flex-grow: 1; width: 100%; border: 1px solid #eee; border-radius: 8px; padding: 16px">
             <v-banner lines="one">
                 <template v-slot:text>
@@ -18,7 +18,7 @@
                     {{ tm('notInstalled.install') }}
                 </v-btn>
                 <ConsoleDisplayer v-show="installing"
-                    style="background-color: #fff; max-height: 300px; margin-top: 16px; max-width: 100%"
+                    style="max-height: 300px; margin-top: 16px; max-width: 100%"
                     :show-level-btns="false"></ConsoleDisplayer>
             </div>
             <div v-else-if="kbCollections.length == 0" class="d-flex align-center justify-center flex-column"
@@ -1373,3 +1373,17 @@ export default {
     padding-right: 12px;
 }
 </style>
+
+<style>
+.v-theme--PurpleThemeDark .knowledge-base-view .book-content {
+    background: linear-gradient(145deg, rgb(var(--v-theme-background)) 0%, rgb(var(--v-theme-lightprimary)) 100%);
+}
+
+.v-theme--PurpleThemeDark .knowledge-base-view .kb-name {
+    color: rgba(var(--v-theme-on-surface-variant), 0.84);
+}
+
+.v-theme--PurpleThemeDark .knowledge-base-view .kb-count {
+    color: rgba(var(--v-theme-on-surface-variant), 0.58);
+}
+</style>
diff --git a/dashboard/src/views/alkaid/LongTermMemory.vue b/dashboard/src/views/alkaid/LongTermMemory.vue
index 767df8a4ed..327c27e4bc 100644
--- a/dashboard/src/views/alkaid/LongTermMemory.vue
+++ b/dashboard/src/views/alkaid/LongTermMemory.vue
@@ -1060,4 +1060,19 @@ export default {
   overflow: auto;
   font-size: 12px;
 }
+
+</style>
+
+<style>
+.v-theme--PurpleThemeDark #long-term-memory #graph-container {
+  background-color: rgb(var(--v-theme-background));
+}
+
+.v-theme--PurpleThemeDark #long-term-memory .d3-graph {
+  background-color: rgb(var(--v-theme-background));
+}
+
+.v-theme--PurpleThemeDark .fact-detail-card pre {
+  background-color: rgb(var(--v-theme-codeBg));
+}
 </style>
diff --git a/dashboard/src/views/authentication/auth/LoginPage.vue b/dashboard/src/views/authentication/auth/LoginPage.vue
index ea9955a0e1..acd1e798a2 100644
--- a/dashboard/src/views/authentication/auth/LoginPage.vue
+++ b/dashboard/src/views/authentication/auth/LoginPage.vue
@@ -53,10 +53,10 @@ onMounted(async () => {
               style="height: 24px !important; opacity: 0.9 !important; align-self: center !important; border-color: rgba(var(--v-theme-primary), 0.45) !important;"></v-divider>
             <v-btn @click="toggleTheme" class="theme-toggle-btn" icon variant="text" size="small">
               <v-icon size="18" :color="'rgb(var(--v-theme-primary))'">
-                mdi-white-balance-sunny
+                {{ customizer.uiTheme === 'PurpleThemeDark' ? 'mdi-white-balance-sunny' : 'mdi-weather-night' }}
               </v-icon>
               <v-tooltip activator="parent" location="top">
-                {{ t('theme.switchToLight') }}
+                {{ customizer.uiTheme === 'PurpleThemeDark' ? t('theme.switchToLight') : t('theme.switchToDark') }}
               </v-tooltip>
             </v-btn>
           </div>