Create Custom Theme For Material UI

The first place you should visit after visiting MUI themeing documentation for customizing your own MUI theme should be MUI Theme Creator.

Once you've played around a little bit with MUI theme creator here are some of the tips that might be helpful for you.

Use default theme object in your custom theme

import { createTheme } from '@mui/material/styles';

const defaultTheme = createTheme({
  palette: {
    primary: {
      main: '#93c5fd',
      light: '#bfdbfe',
    },
    secondary: {
      main: '#fef3c7',
    },
  },
});

const theme = createTheme(defaultTheme, {
  palette: {
    divider: defaultTheme.palette.primary.light,
  },
  components: {
    MuiChip: {
      styleOverrides: {
        label: {
          color: defaultTheme.palette.primary.main,
        },
      },
    },
  },
});

export default theme;

As you can see instead of using the hex code for colors everywhere in my custom theme I'm using the defaultTheme itself. Hope you get the point.

Declare modules to avoid typescript lint problem

Let's say you want to add a custom property to your primary theme palette called master. By default you'll not be able to do so due to type checking restrictions.

The typescript lint error would appear something like this.

Type '{ main: string; master: string; }' is not assignable to type 'PaletteColorOptions | undefined'.
  Object literal may only specify known properties, and 'master' does not exist in type 'PaletteColorOptions'.ts(2322)

To get around this problem you just need to declare a custom module by yourself just like the example shared below, and voila!!!

import { createTheme } from '@mui/material/styles';

declare module '@mui/material/styles' {
  interface PaletteColorOptions {
    main: string;
    master: string;
  }
}

const defaultTheme = createTheme({
  palette: {
    mode: 'dark',
    primary: {
      main: '#93c5fd',
      master: '#fff',
    },
  },
});

For the time being those are the only tips I've. Hopefully I'll make improvements on this post in the future.

Thank you. Happy Coding.