Page Comparison

...

2. In this file, make two new objects, one calledmyThemeLightand the other calledmyThemeDark. We will use these to separate out light and dark mode colours.

...

// Light palette
const myThemeLight = {

};

// Dark palette
const myThemeDark = {

};

export { myThemeLight, myThemeDark }

3. Import the createTheme function from@mui/material/styles. This will generate a theme based on the options received.

...

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

// Light palette
const myThemeLight = {

};

// Dark palette
const myThemeDark = {

};

export { myThemeLight, myThemeDark }

...

4. Import baseTheme, and use the spread operator to gain all styles from the base file.

...

import { createTheme } from "@mui/material/styles";
import baseTheme from "./baseTheme";

// Light palette
const myThemeLight = {
  ...baseTheme
};

// Dark palette
const myThemeDark = {
  ...baseTheme
};

export { myThemeLight, myThemeDark }

5. Define a colour palette, and specify what mode this colour palette is for:“light"or“dark"

...

const myThemeLight = createTheme({
  ...baseTheme
  palette: {
    main: "#.....",
  },
})

6. Repeat for the other mode.

7. For adding styles to typography or components, import the mergeThemeStyleshelper function. This can be used to add on to existing typography styles in thebaseTheme. It can also be used to add new colour styles without specifying them in thebaseTheme.

...

import { mergeThemeStyles } from "src/helpers/mergeThemeStyles";

typography: mergeThemeStyles(baseTheme.typography, {
  h1: {
    // specify styles here...
  }
})

Adding colours to components

...

1. Find the CSS to target through the Material UI docs, or the CSS inspector

2. Add colour within relevant class

...

MuiButton: {
  styleOverrides: {
    root: {
      backgroundColor: "purple"
    }
  }
}

Custom CSS classes for increased specificity

...