Our Requirements

• Multiple themes for each library using DCB Admin

• Each theme will need a dark and a light mode

• Styles for components and typography that do not change between themes should be kept separate and be able to be used throughout the app.

• Each theme will have a light and dark mode.

• Users will only change colours, not any typography or component changes.

• Clients will change typography, components as well as colours.

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.

How to add a new theme

1. 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.

2. 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.

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

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

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

6. Repeat for the other mode.

7. 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.