From 6ce3b7deeb796038171e5323fa2d3c654a7a7852 Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Sat, 7 Jan 2023 23:01:13 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=20feat:=20useTheme=20=E4=B8=AD?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=20appearance=20=E7=AD=89=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/containers/ThemeProvider/index.tsx | 11 +++++++++--
 src/context/ThemeModeContext.ts        | 13 +++++++++----
 src/hooks/useThemeMode.ts              | 13 ++-----------
 src/index.ts                           |  1 +
 src/types/theme.ts                     |  3 ++-
 5 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/src/containers/ThemeProvider/index.tsx b/src/containers/ThemeProvider/index.tsx
index 211016e7..13fce53a 100644
--- a/src/containers/ThemeProvider/index.tsx
+++ b/src/containers/ThemeProvider/index.tsx
@@ -1,4 +1,4 @@
-import { useAntdTheme } from '@/hooks';
+import { useAntdTheme, useThemeMode } from '@/hooks';
 import { Theme } from '@/types';
 import { ThemeProvider as Provider } from '@emotion/react';
 import { memo, PropsWithChildren, ReactElement } from 'react';
@@ -19,9 +19,16 @@ export const ThemeProvider: <T = Record<string, string>, S = Record<string, stri
   props: PropsWithChildren<ThemeProviderProps<T, S>>,
 ) => ReactElement | null = memo(({ children, customToken = {}, customStylish = {} }) => {
   const { stylish: antdStylish, ...antdToken } = useAntdTheme();
+  const themeState = useThemeMode();
 
   const stylish = { ...customStylish, ...antdStylish };
-  const theme: Theme = { ...antdToken, ...customToken, stylish };
+
+  const theme: Theme = {
+    ...antdToken,
+    ...customToken,
+    stylish,
+    ...themeState,
+  };
 
   return <Provider theme={theme}>{children}</Provider>;
 });
diff --git a/src/context/ThemeModeContext.ts b/src/context/ThemeModeContext.ts
index 67015229..f88c41cf 100644
--- a/src/context/ThemeModeContext.ts
+++ b/src/context/ThemeModeContext.ts
@@ -1,10 +1,15 @@
 import { createContext } from 'react';
 
-import { DisplayTheme, ThemeMode } from '@/types';
+import { ThemeAppearance, ThemeMode } from '@/types';
 
-export interface ThemeModeContextState {
-  appearance: DisplayTheme;
+export interface ThemeContextState {
+  appearance: ThemeAppearance;
   themeMode: ThemeMode;
+  isDarkMode: boolean;
 }
 
-export const ThemeModeContext = createContext<ThemeModeContextState | undefined>(undefined);
+export const ThemeModeContext = createContext<ThemeContextState>({
+  appearance: 'light',
+  isDarkMode: false,
+  themeMode: 'light',
+});
diff --git a/src/hooks/useThemeMode.ts b/src/hooks/useThemeMode.ts
index b9f303b6..f653f0e6 100644
--- a/src/hooks/useThemeMode.ts
+++ b/src/hooks/useThemeMode.ts
@@ -1,14 +1,5 @@
 import { useContext } from 'react';
 
-import { ThemeModeContext } from '@/context';
+import { ThemeContextState, ThemeModeContext } from '@/context';
 
-export const useThemeMode = () => {
-  const value = useContext(ThemeModeContext);
-
-  if (value === undefined)
-    throw Error(
-      '[WrapperError]你可能没有使用 <AppContainer /> 组件，请确保在组件顶层包裹 AppContainer 组件后再使用该 hooks。',
-    );
-
-  return value;
-};
+export const useThemeMode = (): ThemeContextState => useContext(ThemeModeContext);
diff --git a/src/index.ts b/src/index.ts
index c07122fd..7f101567 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,5 @@
 export * from './containers';
+export type { ThemeContextState } from './context';
 export * from './functions';
 export * from './hooks';
 export * from './types';
diff --git a/src/types/theme.ts b/src/types/theme.ts
index 520be474..4c7c7b37 100644
--- a/src/types/theme.ts
+++ b/src/types/theme.ts
@@ -1,3 +1,4 @@
+import { ThemeContextState } from '@/context';
 import { AliasToken } from 'antd/es/theme/interface';
 
 export type AntdToken = AliasToken;
@@ -26,6 +27,6 @@ export interface AntdTheme extends AntdToken {
 
 export interface FullToken extends AntdToken, CustomToken {}
 
-export interface Theme extends FullToken {
+export interface Theme extends FullToken, ThemeContextState {
   stylish: Stylish;
 }