From 546a3e6469710e6cd89a4ba6074139fa66d68940 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Wed, 15 Sep 2021 20:04:44 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=8A=BD=E8=B1=A1=E5=87=BA?=
 =?UTF-8?q?=E4=B8=9A=E5=8A=A1=E9=A2=9C=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/Modal.tsx                |  2 +-
 web/src/components/PillTabs.less            |  1 -
 web/src/routes/Main/Content/PageContent.tsx | 13 ++++++++-----
 web/src/routes/Main/Navbar/index.tsx        |  2 +-
 web/src/routes/Main/Provider.tsx            |  2 +-
 web/tailwind.config.js                      | 15 +++++++++++++++
 6 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/web/src/components/Modal.tsx b/web/src/components/Modal.tsx
index d5f8e86d..06abc22a 100644
--- a/web/src/components/Modal.tsx
+++ b/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}
           >
diff --git a/web/src/components/PillTabs.less b/web/src/components/PillTabs.less
index 1d8d121d..6e7c4fdf 100644
--- a/web/src/components/PillTabs.less
+++ b/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 {
diff --git a/web/src/routes/Main/Content/PageContent.tsx b/web/src/routes/Main/Content/PageContent.tsx
index 02b352f9..9ee91814 100644
--- a/web/src/routes/Main/Content/PageContent.tsx
+++ b/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', {
-        'w-60': showSidebar,
-        'w-0': !showSidebar,
-      })}
+      className={clsx(
+        'bg-sidebar-light dark:bg-sidebar-dark flex-shrink-0 transition-width',
+        {
+          '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>
diff --git a/web/src/routes/Main/Navbar/index.tsx b/web/src/routes/Main/Navbar/index.tsx
index 02a79a28..1766e6cb 100644
--- a/web/src/routes/Main/Navbar/index.tsx
+++ b/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 */}
diff --git a/web/src/routes/Main/Provider.tsx b/web/src/routes/Main/Provider.tsx
index 0fffd630..a3af2f52 100644
--- a/web/src/routes/Main/Provider.tsx
+++ b/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>
     );
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index d8b027f7..98ab1e8f 100644
--- a/web/tailwind.config.js
+++ b/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%',
       },