diff --git a/web/src/components/ChatBox/ChatInputBox/index.tsx b/web/src/components/ChatBox/ChatInputBox/index.tsx
index 7ed678f2..9b31ff07 100644
--- a/web/src/components/ChatBox/ChatInputBox/index.tsx
+++ b/web/src/components/ChatBox/ChatInputBox/index.tsx
@@ -61,7 +61,7 @@ export const ChatInputBox: React.FC<ChatInputBoxProps> = React.memo((props) => {
   return (
     <ChatInputActionContext.Provider value={{ sendMsg: props.onSendMsg }}>
       <div className="px-4 py-2">
-        <div className="bg-gray-600 flex rounded-md items-center">
+        <div className="bg-white dark:bg-gray-600 flex rounded-md items-center">
           <Input
             ref={inputRef}
             className="outline-none shadow-none border-0 py-2.5 px-4 flex-1"
diff --git a/web/src/components/GroupPanelItem.tsx b/web/src/components/GroupPanelItem.tsx
index afeaab9d..a07e64a2 100644
--- a/web/src/components/GroupPanelItem.tsx
+++ b/web/src/components/GroupPanelItem.tsx
@@ -18,7 +18,7 @@ export const GroupPanelItem: React.FC<{
     <Link className="block" to={to}>
       <div
         className={clsx(
-          'w-full hover:bg-white hover:bg-opacity-20 cursor-pointer text-white rounded px-1 h-8 flex items-center text-base group',
+          'w-full hover:bg-white hover:bg-opacity-20 cursor-pointer text-gray-900 dark:text-white rounded px-1 h-8 flex items-center text-base group',
           {
             'bg-white bg-opacity-20': isActive,
           }
@@ -26,7 +26,10 @@ export const GroupPanelItem: React.FC<{
       >
         <div className="flex items-center justify-center px-1 mr-1">{icon}</div>
 
-        <Typography.Text className="flex-1 text-white" ellipsis={true}>
+        <Typography.Text
+          className="flex-1 text-gray-900 dark:text-white"
+          ellipsis={true}
+        >
           {name}
         </Typography.Text>
 
diff --git a/web/src/components/PillTabs.less b/web/src/components/PillTabs.less
index 90fc5991..2ebb608b 100644
--- a/web/src/components/PillTabs.less
+++ b/web/src/components/PillTabs.less
@@ -12,7 +12,7 @@
       border: 0;
       margin: 2px;
       padding: 2px 8px;
-      @apply text-gray-800 dark:text-gray-200 bg-opacity-0 bg-black dark:bg-white;
+      @apply text-gray-800 dark:text-gray-200 bg-black bg-opacity-0 dark:bg-white dark:bg-opacity-0;
 
       &.ant-tabs-tab-active,
       &:hover,
diff --git a/web/src/components/modals/CreateGroup.tsx b/web/src/components/modals/CreateGroup.tsx
index 3e8a5397..ab4a9839 100644
--- a/web/src/components/modals/CreateGroup.tsx
+++ b/web/src/components/modals/CreateGroup.tsx
@@ -154,7 +154,7 @@ export const ModalCreateGroup: React.FC = React.memo(() => {
             <Button
               type="link"
               onClick={handleBack}
-              className="text-white font-bold"
+              className="text-gray-600 dark:text-white font-bold"
             >
               {t('返回')}
             </Button>
diff --git a/web/src/plugin/PluginStore/Item.tsx b/web/src/plugin/PluginStore/Item.tsx
index d4b94e0a..14901d0c 100644
--- a/web/src/plugin/PluginStore/Item.tsx
+++ b/web/src/plugin/PluginStore/Item.tsx
@@ -42,7 +42,7 @@ export const PluginStoreItem: React.FC<{
   }, [manifest]);
 
   return (
-    <div className="rounded-md flex w-80 h-36 bg-black bg-opacity-40 py-2 px-3">
+    <div className="rounded-md flex w-80 h-36 bg-white dark:bg-black bg-opacity-40 shadow py-2 px-3">
       <div className="flex w-full">
         <div className="mr-2">
           <Avatar shape="square" src={manifest.icon} name={manifest.label} />
@@ -51,7 +51,7 @@ export const PluginStoreItem: React.FC<{
         <div className="flex flex-col flex-1">
           <div className="font-bold">{manifest.label}</div>
 
-          <div className="text-xs text-gray-300 text-opacity-50">
+          <div className="text-xs text-gray-700 dark:text-gray-300 text-opacity-50">
             {manifest.name}
           </div>
 
diff --git a/web/src/routes/Main/Navbar/SettingBtn.tsx b/web/src/routes/Main/Navbar/SettingBtn.tsx
index f5a61262..91f3d969 100644
--- a/web/src/routes/Main/Navbar/SettingBtn.tsx
+++ b/web/src/routes/Main/Navbar/SettingBtn.tsx
@@ -10,7 +10,7 @@ export const SettingBtn: React.FC = React.memo(() => {
 
   return (
     <Icon
-      className="text-3xl text-white cursor-pointer"
+      className="text-3xl text-gray-600 dark:text-white cursor-pointer"
       icon="mdi:dots-horizontal"
       onClick={handleClick}
     />