ant-design/.dumi/theme/SiteThemeProvider.tsx

65 lines
1.9 KiB
TypeScript
Raw Normal View History

2023-09-17 23:32:14 +08:00
import React, { useContext } from 'react';
import { theme as antdTheme, ConfigProvider } from 'antd';
import type { ThemeConfig } from 'antd';
import type { ThemeProviderProps } from 'antd-style';
2023-04-18 15:29:34 +08:00
import { ThemeProvider } from 'antd-style';
import SiteContext from './slots/SiteContext';
2023-04-18 15:29:34 +08:00
interface NewToken {
2023-09-17 23:32:14 +08:00
bannerHeight: number;
headerHeight: number;
menuItemBorder: number;
mobileMaxWidth: number;
siteMarkdownCodeBg: string;
antCls: string;
iconCls: string;
marginFarXS: number;
marginFarSM: number;
marginFar: number;
codeFamily: string;
contentMarginTop: number;
anchorTop: number;
}
const headerHeight = 64;
const bannerHeight = 38;
2023-09-17 23:32:14 +08:00
const SiteThemeProvider: React.FC<ThemeProviderProps<any>> = ({ children, theme, ...rest }) => {
const { getPrefixCls, iconPrefixCls } = useContext(ConfigProvider.ConfigContext);
2023-04-18 15:29:34 +08:00
const rootPrefixCls = getPrefixCls();
const { token } = antdTheme.useToken();
const { bannerVisible } = useContext(SiteContext);
React.useEffect(() => {
2023-09-17 23:32:14 +08:00
ConfigProvider.config({ theme: theme as ThemeConfig });
}, [theme]);
2023-04-18 15:29:34 +08:00
return (
<ThemeProvider<NewToken>
{...rest}
theme={theme}
2023-04-18 15:29:34 +08:00
customToken={{
headerHeight,
bannerHeight,
2023-04-18 15:29:34 +08:00
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`,
contentMarginTop: 40,
anchorTop: headerHeight + token.margin + (bannerVisible ? bannerHeight : 0),
2023-04-18 15:29:34 +08:00
}}
>
{children}
</ThemeProvider>
);
};
export default SiteThemeProvider;