Settings

<SettingsProvider
  defaultSettings={{
    themeMode: 'light', // 'light' | 'dark'
    themeDirection: 'ltr', //  'rtl' | 'ltr'
    themeColorPresets: 'default', // 'default' | 'preset01' | 'preset02' | 'preset03' | 'preset04' | 'preset05'
  }}
/>

export default function ThemeProvider({ children }: Props) {
  const memoizedValue = useMemo(
    () => ({
      palette: palette('light'), // or palette('dark')
      shadows: shadows('light'), // or shadows('dark')
      customShadows: customShadows('light'), // or customShadows('dark')
      shape: { borderRadius: 8 },
      typography,
    }),
    []
  );
 
  const theme = createTheme(memoizedValue as ThemeOptions);
 
  theme.components = componentsOverrides(theme);
 
  return (
    <MuiThemeProvider theme={theme}>
      <CssBaseline />
      {children}
    </MuiThemeProvider>
  );
}

export default function ThemeProvider({ children }: Props) {
  const settings = useSettingsContext();
 
  const memoizedValue = useMemo(
    () => ({
      palette: palette(settings.themeMode),
      shadows: shadows(settings.themeMode),
      customShadows: customShadows(settings.themeMode),
      shape: { borderRadius: 8 },
      typography,
    }),
    [settings.themeMode]
  );
 
  const theme = createTheme(memoizedValue as ThemeOptions);
 
  theme.components = componentsOverrides(theme);
 
  return (
    <MuiThemeProvider theme={theme}>
      <CssBaseline />
      {children}
    </MuiThemeProvider>
  );
}

export default function ThemeProvider({ children }: Props) {
  const settings = useSettingsContext();
 
  const memoizedValue = useMemo(
    () => ({
      palette: palette('light'),
      shadows: shadows('light'),
      customShadows: customShadows('light'),
      direction: settings.themeDirection,
      shape: { borderRadius: 8 },
      typography,
    }),
    [settings.themeDirection]
  );
 
  const theme = createTheme(memoizedValue as ThemeOptions);
 
  theme.components = componentsOverrides(theme);
 
  return (
    <MuiThemeProvider theme={theme}>
      <RTL themeDirection={settings.themeDirection}>
        <CssBaseline />
        {children}
      </RTL>
    </MuiThemeProvider>
  );
}

export default function ThemeProvider({ children }: Props) {
  const settings = useSettingsContext();
 
  const presets = createPresets(settings.themeColorPresets);
 
  const memoizedValue = useMemo(
    () => ({
      palette: {
        ...palette('light'),
        ...presets.palette,
      },
      customShadows: {
        ...customShadows('light'),
        ...presets.customShadows,
      },
      shadows: shadows('light'),
      shape: { borderRadius: 8 },
      typography,
    }),
    [presets.customShadows, presets.palette]
  );
 
  const theme = createTheme(memoizedValue as ThemeOptions);
 
  theme.components = componentsOverrides(theme);
 
  return (
    <MuiThemeProvider theme={theme}>
      <CssBaseline />
      {children}
    </MuiThemeProvider>
  );
}

export default function ThemeProvider({ children }: Props) {
  const settings = useSettingsContext();
 
  const presets = createPresets(settings.themeColorPresets);
 
  const memoizedValue = useMemo(
    () => ({
      palette: {
        ...palette(settings.themeMode),
        ...presets.palette,
      },
      customShadows: {
        ...customShadows(settings.themeMode),
        ...presets.customShadows,
      },
      direction: settings.themeDirection,
      shadows: shadows(settings.themeMode),
      shape: { borderRadius: 8 },
      typography,
    }),
    [settings.themeMode, settings.themeDirection, presets.palette, presets.customShadows]
  );
 
  const theme = createTheme(memoizedValue as ThemeOptions);
 
  theme.components = componentsOverrides(theme);
 
  return (
    <MuiThemeProvider theme={theme}>
      <RTL themeDirection={settings.themeDirection}>
        <CssBaseline />
        {children}
      </RTL>
    </MuiThemeProvider>
  );
}