Our

...

Multiple themes for each library using DCB Admin

...

Each theme will need a dark and a light mode

...

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.

• Each theme will have a light and dark mode.

• Users will only 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

  changes

  • styles.

• Clients will change typography, components as well as coloursEach 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.

...

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.

...

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

...