Buy NowGet Update

Settings

Latestv3v2

This section will describe how you settings your theme.

Change default settings

Remove local storage or cookies storage when you change settings.

With local storage
// src/App.(jsx | tsx) or src/app/layout.(jsx | tsx)
 
import { defaultSettings } from 'src/components/settings';
 
<SettingsProvider defaultSettings={defaultSettings}>
  ...
</SettingsProvider>

With cookies storage (Next.js only)
// src/App.(jsx | tsx) or src/app/layout.(jsx | tsx)
 
import { defaultSettings } from 'src/components/settings';
import { detectSettings } from 'src/components/settings/server';
 
export default async function RootLayout({ children }: RootLayoutProps) {
  const cookieSettings = await detectSettings();
 
  return (
    <html lang="en" dir={cookieSettings.dir} suppressHydrationWarning>
      <body>
        <SettingsProvider cookieSettings={cookieSettings} defaultSettings={defaultSettings}>
          ...
        </SettingsProvider>
      </body>
    </html>
  );
}
Base theme

Without settings and locales.

// src/theme/create-theme.(js | ts)
 
export const baseTheme = {
  colorSchemes: {
    light: {
      palette: palette.light,
      shadows: shadows.light,
      customShadows: customShadows.light
    },
    dark: {
      palette: palette.dark,
      shadows: shadows.dark,
      customShadows: customShadows.dark
    }
  },
  mixins,
  components,
  typography,
  shape: { borderRadius: 8 },
  direction: themeConfig.direction,
  cssVariables: themeConfig.cssVariables,
  defaultColorScheme: themeConfig.defaultMode
}
 
export function createTheme({ themeOverrides }) {
  const theme = createMuiTheme(baseTheme, themeOverrides);
 
  return theme;
}
With localization

MUI localization components

// src/theme/create-theme.(js | ts)
 
export const baseTheme = {
  colorSchemes: {
    light: {
      palette: palette.light,
      shadows: shadows.light,
      customShadows: customShadows.light
    },
    dark: {
      palette: palette.dark,
      shadows: shadows.dark,
      customShadows: customShadows.dark
    }
  },
  mixins,
  components,
  typography,
  shape: { borderRadius: 8 },
  direction: themeConfig.direction,
  cssVariables: themeConfig.cssVariables,
  defaultColorScheme: themeConfig.defaultMode
}
 
export function createTheme({ themeOverrides, localeComponents }) {
  const theme = createMuiTheme(baseTheme, localeComponents, themeOverrides);
 
  return theme;
}
With settings
// src/theme/create-theme.(js | ts)
 
export const baseTheme = {
  colorSchemes: {
    light: {
      palette: palette.light,
      shadows: shadows.light,
      customShadows: customShadows.light
    },
    dark: {
      palette: palette.dark,
      shadows: shadows.dark,
      customShadows: customShadows.dark
    }
  },
  mixins,
  components,
  typography,
  shape: { borderRadius: 8 },
  direction: themeConfig.direction,
  cssVariables: themeConfig.cssVariables,
  defaultColorScheme: themeConfig.defaultMode
}
 
export function createTheme({ settingsState, themeOverrides }) {
  const updatedCore = settingsState ? updateCoreWithSettings(baseTheme, settingsState) : baseTheme;
 
  const updatedComponents = settingsState
    ? updateComponentsWithSettings(components, settingsState)
    : {};
 
  const theme = createMuiTheme(updatedCore, updatedComponents, themeOverrides);
 
  return theme;
}
  • src/App.js or src/app/layout.js
  • src/components/settings