From 15e3c12eabb2e5c2cdc6a70105a1cdb38ef2d60e Mon Sep 17 00:00:00 2001
From: LIghtJUNction <lightjunction.me@gmail.com>
Date: Sun, 29 Mar 2026 18:15:52 +0800
Subject: [PATCH] fix(dashboard): improve ChatInput dark mode styling and
 placeholder visibility

- Use semi-transparent dark background in input container
- Add backdrop blur and glow effects
- Fix placeholder text color in dark mode
---
 dashboard/src/components/chat/ChatInput.vue      | 16 +++++++++++++++-
 dashboard/src/components/chat/MessageList.vue    | 13 +++++++++++--
 .../src/components/platform/AddNewPlatform.vue   |  3 ++-
 .../components/provider/ProviderSourcesPanel.vue |  4 ++--
 4 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/dashboard/src/components/chat/ChatInput.vue b/dashboard/src/components/chat/ChatInput.vue
index 5371300b8..f7338d761 100644
--- a/dashboard/src/components/chat/ChatInput.vue
+++ b/dashboard/src/components/chat/ChatInput.vue
@@ -14,7 +14,7 @@
         border: isDark ? 'none' : '1px solid #e0e0e0',
         borderRadius: '24px',
         boxShadow: isDark ? 'none' : '0px 2px 2px rgba(0, 0, 0, 0.1)',
-        backgroundColor: isDark ? '#2d2d2d' : 'transparent',
+        backgroundColor: isDark ? 'rgba(15, 15, 22, 0.6)' : 'transparent',
         position: 'relative',
       }"
     >
@@ -579,6 +579,20 @@ defineExpose({
 </script>
 
 <style scoped>
+/* Dark mode input container glass */
+:deep(.input-container) {
+  background: rgba(15, 15, 22, 0.6) !important;
+  backdrop-filter: blur(16px) saturate(1.2) !important;
+  border: 1px solid rgba(0, 242, 255, 0.08) !important;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3) !important;
+}
+
+/* Fix placeholder visibility in dark mode */
+.chat-textarea::placeholder {
+  color: rgba(228, 225, 230, 0.35) !important;
+  opacity: 1 !important;
+}
+
 .input-area {
   padding: 16px;
   background-color: transparent;
diff --git a/dashboard/src/components/chat/MessageList.vue b/dashboard/src/components/chat/MessageList.vue
index b11bbd94a..71f7f3bf4 100644
--- a/dashboard/src/components/chat/MessageList.vue
+++ b/dashboard/src/components/chat/MessageList.vue
@@ -28,7 +28,10 @@
           <div
             class="message-bubble user-bubble"
             :class="{ 'has-audio': hasAudio(msg.content.message) }"
-            :style="{ backgroundColor: 'rgb(var(--v-theme-chatMessageBubble))' }"
+            :style="{
+              backgroundColor: 'var(--v-theme-chatMessageBubble)',
+              color: 'rgba(228, 225, 230, 0.9) !important',
+            }"
           >
             <!-- 遍历 message parts -->
             <template
@@ -182,7 +185,13 @@
             </v-icon>
           </v-avatar>
           <div class="bot-message-content">
-            <div class="message-bubble bot-bubble">
+            <div
+              class="message-bubble bot-bubble"
+              :style="{
+                backgroundColor: 'var(--v-theme-chatAssistantBubble)',
+                color: 'rgba(228, 225, 230, 0.9) !important',
+              }"
+            >
               <!-- Loading state -->
               <div v-if="msg.content.isLoading" class="loading-container">
                 <span class="loading-text">{{ tm("message.loading") }}</span>
diff --git a/dashboard/src/components/platform/AddNewPlatform.vue b/dashboard/src/components/platform/AddNewPlatform.vue
index 733c3f011..0361e6198 100644
--- a/dashboard/src/components/platform/AddNewPlatform.vue
+++ b/dashboard/src/components/platform/AddNewPlatform.vue
@@ -48,7 +48,7 @@
                       <template #prepend>
                         <img
                           :src="
-                            getPlatformIcon(platformTemplates[item.raw].type)
+                            getPlatformIcon(platformTemplates[item.raw]?.type)
                           "
                           style="
                             width: 32px;
@@ -543,6 +543,7 @@ import ConfigPage from "@/views/ConfigPage.vue";
 export default {
   name: "AddNewPlatform",
   components: { AstrBotConfig, AstrBotCoreConfigWrapper, ConfigPage },
+  emits: ["update:show", "show-toast", "refresh-config"],
   props: {
     show: {
       type: Boolean,
diff --git a/dashboard/src/components/provider/ProviderSourcesPanel.vue b/dashboard/src/components/provider/ProviderSourcesPanel.vue
index a9804cdf7..d42f28aa7 100644
--- a/dashboard/src/components/provider/ProviderSourcesPanel.vue
+++ b/dashboard/src/components/provider/ProviderSourcesPanel.vue
@@ -233,8 +233,8 @@ const emitDeleteSource = (source) => emit("delete-provider-source", source);
 }
 
 .provider-source-list-item--active {
-  background-color: #e8f0fe;
-  border: 1px solid rgba(var(--v-theme-primary), 0.25);
+  background-color: rgba(var(--v-theme-primary), 0.1) !important;
+  border: 1px solid rgba(var(--v-theme-primary), 0.2) !important;
 }
 
 @media (max-width: 960px) {