feat: added dark mode

baiwusanyu-c · Apr 13, 2023 · 24259e6 · 24259e6
1 parent e1f971a
commit 24259e6
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 15 deletions.
diff --git a/packages/extension/chrome-option/components/Header-Bar.tsx b/packages/extension/chrome-option/components/Header-Bar.tsx
@@ -16,6 +16,7 @@ interface HeaderBarProps {
   }
   repoInfo: IRepoWithPRs
   isLogin?: boolean
+  toggleTheme?: (boolean) => void
 }
 export const HeaderBar = (props: HeaderBarProps = {
   userInfo: {
@@ -33,13 +34,14 @@ export const HeaderBar = (props: HeaderBarProps = {
   const toggleTheme = (value: boolean) => {
     setDark(value)
     localStorage.setItem('dark', value.toString())
+    props.toggleTheme && props.toggleTheme(value)
   }
   useMount(() => {
     const dark = localStorage.getItem('dark')
     if (!dark || dark === 'false')
-      setDark(false)
+      toggleTheme(false)
     else
-      setDark(true)
+      toggleTheme(true)
   })
 
   useEffect(() => {
@@ -155,7 +157,7 @@ export const HeaderBar = (props: HeaderBarProps = {
             layout="vertical "
             onFinish={onFinish}
         >
-          <Form.Item label="Github Token" name="token" rules={[{ required: true }]}>
+          <Form.Item label={<span className="dark: text-gray-600">Github Token</span>} name="token" rules={[{ required: true }]}>
             <Input.Password
                 placeholder="input github token"
                 visibilityToggle={{

diff --git a/packages/extension/chrome-option/main.tsx b/packages/extension/chrome-option/main.tsx
@@ -1,22 +1,14 @@
-import { App, ConfigProvider } from 'antd'
+import { App } from 'antd'
 import { Provider } from 'react-redux'
 import ReactDOM from 'react-dom/client'
 import store from '../store'
 import { OptionPage } from './view/OptionPage'
 import 'antd/dist/reset.css'
 import 'uno.css'
 ReactDOM.createRoot(document.getElementById('app') as HTMLElement).render(
-  <ConfigProvider
-    theme={{
-      token: {
-        colorPrimary: '#1cd2a9',
-      },
-    }}
-  >
     <App>
       <Provider store={store}>
           <OptionPage />
       </Provider>
-    </App>
-  </ConfigProvider>,
+    </App>,
 )
diff --git a/packages/extension/chrome-option/view/OptionPage.tsx b/packages/extension/chrome-option/view/OptionPage.tsx
@@ -1,4 +1,4 @@
-import { Layout } from 'antd'
+import { ConfigProvider, Layout, theme } from 'antd'
 import { useEffect, useState } from 'react'
 import { isEmptyObj } from '@pr-checker/utils/common'
 import { getAllStorageSyncData } from '../../hooks/use-storage'
@@ -42,7 +42,20 @@ export const OptionPage = () => {
   const handleSelect = (data: IRepoWithPRs) => {
     setSelectRepo(data)
   }
+
+  const [dark, setDark] = useState(false)
+  const toggleTheme = (value: boolean) => {
+    setDark(value)
+  }
   return (
+      <ConfigProvider
+          theme={{
+            token: {
+              colorPrimary: '#1cd2a9',
+            },
+            algorithm: dark ? theme.darkAlgorithm : theme.defaultAlgorithm,
+          }}
+      >
       <div id="pr_checker_option">
         <Layout>
           <Sider className="shadow-xl p-2 !bg-white !dark:bg-gray-7 dark:shadow-xl dark:shadow-main" >
@@ -67,7 +80,7 @@ export const OptionPage = () => {
           </Sider>
           <Layout>
             <Header className="shadow shadow-main p-0 bg-white">
-              <HeaderBar userInfo={storeData.USER_INFO} repoInfo={selectRepo} isLogin={isLogin} />
+              <HeaderBar userInfo={storeData.USER_INFO} repoInfo={selectRepo} isLogin={isLogin} toggleTheme={toggleTheme} />
             </Header>
             <Content style={{ height: 'calc(100vh - 64px)' }}>
               {storeData.OP_TYPE === 'rebase'
@@ -77,5 +90,6 @@ export const OptionPage = () => {
           </Layout>
         </Layout>
       </div>
+      </ConfigProvider>
   )
 }