【React】Ant Design自定义主题风格及主题切换

Ant Design 的自定义主题，对于刚入手的时候感觉真是一脸蒙圈，那今天给它梳理倒腾下；

在这里插入图片描述

1、自定义主题要点

整体样式变化，主要两个部分：

1.1、Design Token

https://ant.design/docs/react/customize-theme-cn#theme

官方介绍一大堆，咱们粗暴点就当作key=>value配置内容来看和理解！
大体分为四块配置项：

分类	涉及配置项
通用/基本样式	token	可查阅SeedToken、MapToken、AliasToken
组件样式	components	查阅各个组件最底下的`主题变量（Design Token）`内容
样式算法	algorithm	这块其实就算UI库内部自动帮你换算不同“等级”颜色color值
扩展配置	inherit、cssVar、hashed	这块应该很少会去改它，做主题切换的时候建议`cssVar`开启

1.2、全局配置 ConfigProvider 组件

https://ant.design/components/config-provider-cn

import React from 'react';
import { ConfigProvider } from 'antd';// ...
const Demo: React.FC = () => (<ConfigProvider componentSize={"middle"}>// 界面组件</ConfigProvider>
);export default Demo;

这块涉及到主题样式的主要是componentSize配置项和组件配置

2、实战

以下做个实验性案例，不要纠结细节哈！

2.1、实验环境

next： 14.1.0
react：^18
antd：^5.14.1

