✨ feat: 为 ThemeProvider 补齐主题切换的能力

src/containers/AppContainer/index.tsx

@@ -0,0 +1,21 @@
+import { App } from 'antd';
+import { memo, ReactElement } from 'react';
+
+import { ThemeProvider, ThemeProviderProps } from '../ThemeProvider';
+
+export interface AppContainerProps<T, S = Record<string, string>> extends ThemeProviderProps<T, S> {
+  className?: string;
+}
+
+export const AppContainer: <T, S>(props: AppContainerProps<T, S>) => ReactElement | null = memo(
+  ({
+    children,
+
+    className,
+    ...props
+  }) => (
+    <ThemeProvider {...props}>
+      <App className={className}>{children}</App>
+    </ThemeProvider>
+  ),
+);

src/containers/ThemeProvider/ThemeProvider.tsx

@@ -1,21 +1,39 @@
 import { ReactElement } from 'react';
 
 import AntdProvider from './AntdProvider';
+import ThemeSwitcher from './ThemeSwitcher';
 import TokenContainer from './TokenContainer';
 import { ThemeProviderProps } from './type';
 
-export const ThemeProvider: <T, S>(props: ThemeProviderProps<T, S>) => ReactElement | null = ({
+export const ThemeProvider: <T = any, S = any>(
+  props: ThemeProviderProps<T, S>,
+) => ReactElement | null = ({
   children,
+
   customToken,
   customStylish,
-  theme: themeProp,
+
+  theme,
+  getStaticInstance,
   prefixCls,
+
+  appearance,
+  defaultAppearance,
+  onAppearanceChange,
+  themeMode,
 }) => {
   return (
-    <AntdProvider prefixCls={prefixCls} theme={themeProp}>
-      <TokenContainer customToken={customToken} customStylish={customStylish}>
-        {children}
-      </TokenContainer>
-    </AntdProvider>
+    <ThemeSwitcher
+      themeMode={themeMode}
+      defaultAppearance={defaultAppearance}
+      appearance={appearance}
+      onAppearanceChange={onAppearanceChange}
+    >
+      <AntdProvider prefixCls={prefixCls} theme={theme} getStaticInstance={getStaticInstance}>
+        <TokenContainer customToken={customToken} customStylish={customStylish}>
+          {children}
+        </TokenContainer>
+      </AntdProvider>
+    </ThemeSwitcher>
   );
 };

src/containers/ThemeProvider/type.ts

@@ -1,4 +1,4 @@
-import { GetCustomStylish, GetCustomToken, ThemeAppearance } from '@/types';
+import { GetCustomStylish, GetCustomToken, ThemeAppearance, ThemeMode } from '@/types';
 import { ThemeConfig } from 'antd/es/config-provider/context';
 import { MessageInstance } from 'antd/es/message/interface';
 import { ModalStaticFunctions } from 'antd/es/modal/confirm';
@@ -11,6 +11,7 @@ export interface GetAntdTheme {
 
 export interface ThemeProviderProps<T, S = Record<string, string>> {
   children: ReactNode;
+  // --------------------- 自定义主题 --------------------- //
   /**
    * 自定义 Token
    */
@@ -19,16 +20,33 @@ export interface ThemeProviderProps<T, S = Record<string, string>> {
    * 自定义 Stylish
    */
   customStylish?: S | GetCustomStylish<S>;
+  // --------------------- antd 主题 --------------------- //
   /**
    * 直接传入 antd 主题，或者传入一个函数，根据当前的主题模式返回对应的主题
    */
   theme?: ThemeConfig | GetAntdTheme;
   prefixCls?: string;
+
   /**
    * 从 ThemeProvider 中获取静态方法的实例对象
    * @param instances
    */
   getStaticInstance?: (instances: StaticInstance) => void;
+
+  // --------------------- 主题切换 --------------------- //
+  /**
+   * 应用的展示外观主题，只存在亮色和暗色两种
+   * @default light
+   */
+  appearance?: ThemeAppearance;
+  defaultAppearance?: ThemeAppearance;
+  onAppearanceChange?: (mode: ThemeAppearance) => void;
+  /**
+   * 主题的展示模式，有三种配置：跟随系统、亮色、暗色
+   * 默认不开启自动模式，需要手动进行配置
+   * @default light
+   */
+  themeMode?: ThemeMode;
 }
 
 export interface StaticInstance {