46 lines
1.5 KiB
TypeScript
46 lines
1.5 KiB
TypeScript
import { ConfigProvider, theme } from "antd";
|
|
import { ReactNode, useEffect, useMemo } from "react";
|
|
|
|
export interface TailwindTheme {
|
|
[key: string]: string;
|
|
}
|
|
|
|
export default function ThemeProvider({ children }: { children: ReactNode }) {
|
|
const token = theme.getDesignToken();
|
|
|
|
const applyTheme = (tailwindTheme: TailwindTheme) => {
|
|
for (let key in tailwindTheme) {
|
|
document.documentElement.style.setProperty(key, tailwindTheme[key]);
|
|
}
|
|
};
|
|
|
|
const tailwindTheme: TailwindTheme = useMemo(() => ({
|
|
'--color-primary': token.colorPrimary,
|
|
'--color-text-secondary': token.colorTextSecondary,
|
|
'--color-text-tertiary': token.colorTextTertiary,
|
|
'--bg-container': token.colorBgContainer,
|
|
'--bg-layout': token.colorBgLayout,
|
|
'--bg-mask': token.colorBgMask,
|
|
'--primary-bg': token.colorPrimaryBg,
|
|
'--color-text': token.colorText,
|
|
'--color-text-quaternary': token.colorTextQuaternary,
|
|
'--color-text-placeholder': token.colorTextPlaceholder,
|
|
'--color-text-description': token.colorTextDescription,
|
|
'--color-border': token.colorBorder,
|
|
'--primary-text': token.colorPrimaryText
|
|
}), [token]);
|
|
|
|
useEffect(() => {
|
|
applyTheme(tailwindTheme);
|
|
}, [tailwindTheme]);
|
|
|
|
return (
|
|
<ConfigProvider theme={{
|
|
algorithm: theme.defaultAlgorithm,
|
|
// algorithm: [theme.darkAlgorithm, theme.compactAlgorithm],
|
|
}}>
|
|
{children}
|
|
</ConfigProvider>
|
|
);
|
|
}
|