✨ feat: 自定义增加一个 isDark 字段

ant-design · Jan 7, 2023 · ac0fb23 · ac0fb23
1 parent 7480f0b
commit ac0fb23
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 10 deletions.
diff --git a/src/containers/AppContainer/ThemeContent.tsx b/src/containers/AppContainer/ThemeContent.tsx
@@ -9,12 +9,17 @@ import { ThemeConfig } from 'antd/es/config-provider/context';
 import { ThemeProvider } from '../ThemeProvider';
 import { AntdProvider, type AntdProviderProps } from './AntdProvider';
 
-export type GetCustomToken<T> = (theme: { token: AntdToken; appearance: ThemeAppearance }) => T;
+export type GetCustomToken<T> = (theme: {
+  token: AntdToken;
+  appearance: ThemeAppearance;
+  isDarkMode: boolean;
+}) => T;
 
 export type GetCustomStylish<S> = (theme: {
   token: FullToken;
   stylish: AntdStylish;
   appearance: ThemeAppearance;
+  isDarkMode: boolean;
 }) => S;
 
 type GetAntdTheme = (appearance: ThemeAppearance) => ThemeConfig | undefined;
@@ -47,19 +52,22 @@ const ThemeContent: <T, S>(props: ThemeContentProps<T, S>) => ReactElement | nul
 
   // 获取 自定义 token
   const customToken = useMemo(() => {
-    if (typeof customTokenOrFn === 'function') {
-      // @ts-ignore
-      return customTokenOrFn({ token, appearance });
+    if (customTokenOrFn instanceof Function) {
+      return customTokenOrFn({ token, appearance, isDarkMode });
     }
 
     return customTokenOrFn;
   }, [customTokenOrFn, token, appearance]);
 
   // 获取 stylish
   const customStylish = useMemo(() => {
-    if (typeof stylishOrGetStylish === 'function') {
-      // @ts-ignore
-      return stylishOrGetStylish({ token: { ...token, ...customToken }, stylish: antdStylish });
+    if (stylishOrGetStylish instanceof Function) {
+      return stylishOrGetStylish({
+        token: { ...token, ...customToken },
+        stylish: antdStylish,
+        appearance,
+        isDarkMode,
+      });
     }
     return stylishOrGetStylish;
   }, [stylishOrGetStylish, token, customToken, antdStylish, appearance]);

diff --git a/src/containers/AppContainer/ThemeSwitcher.tsx b/src/containers/AppContainer/ThemeSwitcher.tsx
@@ -63,7 +63,7 @@ const ThemeSwitcher: FC<ThemeSwitcherProps> = memo(
       if (!themeMode || themeMode === 'auto') {
         setTimeout(() => {
           matchBrowserTheme();
-        }, 100);
+        }, 1);
       }
 
       darkThemeMatch.addEventListener('change', matchBrowserTheme);

diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts
@@ -1,14 +1,17 @@
-import { useAntdTheme } from '@/hooks/useAntdTheme';
 import { Theme } from '@/types';
 import { useTheme as _useTheme } from '@emotion/react';
 
+import { useAntdTheme } from './useAntdTheme';
+import { useThemeMode } from './useThemeMode';
+
 export const useTheme = (): Theme => {
   const antdTheme = useAntdTheme();
+  const themeState = useThemeMode();
   const defaultTheme = _useTheme();
 
   //  如果是个空值，说明没有套 Provider，返回 antdTheme 的默认值
   if (Object.keys(defaultTheme).length === 0) {
-    return antdTheme;
+    return { ...antdTheme, ...themeState };
   }
 
   return defaultTheme as Theme;