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. for components and typography should be kept separate and be able to be used throughout the app.
The option to develop further 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.

Theme structure

Each theme should have its own file with a dark and light mode palette
Typography and component styles which do not change with the theme should be separated out into a separate file, which each theme will use. This means we do not have to duplicate unchanging styles for each theme.
For clients who need to change typography or/and components, a new base theme file can be created. Any users which have this client, will inherit all the typography and component styles.

Create a new file in the themes folder, and name it myTheme.ts (replace myTheme with the name of your theme). This is where we will keep all the colours related to this theme.

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

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

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

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

Repeat for the other mode.
For adding styles to typography or components, import the mergeThemeStyles helper function. This can be used to add on to existing typography styles in the baseTheme. It can also be used to add new colour styles without specifying them in the baseTheme.