...

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

...

• Each theme should have its own file with , containing a dark and light mode palette colour palette. This allows us to easily differentiate between colours associated with each theme

• 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 to form the base theme. These styles will be applied to all the colour themes and should only be defined once. Separating them out will mean we do not have to duplicate unchanging styles for each colour theme.

• For clients customers who need to change typography or/ and componentscomponent styles, a new base theme file can be created. Any users which have this client, will inherit all the typography and component stylesThis base theme can be reused like the original baseTheme file, within each theme.

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

...