refactor(web): 亮色模式的部分配色

web/src/components/FullModal/index.tsx

@@ -34,7 +34,7 @@ export const FullModal: React.FC<FullModalProps> = React.memo((props) => {
   return (
     <div
       className={clsx(
-        'fixed left-0 right-0 top-0 bottom-0 z-10 bg-gray-800 flex justify-center items-center',
+        'fixed left-0 right-0 top-0 bottom-0 z-10 bg-content-light dark:bg-content-dark flex justify-center items-center',
         {
           'opacity-0': !visible,
         }
@@ -48,7 +48,10 @@ export const FullModal: React.FC<FullModalProps> = React.memo((props) => {
           className="absolute right-8 top-8 cursor-pointer flex flex-col"
           onClick={handleClose}
         >
-          <Icon className="text-2xl border-2 rounded-1/2" icon="mdi:close" />
+          <Icon
+            className="text-2xl border-2 rounded-1/2 border-gray-900 dark:border-gray-100"
+            icon="mdi:close"
+          />
           <span className="text-center mt-0.5 font-bold">ESC</span>
         </div>
       )}

web/src/components/PillTabs.less

@@ -1,5 +1,5 @@
 .pill-tabs.ant-tabs.ant-tabs-card {
-  @apply text-gray-100;
+  @apply text-gray-900 dark:text-gray-100;
 
   .ant-tabs-nav {
     @apply px-2 py-3 m-0 text-base;
@@ -12,7 +12,7 @@
       border: 0;
       margin: 2px;
       padding: 2px 8px;
-      @apply text-gray-200 bg-opacity-0 bg-white;
+      @apply text-gray-800 dark:text-gray-200 bg-opacity-0 bg-black dark:bg-white;
 
       &.ant-tabs-tab-active,
       &:hover,
@@ -20,7 +20,7 @@
         @apply rounded bg-opacity-20;
 
         .ant-tabs-tab-btn {
-          @apply text-white;
+          @apply text-black dark:text-white ;
         }
       }
     }

web/src/components/SidebarView.tsx

@@ -33,9 +33,9 @@ const SidebarViewMenuItemTitle: React.FC<{
 }> = (props) => (
   <div
     className={clsx(
-      'rounded-sm px-1.5 py-2.5 mb-1 text-gray-300 cursor-pointer  hover:bg-black hover:bg-opacity-10 hover:text-gray-200',
+      'rounded-sm px-1.5 py-2.5 mb-1 text-gray-700 dark:text-gray-300 cursor-pointer  hover:bg-black hover:bg-opacity-10 hover:text-gray-800 dark:hover:text-gray-200',
       {
-        'bg-black bg-opacity-10 text-white': props.active,
+        'bg-black bg-opacity-10 text-gray-900 dark:text-white': props.active,
         'text-red-500': props.isDanger,
       }
     )}

web/src/components/modals/SettingsView/System.tsx

@@ -1,11 +1,13 @@
+import DevContainer from '@/components/DevContainer';
 import { FullModalField } from '@/components/FullModal/Field';
-import { Select } from 'antd';
+import { Select, Switch } from 'antd';
 import React, { useCallback } from 'react';
-import { showToasts, t } from 'tailchat-shared';
+import { showToasts, t, useDarkMode } from 'tailchat-shared';
 import { useLanguage } from 'tailchat-shared';
 
 export const SettingsSystem: React.FC = React.memo(() => {
   const { language, setLanguage } = useLanguage();
+  const { darkMode, setDarkMode } = useDarkMode();
 
   const handleChangeLanguage = useCallback(
     (newLang: string) => {
@@ -31,6 +33,18 @@ export const SettingsSystem: React.FC = React.memo(() => {
           </Select>
         }
       />
+
+      <DevContainer>
+        <FullModalField
+          title={t('暗黑模式')}
+          content={
+            <Switch
+              checked={darkMode}
+              onChange={(checked) => setDarkMode(checked)}
+            />
+          }
+        />
+      </DevContainer>
     </div>
   );
 });

web/src/routes/Main/Content/Personal/Friends/index.tsx

@@ -25,7 +25,11 @@ export const FriendPanel: React.FC = React.memo(() => {
         </PillTabPane>
         <PillTabPane
           tab={
-            <Badge className="text-white" size="small" count={send.length}>
+            <Badge
+              className="text-black dark:text-white"
+              size="small"
+              count={send.length}
+            >
               {t('已发送')}
             </Badge>
           }
@@ -35,7 +39,11 @@ export const FriendPanel: React.FC = React.memo(() => {
         </PillTabPane>
         <PillTabPane
           tab={
-            <Badge className="text-white" size="small" count={received.length}>
+            <Badge
+              className="text-black dark:text-white"
+              size="small"
+              count={received.length}
+            >
               {t('待处理')}
             </Badge>
           }

web/src/routes/Main/Content/Personal/Sidebar.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import { Icon } from '@iconify/react';
 import { SidebarItem } from '../SidebarItem';
-import { useDMConverseList } from 'tailchat-shared';
+import { t, useDMConverseList } from 'tailchat-shared';
 import { SidebarDMItem } from './SidebarDMItem';
 
 const SidebarSection: React.FC<{
   action: React.ReactNode;
 }> = React.memo((props) => {
   return (
-    <div className="h-10 text-white flex pt-4 px-2">
-      <span className="flex-1 overflow-hidden overflow-ellipsis text-xs text-gray-300">
+    <div className="h-10 text-gray-900 dark:text-white flex pt-4 px-2">
+      <span className="flex-1 overflow-hidden overflow-ellipsis text-xs text-gray-700 dark:text-gray-300">
         {props.children}
       </span>
       <div className="text-base opacity-70 hover:opacity-100 cursor-pointer">
@@ -29,17 +29,19 @@ export const Sidebar: React.FC = React.memo(() => {
   return (
     <div className="p-2">
       <SidebarItem
-        name="好友"
+        name={t('好友')}
         icon={<Icon icon="mdi:account-multiple" />}
         to="/main/personal/friends"
       />
       <SidebarItem
-        name="插件中心"
+        name={t('插件中心')}
         icon={<Icon icon="mdi:puzzle" />}
         to="/main/personal/plugins"
       />
 
-      <SidebarSection action={<Icon icon="mdi:plus" />}>私信</SidebarSection>
+      <SidebarSection action={<Icon icon="mdi:plus" />}>
+        {t('私信')}
+      </SidebarSection>
 
       {converseList.map((converse) => {
         return <SidebarDMItem key={converse._id} converse={converse} />;

web/src/routes/Main/Content/SidebarItem.tsx

@@ -21,7 +21,7 @@ export const SidebarItem: React.FC<SidebarItemProps> = React.memo((props) => {
     <Link to={to}>
       <div
         className={clsx(
-          'w-full hover:bg-white hover:bg-opacity-20 cursor-pointer text-white rounded px-2 h-11 flex items-center text-base group mb-0.5',
+          'w-full hover:bg-white hover:bg-opacity-20 cursor-pointer text-gray-900 dark:text-white rounded px-2 h-11 flex items-center text-base group mb-0.5',
           {
             'bg-white bg-opacity-20': isActive,
           }
@@ -35,7 +35,10 @@ export const SidebarItem: React.FC<SidebarItemProps> = React.memo((props) => {
           )}
         </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>
 

web/src/routes/Main/Navbar/NavItem.tsx

@@ -51,7 +51,7 @@ export const NavbarNavItem: React.FC<{
         >
           <span
             className={clsx(
-              'bg-white w-2 h-2 rounded transition-all duration-300',
+              'bg-gray-400 dark:bg-white w-2 h-2 rounded transition-all duration-300',
               {
                 'h-2 group-hover:h-5': !isActive,
                 'h-10': isActive,