feat: dark theme icon support (#28858)

web/app/components/plugins/card/index.tsx

@@ -6,6 +6,8 @@ import { getLanguage } from '@/i18n-config/language'
 import cn from '@/utils/classnames'
 import { RiAlertFill } from '@remixicon/react'
 import React from 'react'
+import useTheme from '@/hooks/use-theme'
+import { Theme } from '@/types/app'
 import Partner from '../base/badges/partner'
 import Verified from '../base/badges/verified'
 import Icon from '../card/base/card-icon'
@@ -50,7 +52,9 @@ const Card = ({
   const locale = localeFromProps ? getLanguage(localeFromProps) : defaultLocale
   const { t } = useMixedTranslation(localeFromProps)
   const { categoriesMap } = useCategories(t, true)
-  const { category, type, name, org, label, brief, icon, verified, badges = [] } = payload
+  const { category, type, name, org, label, brief, icon, icon_dark, verified, badges = [] } = payload
+  const { theme } = useTheme()
+  const iconSrc = theme === Theme.dark && icon_dark ? icon_dark : icon
   const getLocalizedText = (obj: Record<string, string> | undefined) =>
     obj ? renderI18nObject(obj, locale) : ''
   const isPartner = badges.includes('partner')
@@ -71,7 +75,7 @@ const Card = ({
         {!hideCornerMark && <CornerMark text={categoriesMap[type === 'bundle' ? type : category]?.label} />}
         {/* Header */}
         <div className="flex">
-          <Icon src={icon} installed={installed} installFailed={installFailed} />
+          <Icon src={iconSrc} installed={installed} installFailed={installFailed} />
           <div className="ml-3 w-0 grow">
             <div className="flex h-5 items-center">
               <Title title={getLocalizedText(label)} />