Theme palettes

Each color scale consists of 41 color weights, starting from 0 (black) to weight 1000 (white) with step increment of 25.

Using custom palettes in Contember admin

You can add generated CSS custom properties in your project in simple 3 steps.

Use pallet generator below to get CSS custom properties.
Create custom-theme.css in admin folder your project and insert generated CSS custom properties.
Import custom-theme.css file in /admin/index.tsx. You need to import this file under import '@contember/admin/style.css'.

You can edit and modify each of the color palettes below and override the shipped palletes by appending the generated CSS properties after the import of the @contember/admin styles in your admin styles file, e.g. src/admin/index.sass. Only the colors that differ from original colors are generated for overrides.

The generated palletes provide sufficient contrasts for both dark and light themes according to the upcoming APCA standard.

You can change highlights, middles and the shadows by unlinking the color inputs and changing colors independently. This will help you achieve expected color tones.

Edit the colors to copy CSS first

primary theme

secondary theme

tertiary theme

positive theme

success theme

warn theme

danger theme

default theme

Using custom palettes in Contember admin​

Using custom palettes in Contember admin