From 582630f4042be2b72be310891d1c7249e1e039e5 Mon Sep 17 00:00:00 2001
From: Caleb <xxy3429924750@126.com>
Date: Thu, 13 Aug 2026 00:08:39 +0800
Subject: [PATCH 1/2] fix: improve provider icons in dark mode

---
 .../components/provider/AddNewProvider.vue    | 13 +++++--
 .../provider/ProviderSourcesPanel.vue         | 12 +++++++
 dashboard/src/components/shared/ItemCard.vue  |  9 +++++
 .../src/composables/useProviderSources.ts     | 12 +++++--
 dashboard/src/utils/providerUtils.js          | 34 +++++++++++++++++++
 dashboard/src/views/ProviderPage.vue          |  5 ++-
 6 files changed, 79 insertions(+), 6 deletions(-)

diff --git a/dashboard/src/components/provider/AddNewProvider.vue b/dashboard/src/components/provider/AddNewProvider.vue
index 156c95c478..6fe6e557d6 100644
--- a/dashboard/src/components/provider/AddNewProvider.vue
+++ b/dashboard/src/components/provider/AddNewProvider.vue
@@ -45,7 +45,11 @@
                                         </div>
                                         <div class="provider-card-logo">
                                             <img :src="getProviderIcon(template.provider)"
-                                                v-if="getProviderIcon(template.provider)" class="provider-logo-img">
+                                                v-if="getProviderIcon(template.provider)"
+                                                :class="[
+                                                    'provider-logo-img',
+                                                    { 'provider-icon--monochrome': isMonochromeProviderIcon(template.provider) }
+                                                ]">
                                             <div v-else class="provider-logo-fallback">
                                                 {{ name[0].toUpperCase() }}
                                             </div>
@@ -72,7 +76,7 @@
 
 <script>
 import { useModuleI18n } from '@/i18n/composables';
-import { getProviderIcon, getProviderDescription } from '@/utils/providerUtils';
+import { getProviderIcon, getProviderDescription, isMonochromeProviderIcon } from '@/utils/providerUtils';
 
 const AVAILABLE_PROVIDER_TABS = ['agent_runner', 'speech_to_text', 'text_to_speech', 'embedding', 'rerank'];
 
