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.jsx]

// material-ui
import { createTheme } from '@mui/material/styles';
import { grey } from '@mui/material/colors';

// project import
import value from '../assets/scss/_themes-vars.module.scss';

export function theme(customization) {
  let textPrimary;
  let textSecondary;
  let textDark;
  let textHint;
  let background;
  let paper;
  let menuCaption;
  let textInversePrimary;

  switch (customization.navType) {
        case 'dark':
            ...
        case 'nav-dark':
            ...
        case 'light':
        default:
            ...
    }

    return createTheme({

        palette: {
            ...
        },
        typography: {
            fontFamily: `'Inter', sans-serif`,
            ....
        },
        breakpoints: {
            values: {
                xs: 0,
                sm: 600,
                md: 960,
                lg: 1280,
                xl: 1920,
                mobile: 430
            }
        },
        overrides: {
            ...
        },
    });
};

export default theme;

src/App.jsx

export default function App() {
  return (
    <ThemeProvider theme={theme}>
       <RTLLayout>
          ...
       </RTLLayout>
    </ThemeProvider>
  );
}

If you want to learn more about how the theme is assembled, take a look at mui/style/createTheme.js, and the related imports which createTheme uses.