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.

...

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

...