@@ -151,6 +155,7 @@ export default {
 
         // 从工具函数导入
         getProviderIcon,
+        isMonochromeProviderIcon,
 
         // 获取提供商简介
         getProviderDescription(template, name) {
@@ -228,6 +233,10 @@ export default {
     object-fit: contain;
 }
 
+:global(.v-theme--PurpleThemeDark .provider-icon--monochrome) {
+    filter: brightness(0) invert(1);
+}
+
 .provider-logo-fallback {
     width: 50px;
     height: 50px;
diff --git a/dashboard/src/components/provider/ProviderSourcesPanel.vue b/dashboard/src/components/provider/ProviderSourcesPanel.vue
index c2c7c9d2f3..a75273f551 100644
--- a/dashboard/src/components/provider/ProviderSourcesPanel.vue
+++ b/dashboard/src/components/provider/ProviderSourcesPanel.vue
@@ -25,6 +25,7 @@
                   <v-img
                     v-if="item.raw.source?.provider"
                     :src="resolveSourceIcon(item.raw.source)"
+                    :class="{ 'provider-icon--monochrome': isMonochromeSourceIcon(item.raw.source) }"
                     alt="provider logo"
                     cover
                   ></v-img>
@@ -44,6 +45,7 @@
                     <v-img
                       v-if="item.raw.source?.provider"
                       :src="resolveSourceIcon(item.raw.source)"
+                      :class="{ 'provider-icon--monochrome': isMonochromeSourceIcon(item.raw.source) }"
                       alt="provider logo"
                       cover
                     ></v-img>
@@ -92,6 +94,7 @@
                 <v-img
                   v-if="sourceType.icon"
                   :src="sourceType.icon"
+                  :class="{ 'provider-icon--monochrome': sourceType.isMonochrome }"
                   alt="provider icon"
                   cover
                 ></v-img>
@@ -121,6 +124,7 @@
           <v-img
             v-if="source?.provider"
             :src="resolveSourceIcon(source)"
+            :class="{ 'provider-icon--monochrome': isMonochromeSourceIcon(source) }"
             alt="provider logo"
             cover
           ></v-img>
@@ -182,6 +186,10 @@ const props = defineProps({
     type: Function,
     required: true
   },
+  isMonochromeSourceIcon: {
+    type: Function,
+    required: true
+  },
   getSourceDisplayName: {
     type: Function,
     required: true
@@ -338,6 +346,10 @@ const selectSourceByValue = (value) => {
   background: transparent !important;
 }
 
+:global(.v-theme--PurpleThemeDark .provider-icon--monochrome) {
+  filter: brightness(0) invert(1);
+}
+
 .provider-source-item__content {
   min-width: 0;
   flex: 1;
diff --git a/dashboard/src/components/shared/ItemCard.vue b/dashboard/src/components/shared/ItemCard.vue
index a2ab8a729e..e11b53bb98 100644
--- a/dashboard/src/components/shared/ItemCard.vue
+++ b/dashboard/src/components/shared/ItemCard.vue
@@ -63,6 +63,7 @@
     <div class="d-flex justify-end align-center" style="position: absolute; bottom: 16px; right: 16px; opacity: 0.2;" v-if="bglogo">
       <v-img
         :src="bglogo"
+        :class="{ 'provider-icon--monochrome': bglogoMonochrome }"
         contain
         width="120"
         height="120"
@@ -97,6 +98,10 @@ export default {
       type: String,
       default: null
     },
+    bglogoMonochrome: {
+      type: Boolean,
+      default: false
+    },
     loading: {
       type: Boolean,
       default: false
@@ -170,4 +175,8 @@ export default {
 .item-status-indicator.active {
   background-color: #4caf50;
 }
+
+:global(.v-theme--PurpleThemeDark .provider-icon--monochrome) {
+  filter: brightness(0) invert(1);
+}
 </style>
diff --git a/dashboard/src/composables/useProviderSources.ts b/dashboard/src/composables/useProviderSources.ts
index f2ff86ed61..3ce4307b14 100644
--- a/dashboard/src/composables/useProviderSources.ts
+++ b/dashboard/src/composables/useProviderSources.ts
@@ -1,6 +1,6 @@
 import { ref, computed, onMounted, nextTick, watch } from 'vue'
 import { providerApi } from '@/api/v1'
-import { getProviderIcon } from '@/utils/providerUtils'
+import { getProviderIcon, isMonochromeProviderIcon } from '@/utils/providerUtils'
 import { askForConfirmation as askForConfirmationDialog, useConfirmDialog } from '@/utils/confirmDialog'
 import { normalizeTextInput } from '@/utils/inputValue'
 
@@ -84,13 +84,14 @@ export function useProviderSources(options: UseProviderSourcesOptions) {
       return []
     }
 
-    const types: Array<{ value: string; label: string; icon: string }> = []
+    const types: Array<{ value: string; label: string; icon: string; isMonochrome: boolean }> = []
     for (const [templateName, template] of Object.entries(providerTemplates.value)) {
       if (template.provider_type === selectedProviderType.value) {
         types.push({
           value: templateName,
           label: templateName,
-          icon: getProviderIcon(template.provider)
+          icon: getProviderIcon(template.provider),
+          isMonochrome: isMonochromeProviderIcon(template.provider)
         })
       }
     }
@@ -296,6 +297,10 @@ export function useProviderSources(options: UseProviderSourcesOptions) {
     return getProviderIcon(source.provider) || ''
   }
 
+  function isMonochromeSourceIcon(source: any) {
+    return Boolean(source && isMonochromeProviderIcon(source.provider))
+  }
+
   function getSourceDisplayName(source: any) {
     if (!source) return ''
     if (source.isPlaceholder) return source.templateKey || source.id || ''
@@ -767,6 +772,7 @@ export function useProviderSources(options: UseProviderSourcesOptions) {
 
     // helpers
     resolveSourceIcon,
+    isMonochromeSourceIcon,
     getSourceDisplayName,
     getModelMetadata,
     supportsImageInput,
diff --git a/dashboard/src/utils/providerUtils.js b/dashboard/src/utils/providerUtils.js
index b4f299d210..8930a18358 100644
--- a/dashboard/src/utils/providerUtils.js
+++ b/dashboard/src/utils/providerUtils.js
@@ -53,6 +53,40 @@ export function getProviderIcon(type) {
   return icons[type] || '';
 }
 
+/**
+ * Determine whether a provider icon is a monochrome SVG.
+ *
+ * These icons need to be inverted in the dark theme because they are loaded as
+ * external images and cannot inherit the page text color.
+ *
+ * @param {string} type - Provider type
+ * @returns {boolean} Whether the icon should be theme-inverted
+ */
+export function isMonochromeProviderIcon(type) {
+  return [
+    'openai',
+    'azure',
+    'xai',
+    'anthropic',
+    'ollama',
+    'deepseek',
+    'modelscope',
+    'zhipu',
+    'siliconflow',
+    'moonshot',
+    'kimi',
+    'kimi-code',
+    'ppio',
+    'lm_studio',
+    'minimax',
+    'minimax-token-plan',
+    'mimo',
+    'xiaomi',
+    'xiaomi-token-plan',
+    'openrouter'
+  ].includes(type);
+}
+
 /**
  * 获取提供商简介
  * @param {Object} template - 模板对象
diff --git a/dashboard/src/views/ProviderPage.vue b/dashboard/src/views/ProviderPage.vue
index c5238bd644..3c30fed5ee 100644
--- a/dashboard/src/views/ProviderPage.vue
+++ b/dashboard/src/views/ProviderPage.vue
@@ -45,6 +45,7 @@
               :available-source-types="availableSourceTypes"
               :tm="tm"
               :resolve-source-icon="resolveSourceIcon"
+              :is-monochrome-source-icon="isMonochromeSourceIcon"
               :get-source-display-name="getSourceDisplayName"
               @add-provider-source="addProviderSource"
               @select-provider-source="selectProviderSource"
@@ -159,6 +160,7 @@
                 enabled-field="enable"
                 :loading="isProviderTesting(provider.id)"
                 :bglogo="getProviderIcon(provider.provider)"
+                :bglogo-monochrome="isMonochromeProviderIcon(provider.provider)"
                 :show-copy-button="true"
                 @toggle-enabled="toggleProviderEnable(provider, !provider.enable)"
                 @delete="deleteProvider"
@@ -350,7 +352,7 @@ import ProviderModelsPanel from '@/components/provider/ProviderModelsPanel.vue'
 import ProviderSourcesPanel from '@/components/provider/ProviderSourcesPanel.vue'
 import { useProviderModelConfigDialog } from '@/composables/useProviderModelConfigDialog'
 import { useProviderSources } from '@/composables/useProviderSources'
-import { getProviderIcon } from '@/utils/providerUtils'
+import { getProviderIcon, isMonochromeProviderIcon } from '@/utils/providerUtils'
 
 const props = defineProps({
   defaultTab: {
@@ -394,6 +396,7 @@ const {
   advancedSourceConfig,
   manualProviderId,
   resolveSourceIcon,
+  isMonochromeSourceIcon,
   getSourceDisplayName,
   supportsImageInput,
   supportsAudioInput,

From 0e4fdabb2f4d066e0a96c76752ae4e8bcb1238d1 Mon Sep 17 00:00:00 2001
From: Caleb <xxy3429924750@126.com>
Date: Thu, 13 Aug 2026 00:23:32 +0800
Subject: [PATCH 2/2] fix: address provider icon review feedback

---
 .../components/provider/AddNewProvider.vue    |  4 ----
 .../provider/ProviderChatCompletionPanel.vue  |  2 ++
 .../provider/ProviderSourcesPanel.vue         |  4 ----
 dashboard/src/components/shared/ItemCard.vue  |  3 ---
 .../src/composables/useProviderSources.ts     | 21 ++++++++++++++-----
 dashboard/src/scss/_override.scss             |  4 ++++
 6 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/dashboard/src/components/provider/AddNewProvider.vue b/dashboard/src/components/provider/AddNewProvider.vue
index 6fe6e557d6..31a0dd5c09 100644
--- a/dashboard/src/components/provider/AddNewProvider.vue
+++ b/dashboard/src/components/provider/AddNewProvider.vue
@@ -233,10 +233,6 @@ export default {
     object-fit: contain;
 }
 
-:global(.v-theme--PurpleThemeDark .provider-icon--monochrome) {
-    filter: brightness(0) invert(1);
-}
-
 .provider-logo-fallback {
     width: 50px;
     height: 50px;
diff --git a/dashboard/src/components/provider/ProviderChatCompletionPanel.vue b/dashboard/src/components/provider/ProviderChatCompletionPanel.vue
index 8be1c1364f..d535678ff5 100644
--- a/dashboard/src/components/provider/ProviderChatCompletionPanel.vue
+++ b/dashboard/src/components/provider/ProviderChatCompletionPanel.vue
@@ -11,6 +11,7 @@
           :available-source-types="availableSourceTypes"
           :tm="tm"
           :resolve-source-icon="resolveSourceIcon"
+          :is-monochrome-source-icon="isMonochromeSourceIcon"
           :get-source-display-name="getSourceDisplayName"
           @add-provider-source="addProviderSource"
           @select-provider-source="selectProviderSource"
@@ -230,6 +231,7 @@ const {
   advancedSourceConfig,
   manualProviderId,
   resolveSourceIcon,
+  isMonochromeSourceIcon,
   getSourceDisplayName,
   supportsImageInput,
   supportsAudioInput,
diff --git a/dashboard/src/components/provider/ProviderSourcesPanel.vue b/dashboard/src/components/provider/ProviderSourcesPanel.vue
index a75273f551..863a5ec5b2 100644
--- a/dashboard/src/components/provider/ProviderSourcesPanel.vue
+++ b/dashboard/src/components/provider/ProviderSourcesPanel.vue
@@ -346,10 +346,6 @@ const selectSourceByValue = (value) => {
   background: transparent !important;
 }
 
-:global(.v-theme--PurpleThemeDark .provider-icon--monochrome) {
-  filter: brightness(0) invert(1);
-}
-
 .provider-source-item__content {
   min-width: 0;
   flex: 1;
diff --git a/dashboard/src/components/shared/ItemCard.vue b/dashboard/src/components/shared/ItemCard.vue
index e11b53bb98..b5d3253ff4 100644
--- a/dashboard/src/components/shared/ItemCard.vue
+++ b/dashboard/src/components/shared/ItemCard.vue
@@ -176,7 +176,4 @@ export default {
   background-color: #4caf50;
 }
 
-:global(.v-theme--PurpleThemeDark .provider-icon--monochrome) {
-  filter: brightness(0) invert(1);
-}
 </style>
diff --git a/dashboard/src/composables/useProviderSources.ts b/dashboard/src/composables/useProviderSources.ts
index 3ce4307b14..51604db63c 100644
--- a/dashboard/src/composables/useProviderSources.ts
+++ b/dashboard/src/composables/useProviderSources.ts
@@ -10,6 +10,17 @@ export interface UseProviderSourcesOptions {
   showMessage: (message: string, color?: string) => void
 }
 
+interface ProviderSourceType {
+  value: string
+  label: string
+  icon: string
+  isMonochrome: boolean
+}
+
+interface ProviderIconSource {
+  provider?: string
+}
+
 export function resolveDefaultTab(value?: string) {
   const normalized = (value || '').toLowerCase()
 
@@ -84,7 +95,7 @@ export function useProviderSources(options: UseProviderSourcesOptions) {
       return []
     }
 
-    const types: Array<{ value: string; label: string; icon: string; isMonochrome: boolean }> = []
+    const types: ProviderSourceType[] = []
     for (const [templateName, template] of Object.entries(providerTemplates.value)) {
       if (template.provider_type === selectedProviderType.value) {
         types.push({
@@ -292,13 +303,13 @@ export function useProviderSources(options: UseProviderSourcesOptions) {
     return type.includes(providerType)
   }
 
-  function resolveSourceIcon(source: any) {
+  function resolveSourceIcon(source: ProviderIconSource | null | undefined) {
     if (!source) return ''
-    return getProviderIcon(source.provider) || ''
+    return getProviderIcon(source.provider || '') || ''
   }
 
-  function isMonochromeSourceIcon(source: any) {
-    return Boolean(source && isMonochromeProviderIcon(source.provider))
+  function isMonochromeSourceIcon(source: ProviderIconSource | null | undefined) {
+    return Boolean(source && isMonochromeProviderIcon(source.provider || ''))
   }
 
   function getSourceDisplayName(source: any) {
diff --git a/dashboard/src/scss/_override.scss b/dashboard/src/scss/_override.scss
index 79204dce4f..cc10ba915a 100644
--- a/dashboard/src/scss/_override.scss
+++ b/dashboard/src/scss/_override.scss
@@ -130,3 +130,7 @@ pre, code, .markdown pre, .markdown code, .release-notes pre, .release-notes cod
     color: rgb(var(--v-theme-primary));
   }
 }
+
+.v-theme--PurpleThemeDark .provider-icon--monochrome {
+  filter: brightness(0) invert(1);
+}