Colours and dark mode

The brand colour

The brand colour paints the buttons, the active sidebar item, the charts' highlights and the payment cards. Four themes ship:

The theme in use is DEFAULT_THEME_COLOR in src/Demo/ThemeColorSwitcher/themes.ts. Set it to another theme's id:

export const DEFAULT_THEME_COLOR = "blue";

To use your own colour, edit one theme in the same file, such as brandPrimary for the main colour and brandPrimaryLight for its lighter shade, and keep its id in DEFAULT_THEME_COLOR.

With demo mode on, a floating switcher lets you try the themes, and the browser remembers what you pick there. That choice wins over DEFAULT_THEME_COLOR until you clear the site's data. With demo mode off, the switcher is hidden and the app always uses DEFAULT_THEME_COLOR.

• A new colour does not show

Light and dark mode

The sun and moon button in the header, and Dark Mode under Settings, Preferences, switch between dark and light. The dashboard starts in dark mode, and the browser remembers the mode each user picks.

The backgrounds, borders and text colours of both modes are variables in src/styles/theme.css: the light ones in :root, the dark ones in .dark. For example the page background:

:root {
    --color-bg-primary: #f8fafc;
}

.dark {
    --color-bg-primary: #030303;
}

These stay the same in every brand theme; only the brand colours change with the theme.

How the colours are applied

Add a theme or remove the switcher