AstrBotDevs · Soulter · Apr 8, 2026 · Mar 30, 2026 · Apr 6, 2026 · Apr 6, 2026
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,23 +354,23 @@ 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>
         <v-btn
           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>
       </div>
     </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
@@ -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));
+  }
+}