Default Theme

Customize Material-UI with your theme. You can change the colors, the typography, and much more.

Theme configuration variables

Changing the theme configuration variables is the most effective way to match Material-UI to your needs. The following sections cover the most important theme variables:

• Palette

• Typography

• Spacing

• Breakpoints

• z-index

• Globals

You can check out the default theme section to view the default theme in full.

Examples

You can edit this file at [src/themes/index]

Typescript

src/themes/index.tsx

import { useMemo } from 'react';

// material-ui
import { createTheme, PaletteOptions, ThemeProvider, TypographyVariantsOptions } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';

// project imports
import palette from './palette';
import componentsOverride from './overrides';
import Shadows from './shadow';
import typography from './typography';
import RTLLayout from 'components/RTLLayout';

import useConfig from 'hooks/useConfig';

// types
import { ChildrenProps } from 'types/root';

// ==============================|| DEFAULT THEME - MAIN ||============================== //

export default function ThemeCustomization({ children }: ChildrenProps) {
  const { mode, themeDirection } = useConfig();

  const themePalette = useMemo<PaletteOptions>(() => palette(mode), [mode]);

  const themeDefault = createTheme({
    direction: themeDirection,
    palette: themePalette,
    customShadows: {}
  });

  // create duplicate theme due to responsive typography and fontFamily
  const theme = createTheme({
    ...themeDefault,
    typography: typography() as TypographyVariantsOptions,
    customShadows: Shadows(themeDefault)
  });

  theme.components = componentsOverride(theme);

  return (
    <ThemeProvider {...{ theme }}>
      <CssBaseline enableColorScheme />
      <RTLLayout>{children}</RTLLayout>
    </ThemeProvider>
  );
}

Javascript

src/themes/index.jsx

import PropTypes from 'prop-types';
import { useMemo } from 'react';

// material-ui
import { createTheme, ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';

// project imports
import palette from './palette';
import componentsOverride from './overrides';
import Shadows from './shadow';
import typography from './typography';
import RTLLayout from 'components/RTLLayout';

import useConfig from 'hooks/useConfig';

// ==============================|| DEFAULT THEME - MAIN ||============================== //

export default function ThemeCustomization({ children }) {
  const { mode, themeDirection } = useConfig();

  const themePalette = useMemo(() => palette(mode), [mode]);

  const themeDefault = createTheme({
    direction: themeDirection,
    palette: themePalette,
    customShadows: {}
  });

  // create duplicate theme due to responsive typography and fontFamily
  const theme = createTheme({
    ...themeDefault,
    typography: typography(),
    customShadows: Shadows(themeDefault)
  });

  theme.components = componentsOverride(theme);

  return (
    <ThemeProvider {...{ theme }}>
      <CssBaseline enableColorScheme />
      <RTLLayout>{children}</RTLLayout>
    </ThemeProvider>
  );
}

ThemeCustomization.propTypes = { children: PropTypes.any };