From caa5928ac47234ea2c16e1abcacfb0009aad369b Mon Sep 17 00:00:00 2001
From: HyaCinth <88471803+HyaCiovo@users.noreply.github.com>
Date: Thu, 31 Jul 2025 17:43:08 +0800
Subject: [PATCH] chore: Optimize dark mode styles (#23222) (#23231)

---
 web/app/components/base/emoji-picker/Inner.tsx         | 3 ++-
 web/app/components/plugins/marketplace/empty/index.tsx | 2 +-
 web/app/components/tools/add-tool-modal/empty.tsx      | 4 +++-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/web/app/components/base/emoji-picker/Inner.tsx b/web/app/components/base/emoji-picker/Inner.tsx
index 6fc4b67181..6c747c1583 100644
--- a/web/app/components/base/emoji-picker/Inner.tsx
+++ b/web/app/components/base/emoji-picker/Inner.tsx
@@ -149,7 +149,8 @@ const EmojiPickerInner: FC<IEmojiPickerInnerProps> = ({
     {/* Color Select */}
     <div className={cn('flex items-center justify-between p-3 pb-0')}>
       <p className='system-xs-medium-uppercase mb-2 text-text-primary'>Choose Style</p>
-      {showStyleColors ? <ChevronDownIcon className='h-4 w-4' onClick={() => setShowStyleColors(!showStyleColors)} /> : <ChevronUpIcon className='h-4 w-4' onClick={() => setShowStyleColors(!showStyleColors)} />}
+      {showStyleColors ? <ChevronDownIcon className='h-4 w-4 cursor-pointer text-text-quaternary' onClick={() => setShowStyleColors(!showStyleColors)} />
+        : <ChevronUpIcon className='h-4 w-4 cursor-pointer text-text-quaternary' onClick={() => setShowStyleColors(!showStyleColors)} />}
     </div>
     {showStyleColors && <div className='grid w-full grid-cols-8 gap-1 px-3'>
       {backgroundColors.map((color) => {
diff --git a/web/app/components/plugins/marketplace/empty/index.tsx b/web/app/components/plugins/marketplace/empty/index.tsx
index 441b1002d0..0306d5003d 100644
--- a/web/app/components/plugins/marketplace/empty/index.tsx
+++ b/web/app/components/plugins/marketplace/empty/index.tsx
@@ -46,7 +46,7 @@ const Empty = ({
       }
       <div className='absolute left-1/2 top-1/2 z-[2] flex -translate-x-1/2 -translate-y-1/2 flex-col items-center'>
         <div className='relative mb-3 flex h-14 w-14 items-center justify-center rounded-xl border border-dashed border-divider-deep bg-components-card-bg shadow-lg'>
-          <Group className='h-5 w-5' />
+          <Group className='h-5 w-5 text-text-primary' />
           <Line className='absolute right-[-1px] top-1/2 -translate-y-1/2' />
           <Line className='absolute left-[-1px] top-1/2 -translate-y-1/2' />
           <Line className='absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 rotate-90' />
diff --git a/web/app/components/tools/add-tool-modal/empty.tsx b/web/app/components/tools/add-tool-modal/empty.tsx
index 7390249dc1..5759589c8e 100644
--- a/web/app/components/tools/add-tool-modal/empty.tsx
+++ b/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>