Settings

This section explains how to configure and apply theme settings in your project.

Change default settings

When modifying default settings, be sure to clear localStorage or cookies to avoid conflicts.

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

Use a simple base theme when no localization or settings are needed.

// 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 settings

Apply user-defined settings to customize theme behavior.

// 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(settingsState)
    : {};
 
  const theme = createMuiTheme(updatedCore, updatedComponents, themeOverrides);
 
  return theme;
}

🔗 Reference:

src/App.js or src/app/layout.js
src/components/settings