√ Would you like to use TypeScript? ... Yes
√ Would you like to use ESLint? ... No
√ Would you like to use Tailwind CSS? ... No
√ Would you like to use `src/` directory? ... No
√ Would you like to use App Router? (recommended) ... Yes
√ Would you like to customize the default import alias (@/*)? ... Yes
√ What import alias would you like configured? ... @/*

2.2、目录结构

| - app|- page.tsx
|- theme|- default|- index.ts|- custom|- index.ts|- index.ts|- themeCenter.ts

2.3、相关文件编写

2.3.1、page.tsx

主要方便实验展示

"use client";import React, { useState } from "react";
import {SearchOutlined,AppstoreOutlined,MailOutlined,SettingOutlined,
} from "@ant-design/icons";
import { Button, Flex, Tooltip, Menu, Pagination, Divider } from "antd";import ThemeComponents from "@/theme";const items: any = [{label: "Navigation One",key: "mail",icon: <MailOutlined />,},
];const App: React.FC = () => {const [theme, setTheme] = useState("default");return (<><Flex gap="small"><Button type="primary" onClick={() => setTheme("default")}>主题1</Button><Button type="primary" onClick={() => setTheme("custom")}>主题2</Button></Flex><Divider /><ThemeComponents theme={theme} dark={'light'}><Flex gap="small" vertical><Flex wrap="wrap" gap="small"><Button type="primary" shape="circle">A</Button><Button type="primary" icon={<SearchOutlined />}>Search</Button><Tooltip title="search"><Button shape="circle" icon={<SearchOutlined />} /></Tooltip><Button icon={<SearchOutlined />}>Search</Button></Flex><Menu mode="horizontal" items={items} selectedKeys={["mail"]} /><Pagination defaultCurrent={1} total={50} /></Flex></ThemeComponents></>);
};export default App;

2.3.1、ThemeComponents

// 这里仅演示主题切换，其他业务逻辑~~~自己探索哈！
import React, { useEffect, useState } from "react";
import { ConfigProvider } from "antd";
import { ThemeModeEnum } from "@/theme/themeCenter.d";
import DefaultTheme from "./default";
import CustomTheme from "./custom";type Props = {theme: string;dark?: boolean,children: React.ReactNode;
};const ThemeMap = {default: DefaultTheme,custom: CustomTheme,
};const ThemeComponents = ({ theme = "default", dark, children }: Props) => {theme = theme ? theme : "default";const [themeCenter, setThemeCenter] = useState(new ThemeMap[theme]());const [darkTheme, setDarkTheme] = useState(dark);useEffect(() => {console.log("theme:", theme);setThemeCenter(new ThemeMap[theme]());}, [theme]);useEffect(() => {console.log("darkTheme:", dark);if(themeCenter){themeCenter.ThemeMode = dark;setDarkTheme(dark);}}, [dark]);return (<ConfigProvider {...themeCenter?.ThemeConfigProvider}>{children}</ConfigProvider>);
};export default ThemeComponents;

2.3.1、Theme管理

这部分主要涉及两个部分：基础主题类和继承主题类

继承主题类
这部分主要用于不同主题样式的具体化配置
按主题目录区分，方便主题做其他更复杂的扩展预留空间

// 案例file: theme/default/index.ts
import ThemeCenter from "../themeCenter"class ThemeConfiguration extends ThemeCenter
{// 这是父级ThemeCenter下放的初始化方法，主题初始化在这里进行// 除_initThemeConfig方法外，其他的可自行定义protected _initThemeConfig(){ // 设置主题色this.ThemeColor = '#FF5C00';// 设置基础主题样式Tokenthis.setThemeAllToken({fontSize: 14,colorLink: '#1890ff',}, 'token')// 设置组件样式Tokenthis.LayoutComponentsToken();this.MenuComponentsToken();// ConfigProvider组件默认配置this.setThemeConfigProvider({componentSize: 'small'})}protected LayoutComponentsToken(){this.setThemeComponentsToken('Layout',{headerBg: '#fff',headerColor: '#333',headerHeight: 35,headerPadding: '0 16px 0 0',lightSiderBg: 'transparent',siderBg: '#fff',bodyBg: 'transparent',// footerBg: '#f2f3f5',// footerPadding: '24px 0'});}protected MenuComponentsToken(){// @link https://ant.design/components/menu-cn#%E4%B8%BB%E9%A2%98%E5%8F%98%E9%87%8Fdesign-tokenthis.setThemeComponentsToken('Menu',{collapsedWidth: 46// itemBg: "rgba(255,255,255, .85)",// darkItemBg: 'var(--ant-layout-sider-bg)',// darkItemColor: 'rgba(0,0,0, .65)',// darkItemDisabledColor: 'rgba(0,0,0, .25)',// darkItemHoverBg: 'rgba(255,92,0, .65)',// darkItemHoverColor: '#fff',// darkPopupBg: '#181818',// darkSubMenuItemBg: 'var(--ant-layout-sider-bg)',})}
}export default ThemeConfiguration;

基础主题类

// file: /theme/themeCenter.tsimport type {ThemeConfig,ThemeComponentsConfig,ThemeConfigProviderProps
} from "./themeCenter.d"
import { ThemeModeEnum } from "./themeCenter.d"
import {theme} from "antd";class ThemeCenter {private themeName = "default";private themeColor:string = '#FF5C00';private themeMode:ThemeModeEnum = ThemeModeEnum.AUTO;/*** 明暗算法配置*  @var {object} _algorithm*/private _algorithm = {light: theme.defaultAlgorithm,dark: theme.darkAlgorithm}private _lightAlgorithm = this._algorithm['light'];private _darkAlgorithm = this._algorithm['dark'];/*** 自定义主题配置* @link https://ant.design/docs/react/customize-theme-cn#theme* @var {ThemeConfig} _customThemeToken*/private _customThemeToken:ThemeConfig = {token: {},// 继承上层 ConfigProvider 中配置的主题inherit: true,algorithm: this._algorithm['light'],components: {},// 开启 CSS 变量，参考使用 CSS 变量// @link https://ant.design/docs/react/css-variables-cn#apicssVar: {prefix: 'bogoo',key: 'theme',},// 组件 class Hash 值hashed: true,}/*** 自定义ConfigProvider组件配置** @var {ThemeConfigProviderProps} _customConfigProvider*/private _customConfigProvider:ThemeConfigProviderProps = {componentSize: undefined,theme: this._customThemeToken}constructor() {this._initThemeConfig();}protected _initThemeConfig(){}/**获取主题名称*/public get ThemeName(){return this.themeName;}/**获取当前主题色*/public get ThemeColor(){return this.themeColor;}public set ThemeColor(color: string){this.themeColor = color;this.setThemeAllToken({colorPrimary: color}, 'token')}/**获取明暗色系名称*/public get ThemeMode(){return this.themeMode;}/**设置明暗主题色配置*/public set ThemeMode(mode: ThemeModeEnum){this.themeMode = mode;let _algorithm: any = this._lightAlgorithm;if (mode === ThemeModeEnum.AUTO) {// _algorithm = this._darkAlgorithm;}else{_algorithm = mode===ThemeModeEnum.LIGHT ? this._lightAlgorithm : this._darkAlgorithm;}this.setThemeAllToken({algorithm: _algorithm});}/**主题Token配置*/public get ThemeToken(){return this._customThemeToken;}/*** 设置主题Token配置** @param {ThemeConfig|ThemeComponentsConfig} token 全局主题token或组件token* @param {'token'|'algorithm'|'components'} field 可选，若指定配置名称，则仅更新对应配置** @return {ThemeConfig}*/public setThemeAllToken(token: ThemeConfig|ThemeComponentsConfig,field?:'token'|'algorithm'|'components'){let _token:any = {};let _updateToken = token;if (field){if (!['token','algorithm','components'].includes(field))return this._customThemeToken;if (_updateToken instanceof Array){// @ts-ignore_token[field] = this._customThemeToken[field].concat(_updateToken)}else if(typeof _updateToken === 'object'){_token[field] = Object.assign({}, this._customThemeToken[field]||{}, _updateToken)}else{_token[field] = _updateToken}}else{_token = _updateToken;}console.log('_token:', _token)Object.assign(this._customThemeToken, _token);return this._customThemeToken;}/*** 组件主题Token配置** @param {string} componentsName 组件名称(首字母大小)* @param {ThemeComponentsConfig} token 主题样式配置** @return {void}*/public setThemeComponentsToken(componentsName:string, token: ThemeComponentsConfig){this.setThemeAllToken({// @ts-ignore[componentsName]: Object.assign({} ,this._customThemeToken?.components[componentsName]||undefined, token)}, 'components')}/**ConfigProvider组件配置*/public get ThemeConfigProvider(){return this._customConfigProvider;}public setThemeConfigProvider(config:ThemeConfigProviderProps){Object.assign(this._customConfigProvider, config);}
}export default ThemeCenter;

补充

themeCenter.d.ts

import type {ThemeConfig as AntdThemeConfig,ComponentsConfig as AntdComponentsConfig,
} from "antd/es/config-provider/context";
import type {SizeType} from "antd/es/config-provider/SizeContext";
import type {ReactNode} from "react";export enum ThemeModeEnum {AUTO = 'auto',DARK = 'dark',LIGHT = 'light'
}export interface ThemeConfigProviderProps {componentSize?: SizeType;theme?:AntdThemeConfig;
}export interface ThemeConfig extends AntdThemeConfig {}
export interface ThemeComponentsConfig extends AntdComponentsConfig {}