feat: dark theme icon support (#28858)

web/app/components/header/account-setting/model-provider-page/declarations.ts

@@ -217,6 +217,7 @@ export type ModelProvider = {
     url: TypeWithI18N
   }
   icon_small: TypeWithI18N
+  icon_small_dark?: TypeWithI18N
   icon_large: TypeWithI18N
   background?: string
   supported_model_types: ModelTypeEnum[]
@@ -255,6 +256,7 @@ export type Model = {
   provider: string
   icon_large: TypeWithI18N
   icon_small: TypeWithI18N
+  icon_small_dark?: TypeWithI18N
   label: TypeWithI18N
   models: ModelItem[]
   status: ModelStatusEnum

web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx

@@ -6,8 +6,10 @@ import type {
 import { useLanguage } from '../hooks'
 import { Group } from '@/app/components/base/icons/src/vender/other'
 import { OpenaiBlue, OpenaiTeal, OpenaiViolet, OpenaiYellow } from '@/app/components/base/icons/src/public/llm'
-import cn from '@/utils/classnames'
 import { renderI18nObject } from '@/i18n-config'
+import { Theme } from '@/types/app'
+import cn from '@/utils/classnames'
+import useTheme from '@/hooks/use-theme'
 
 type ModelIconProps = {
   provider?: Model | ModelProvider
@@ -23,6 +25,7 @@ const ModelIcon: FC<ModelIconProps> = ({
   iconClassName,
   isDeprecated = false,
 }) => {
+  const { theme } = useTheme()
   const language = useLanguage()
   if (provider?.provider && ['openai', 'langgenius/openai/openai'].includes(provider.provider) && modelName?.startsWith('o'))
     return <div className='flex items-center justify-center'><OpenaiYellow className={cn('h-5 w-5', className)} /></div>
@@ -36,7 +39,16 @@ const ModelIcon: FC<ModelIconProps> = ({
   if (provider?.icon_small) {
     return (
       <div className={cn('flex h-5 w-5 items-center justify-center', isDeprecated && 'opacity-50', className)}>
-        <img alt='model-icon' src={renderI18nObject(provider.icon_small, language)} className={iconClassName} />
+        <img
+          alt='model-icon'
+          src={renderI18nObject(
+            theme === Theme.dark && provider.icon_small_dark
+              ? provider.icon_small_dark
+              : provider.icon_small,
+            language,
+          )}
+          className={iconClassName}
+        />
       </div>
     )
   }

web/app/components/header/account-setting/model-provider-page/provider-icon/index.tsx

@@ -40,7 +40,12 @@ const ProviderIcon: FC<ProviderIconProps> = ({
     <div className={cn('inline-flex items-center gap-2', className)}>
       <img
         alt='provider-icon'
-        src={renderI18nObject(provider.icon_small, language)}
+        src={renderI18nObject(
+          theme === Theme.dark && provider.icon_small_dark
+            ? provider.icon_small_dark
+            : provider.icon_small,
+          language,
+        )}
         className='h-6 w-6'
       />
       <div className='system-md-semibold text-text-primary'>