2023-04-20 10:47:06 +08:00
|
|
|
import type { ThemeProviderProps } from 'antd-style';
|
2023-04-18 15:29:34 +08:00
|
|
|
import { ThemeProvider } from 'antd-style';
|
2023-05-18 23:53:34 +08:00
|
|
|
import type { FC } from 'react';
|
|
|
|
import React, { useContext } from 'react';
|
2023-07-28 16:17:43 +08:00
|
|
|
import { ConfigProvider, theme as antdTheme } from 'antd';
|
2023-04-18 15:29:34 +08:00
|
|
|
|
2023-07-20 19:27:33 +08:00
|
|
|
interface NewToken {
|
|
|
|
headerHeight: number;
|
|
|
|
menuItemBorder: number;
|
|
|
|
mobileMaxWidth: number;
|
|
|
|
siteMarkdownCodeBg: string;
|
|
|
|
antCls: string;
|
|
|
|
iconCls: string;
|
|
|
|
marginFarXS: number;
|
|
|
|
marginFarSM: number;
|
|
|
|
marginFar: number;
|
|
|
|
codeFamily: string;
|
2023-08-08 19:48:41 +08:00
|
|
|
contentMarginTop: number;
|
2023-07-20 19:27:33 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
// 通过给 antd-style 扩展 CustomToken 对象类型定义,可以为 useTheme 中增加相应的 token 对象
|
|
|
|
declare module 'antd-style' {
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-empty-interface
|
|
|
|
export interface CustomToken extends NewToken {}
|
|
|
|
}
|
|
|
|
|
2023-05-18 23:53:34 +08:00
|
|
|
const SiteThemeProvider: FC<ThemeProviderProps> = ({ children, theme, ...rest }) => {
|
|
|
|
const { getPrefixCls, iconPrefixCls } = useContext(ConfigProvider.ConfigContext);
|
2023-04-18 15:29:34 +08:00
|
|
|
const rootPrefixCls = getPrefixCls();
|
2023-05-18 23:53:34 +08:00
|
|
|
const { token } = antdTheme.useToken();
|
|
|
|
|
|
|
|
React.useEffect(() => {
|
|
|
|
ConfigProvider.config({
|
|
|
|
theme,
|
|
|
|
});
|
|
|
|
}, [theme]);
|
2023-04-18 15:29:34 +08:00
|
|
|
|
|
|
|
return (
|
2023-07-20 19:27:33 +08:00
|
|
|
<ThemeProvider<NewToken>
|
2023-04-20 10:47:06 +08:00
|
|
|
{...rest}
|
2023-05-18 23:53:34 +08:00
|
|
|
theme={theme}
|
2023-04-18 15:29:34 +08:00
|
|
|
customToken={{
|
|
|
|
headerHeight: 64,
|
|
|
|
menuItemBorder: 2,
|
|
|
|
mobileMaxWidth: 767.99,
|
|
|
|
siteMarkdownCodeBg: token.colorFillTertiary,
|
|
|
|
antCls: `.${rootPrefixCls}`,
|
|
|
|
iconCls: `.${iconPrefixCls}`,
|
|
|
|
/** 56 */
|
|
|
|
marginFarXS: (token.marginXXL / 6) * 7,
|
|
|
|
/** 80 */
|
|
|
|
marginFarSM: (token.marginXXL / 3) * 5,
|
|
|
|
/** 96 */
|
|
|
|
marginFar: token.marginXXL * 2,
|
|
|
|
codeFamily: `'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace`,
|
2023-08-08 19:48:41 +08:00
|
|
|
contentMarginTop: 40,
|
2023-04-18 15:29:34 +08:00
|
|
|
}}
|
|
|
|
>
|
|
|
|
{children}
|
|
|
|
</ThemeProvider>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default SiteThemeProvider;
|