Our requirements

• A single base theme for each customer.

  • The base theme will reflect the customer’s brand and any bespoke additions or changes to DCB Admin.

  • The base theme will define styles for typography, presentation and components. Colours will be defined separately.

• The option to develop further colour themes for each customer.

  • In the future we intend to offer the ability for users to select alternative colour schemes via a theme switcher. Users will only be able to change colours, not any typography or component styles.

• Each theme will need a dark and a light mode as a minimum.

...

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"
    }
  }
}

One-off customisations and components

For one-off customisations (e.g. setting one button to be pink) the sx prop should be used. The sx prop is just like using style, and can be used with any Material UI component.

Colours should not be defined within the sx prop, but should instead be defined within the theme and referred to using the useTheme hook.

1. Define colour within the theme

  palette: {
    main: "#.....",
    myButtonBackground: "#FFC0CB"
  }

2. Import useTheme into component, and reference the colour in the sx prop

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

export default function ButtonRenderer() {
  const theme = useTheme();
  
  return(
    <Button sx={{ backgroundColor: theme.palette.primary.myButtonBackground }}>
      I am a pink button
    </Button
  )
}

Custom CSS classes for increased specificity

This currently has not been used yet, so may require further testing.

This can be used when variants, or the default classes of a component, are not enough. An example of where custom CSS classes may be used, could be when creating a variation of a variant that uses the same styles, but applies some additional styles on top.

...