Theme switch support (#3568)

### What problem does this PR solve?
- [x] New Feature (non-breaking change which adds functionality)

---------

Co-authored-by: Yingfeng <yingfeng.zhang@gmail.com>
Co-authored-by: Jin Hai <haijin.chn@gmail.com>

web/src/pages/chat/index.tsx

@@ -30,6 +30,7 @@ import {
 } from './hooks';
 
 import SvgIcon from '@/components/svg-icon';
+import { useTheme } from '@/components/theme-provider';
 import {
   useClickConversationCard,
   useClickDialogCard,
@@ -51,6 +52,7 @@ const Chat = () => {
   const { handleClickDialog } = useClickDialogCard();
   const { handleClickConversation } = useClickConversationCard();
   const { dialogId, conversationId } = useGetChatSearchParams();
+  const { theme } = useTheme();
   const {
     list: conversationList,
     addTemporaryConversation,
@@ -243,7 +245,9 @@ const Chat = () => {
                   key={x.id}
                   hoverable
                   className={classNames(styles.chatAppCard, {
-                    [styles.chatAppCardSelected]: dialogId === x.id,
+                    [theme === 'dark'
+                      ? styles.chatAppCardSelectedDark
+                      : styles.chatAppCardSelected]: dialogId === x.id,
                   })}
                   onMouseEnter={handleAppCardEnter(x.id)}
                   onMouseLeave={handleItemLeave}
@@ -316,7 +320,9 @@ const Chat = () => {
                   onMouseEnter={handleConversationCardEnter(x.id)}
                   onMouseLeave={handleConversationItemLeave}
                   className={classNames(styles.chatTitleCard, {
-                    [styles.chatTitleCardSelected]: x.id === conversationId,
+                    [theme === 'dark'
+                      ? styles.chatTitleCardSelectedDark
+                      : styles.chatTitleCardSelected]: x.id === conversationId,
                   })}
                 >
                   <Flex justify="space-between" align="center">