40 lines
1.0 KiB
TypeScript
40 lines
1.0 KiB
TypeScript
import type { FC, PropsWithChildren, ReactNode } from 'react';
|
|
// eslint-disable-next-line no-restricted-imports
|
|
import {
|
|
createTheme,
|
|
ThemeProvider as MuiThemeProvider,
|
|
useTheme as muiUseTheme,
|
|
Theme as MuiTheme,
|
|
} from '@mui/material/styles';
|
|
import type { ThemeOptions as AffineThemeOptions } from './theme';
|
|
import { Theme } from './theme';
|
|
|
|
declare module '@mui/material/styles' {
|
|
interface Theme {
|
|
affine: AffineThemeOptions;
|
|
}
|
|
// allow configuration using `createTheme`
|
|
interface ThemeOptions {
|
|
affine: AffineThemeOptions;
|
|
}
|
|
}
|
|
|
|
const theme = createTheme({
|
|
affine: Theme,
|
|
});
|
|
|
|
export const ThemeProvider: FC<{ children?: ReactNode }> = ({ children }) => {
|
|
return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>;
|
|
};
|
|
|
|
export const useTheme = () => muiUseTheme();
|
|
|
|
export const withTheme = <T,>(
|
|
Component: FC<T & { theme: MuiTheme }>
|
|
): FC<T> => {
|
|
return props => {
|
|
const theme = useTheme();
|
|
return <Component {...props} theme={theme} />;
|
|
};
|
|
};
|