chore: Optimize dark mode styles (#23222) (#23231)

web/app/components/tools/add-tool-modal/empty.tsx

@@ -5,6 +5,7 @@ import { RiArrowRightUpLine } from '@remixicon/react'
 import Link from 'next/link'
 import cn from '@/utils/classnames'
 import { NoToolPlaceholder } from '../../base/icons/src/vender/other'
+import useTheme from '@/hooks/use-theme'
 type Props = {
   type?: ToolTypeEnum
   isAgent?: boolean
@@ -25,6 +26,7 @@ const Empty = ({
   isAgent,
 }: Props) => {
   const { t } = useTranslation()
+  const { theme } = useTheme()
 
   const hasLink = type && [ToolTypeEnum.Custom, ToolTypeEnum.MCP].includes(type)
   const Comp = (hasLink ? Link : 'div') as any
@@ -34,7 +36,7 @@ const Empty = ({
 
   return (
     <div className='flex h-[336px] flex-col items-center justify-center'>
-      <NoToolPlaceholder />
+      <NoToolPlaceholder className={theme === 'dark' ? 'invert' : ''} />
       <div className='mb-1 mt-2 text-[13px] font-medium leading-[18px] text-text-primary'>
         {hasTitle ? t(`tools.addToolModal.${renderType}.title`) : 'No tools available'}
       </div>