80 lines
2.5 KiB
TypeScript
80 lines
2.5 KiB
TypeScript
import React, {
|
|
createContext,
|
|
useContext,
|
|
ReactNode,
|
|
useEffect,
|
|
useMemo,
|
|
} from "react";
|
|
import { theme } from "antd";
|
|
export interface TailwindTheme {
|
|
[key: string]: string;
|
|
}
|
|
|
|
// Create a context for the agTheme
|
|
const AppThemeContext = createContext<{}>(
|
|
null
|
|
);
|
|
|
|
export const useAppTheme = () => useContext(AppThemeContext);
|
|
|
|
export default function ThemeProvider({ children }: { children: ReactNode }) {
|
|
const { token } = theme.useToken();
|
|
|
|
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-primary-active": token.colorPrimaryActive,
|
|
"--color-primary-hover": token.colorPrimaryHover,
|
|
"--color-bg-primary-hover": token.colorPrimaryBgHover,
|
|
"--color-text-secondary": token.colorTextSecondary,
|
|
"--color-text-tertiary": token.colorTextTertiary,
|
|
"--color-bg-text-hover": token.colorBgTextHover,
|
|
"--color-bg-container": token.colorBgContainer,
|
|
"--color-bg-layout": token.colorBgLayout,
|
|
"--color-bg-mask": token.colorBgMask,
|
|
"--color-bg-primary": token.colorPrimary,
|
|
"--color-text": token.colorText,
|
|
"--color-text-heading": token.colorTextHeading,
|
|
"--color-text-label": token.colorTextLabel,
|
|
"--color-text-lightsolid": token.colorTextLightSolid,
|
|
"--color-text-quaternary": token.colorTextQuaternary,
|
|
"--color-text-placeholder": token.colorTextPlaceholder,
|
|
"--color-text-description": token.colorTextDescription,
|
|
"--color-border": token.colorBorder,
|
|
"--color-border-secondary": token.colorBorderSecondary,
|
|
"--color-border-primary": token.colorPrimaryBorder,
|
|
"--color-text-primary": token.colorPrimaryText,
|
|
"--color-error": token.colorError,
|
|
"--color-warning": token.colorWarning,
|
|
"--color-info": token.colorInfo,
|
|
"--color-success": token.colorSuccess,
|
|
"--color-error-bg": token.colorErrorBg,
|
|
"--color-warning-bg": token.colorWarningBg,
|
|
"--color-info-bg": token.colorInfoBg,
|
|
"--color-success-bg": token.colorSuccessBg,
|
|
"--color-link": token.colorLink,
|
|
"--color-highlight": token.colorHighlight,
|
|
'--color-fill-quaternary': token.colorFillQuaternary,
|
|
"--color-fill-tertiary": token.colorFillTertiary,
|
|
"--color-fill-secondary": token.colorFillSecondary
|
|
}),
|
|
[token]
|
|
);
|
|
|
|
useEffect(() => {
|
|
applyTheme(tailwindTheme);
|
|
}, [tailwindTheme]);
|
|
|
|
return (
|
|
<AppThemeContext.Provider value={{}}>
|
|
{children}
|
|
</AppThemeContext.Provider>
|
|
);
|
|
}
|