87 lines
2.7 KiB
JavaScript
87 lines
2.7 KiB
JavaScript
import PropTypes from 'prop-types';
|
|
import { useMemo } from 'react';
|
|
|
|
// material-ui
|
|
import { CssBaseline, StyledEngineProvider } from '@mui/material';
|
|
import { createTheme, ThemeProvider } from '@mui/material/styles';
|
|
|
|
// project import
|
|
import useConfig from 'hooks/useConfig';
|
|
import Palette from './palette';
|
|
import Typography from './typography';
|
|
import CustomShadows from './shadows';
|
|
import componentsOverride from './overrides';
|
|
|
|
// ==============================|| DEFAULT THEME - MAIN ||============================== //
|
|
|
|
export default function ThemeCustomization({ children }) {
|
|
const { themeDirection, mode, presetColor, fontFamily } = useConfig();
|
|
|
|
const theme = useMemo(() => Palette(mode, presetColor), [mode, presetColor]);
|
|
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
const themeTypography = useMemo(() => Typography(fontFamily), [fontFamily]);
|
|
const themeCustomShadows = useMemo(() => CustomShadows(theme), [theme]);
|
|
|
|
const themeOptions = useMemo(
|
|
() => ({
|
|
breakpoints: {
|
|
values: {
|
|
xs: 0, // Extra-small: 0px and up
|
|
custom300: 300, // above 350
|
|
custom350: 350, // above 350
|
|
custom400: 400, // above 400
|
|
custom450: 450, // above 450
|
|
custom500: 500, // above 450
|
|
custom550: 550, // above 450
|
|
custom600: 600, // above 450
|
|
custom650: 650, // above 450
|
|
custom700: 700, // above 450
|
|
custom750: 750, // above 450
|
|
sm: 768, // Small: 768px and up
|
|
custom800: 800, // above 450,
|
|
custom850: 850, // above 450,
|
|
custom900: 900, // above 450
|
|
custom950: 950, // above 450
|
|
custom1000: 1000, // above 450
|
|
md: 1024, // Medium: 1024px and up
|
|
custom1050: 1050, //
|
|
custom1100: 1100, //
|
|
lg: 1266, // Large: 1266px and up
|
|
custom1300: 1300, // Large: 1266px and up
|
|
custom1350: 1350, // Large: 1266px and up
|
|
xl: 1440 // Extra-large: 1440px and up
|
|
}
|
|
},
|
|
direction: themeDirection,
|
|
mixins: {
|
|
toolbar: {
|
|
minHeight: 60,
|
|
paddingTop: 8,
|
|
paddingBottom: 8
|
|
}
|
|
},
|
|
palette: theme.palette,
|
|
customShadows: themeCustomShadows,
|
|
typography: themeTypography
|
|
}),
|
|
[themeDirection, theme, themeTypography, themeCustomShadows]
|
|
);
|
|
|
|
const themes = createTheme(themeOptions);
|
|
themes.components = componentsOverride(themes);
|
|
|
|
return (
|
|
<StyledEngineProvider injectFirst>
|
|
<ThemeProvider theme={themes}>
|
|
<CssBaseline />
|
|
{children}
|
|
</ThemeProvider>
|
|
</StyledEngineProvider>
|
|
);
|
|
}
|
|
|
|
ThemeCustomization.propTypes = {
|
|
children: PropTypes.node
|
|
};
|