✨ feat: useTheme 中增加 appearance 等主题状态属性

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>;
 });

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',
+});

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);

src/index.ts

@@ -1,4 +1,5 @@
 export * from './containers';
+export type { ThemeContextState } from './context';
 export * from './functions';
 export * from './hooks';
 export * from './types';

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;
 }