47 lines
1.7 KiB
TypeScript
47 lines
1.7 KiB
TypeScript
import * as React from "react";
|
|
import { ThemeProvider, createTheme } from "@mui/material/styles";
|
|
import type { ThemeOptions } from "@mui/material/styles";
|
|
import { inputsCustomizations } from "./customizations/inputs";
|
|
import { dataDisplayCustomizations } from "./customizations/dataDisplay";
|
|
import { feedbackCustomizations } from "./customizations/feedback";
|
|
import { navigationCustomizations } from "./customizations/navigation";
|
|
import { surfacesCustomizations } from "./customizations/surfaces";
|
|
import { colorSchemes, typography, shadows, shape } from "./themePrimitives";
|
|
|
|
interface AppThemeProps {
|
|
themeComponents?: ThemeOptions["components"];
|
|
}
|
|
|
|
export function AppTheme(
|
|
props: React.PropsWithChildren<AppThemeProps>
|
|
): React.ReactElement {
|
|
const { children, themeComponents } = props;
|
|
const theme = React.useMemo(() => {
|
|
return createTheme({
|
|
// For more details about CSS variables configuration, see https://mui.com/material-ui/customization/css-theme-variables/configuration/
|
|
cssVariables: {
|
|
colorSchemeSelector: "data-mui-color-scheme",
|
|
cssVarPrefix: "template",
|
|
},
|
|
colorSchemes, // Recently added in v6 for building light & dark mode app, see https://mui.com/material-ui/customization/palette/#color-schemes
|
|
typography,
|
|
shadows,
|
|
shape,
|
|
components: {
|
|
...inputsCustomizations,
|
|
...dataDisplayCustomizations,
|
|
...feedbackCustomizations,
|
|
...navigationCustomizations,
|
|
...surfacesCustomizations,
|
|
...themeComponents,
|
|
},
|
|
});
|
|
}, [themeComponents]);
|
|
|
|
return (
|
|
<ThemeProvider theme={theme} disableTransitionOnChange>
|
|
{children}
|
|
</ThemeProvider>
|
|
);
|
|
}
|