refactor: 抽象出业务颜色

web/src/components/Modal.tsx

@@ -91,7 +91,7 @@ export const Modal: React.FC<ModalProps> = React.memo((props) => {
         <ModalContext.Provider value={{ closeModal }}>
           {/* Inner */}
           <div
-            className="modal-inner bg-gray-700 rounded overflow-auto relative"
+            className="modal-inner bg-content-light dark:bg-content-dark rounded overflow-auto relative"
             style={{ maxHeight: '80vh', maxWidth: '80vw' }}
             onClick={stopPropagation}
           >

web/src/components/PillTabs.less

@@ -1,5 +1,4 @@
 .pill-tabs.ant-tabs.ant-tabs-card {
-  // color: ${(props) => props.theme.color.textNormal};
   @apply text-gray-100;
 
   .ant-tabs-nav {

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

@@ -56,10 +56,13 @@ export const PageContent: React.FC<PageContentProps> = React.memo((props) => {
 
   const sidebarEl = _isNil(sidebar) ? null : (
     <div
-      className={clsx('bg-gray-800 flex-shrink-0 transition-width', {
+      className={clsx(
-        'w-60': showSidebar,
+        'bg-sidebar-light dark:bg-sidebar-dark flex-shrink-0 transition-width',
-        'w-0': !showSidebar,
+        {
-      })}
+          'w-60': showSidebar,
+          'w-0': !showSidebar,
+        }
+      )}
     >
       {props.sidebar}
     </div>
@@ -82,7 +85,7 @@ export const PageContent: React.FC<PageContentProps> = React.memo((props) => {
     <>
       {sidebarEl}
 
-      <div className="flex flex-auto bg-gray-700 relative overflow-auto">
+      <div className="flex flex-auto bg-content-light dark:bg-content-dark relative overflow-auto">
         {contentMaskEl}
         {contentEl}
       </div>

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

@@ -14,7 +14,7 @@ export const Navbar: React.FC = React.memo(() => {
   const userInfo = useAppSelector((state) => state.user.info);
 
   return (
-    <div className="w-18 bg-gray-900 flex flex-col justify-start items-center pt-4 pb-4">
+    <div className="w-18 bg-navbar-light dark:bg-navbar-dark flex flex-col justify-start items-center pt-4 pb-4">
       <MobileMenuBtn />
 
       {/* Navbar */}

web/src/routes/Main/Provider.tsx

@@ -72,7 +72,7 @@ export const MainProvider: React.FC = React.memo((props) => {
 
   if (loading) {
     return (
-      <div className="fixed inset-0 flex items-center justify-center bg-gray-700 text-white text-xl">
+      <div className="fixed inset-0 flex items-center justify-center bg-content-light dark:bg-content-dark text-white text-xl">
         <LoadingSpinner tip={t('正在连接到聊天服务器...')} />
       </div>
     );

web/tailwind.config.js

@@ -3,6 +3,7 @@
 // 默认配置文件: https://unpkg.com/browse/tailwindcss@2.2.7/stubs/defaultConfig.stub.js
 
 const plugin = require('tailwindcss/plugin');
+const colors = require('tailwindcss/colors');
 
 const customTheme = {
   boxShadow: {
@@ -53,6 +54,20 @@ module.exports = {
       desktop: { min: '640px' }, // alias
     },
     extend: {
+      colors: {
+        navbar: {
+          light: colors.coolGray[300],
+          dark: colors.coolGray[900],
+        },
+        sidebar: {
+          light: colors.coolGray[200],
+          dark: colors.coolGray[800],
+        },
+        content: {
+          light: colors.coolGray[100],
+          dark: colors.coolGray[700],
+        },
+      },
       borderRadius: {
         '1/2': '50%',
       },