Using and Extending Colour Palette
Summary
- The default Colour Picker is built entirely from theme CSS variables (
--ab-color-swatch-*, semantic colours, and--ab-color-palette-*) - Customise the palette by overriding those variables on the shipped light and/or dark theme
- Variables are resolved when the Colour Picker opens, so run-time users always pick colours aligned with the active theme
AdapTable displays a Color Picker when users need to select colours when creating an Adaptable Style.
Colour Picker Contents
By default the Colour Picker contains 3 sets of variables:
- 12 palette slots —
--ab-color-palette-1…--ab-color-palette-12(theme-aware muted pairs) - 5 strong semantic colours — e.g.
var(--ab-color-destructive),var(--ab-color-accent) - 20 generic swatches —
--ab-color-swatch-1…--ab-color-swatch-20
Note
- All of these are CSS variables and you can override them in your light or dark theme CSS
- This allows you to customise what run-time users see in the picker and what you reference in code
Find Out More
Customising Themes shows how to override theme variables in CSS; Referencing Themes shows how to use those variables in Format Columns and other Adaptable Styles
Palette Colours
The Colour Palette includes 12 theme-aware palette slots for muted cell highlights.
Note
- These can be categorised into 6 pairs with background and matching foreground
- They are used for error, warn, success, info, neutral, and accent respectively
| Colour | Typical Use | Light Theme | Dark Theme |
|---|---|---|---|
--ab-color-palette-1 | Error / breach highlight | (#fde8e8) | (#5c1a1a) |
--ab-color-palette-2 | Error / breach highlight | (#9b2c2c) | (#ffb4b4) |
--ab-color-palette-3 | Warning / pending highlight | (#fff8e1) | (#4a3b00) |
--ab-color-palette-4 | Warning / pending highlight | (#975a16) | (#ffd966) |
--ab-color-palette-5 | Success / booked highlight | (#e6f4ea) | (#1b4332) |
--ab-color-palette-6 | Success / booked highlight | (#276749) | (#95d5b2) |
--ab-color-palette-7 | Informational highlight | (#e6f2ff) | (#1a365d) |
--ab-color-palette-8 | Informational highlight | (#2b6cb0) | (#90cdf4) |
--ab-color-palette-9 | Neutral / inactive highlight | (#edf2f7) | (#2d3748) |
--ab-color-palette-10 | Neutral / inactive highlight | (#4a5568) | (#e2e8f0) |
--ab-color-palette-11 | Accent / stage highlight | (#f3e8ff) | (#44337a) |
--ab-color-palette-12 | Accent / stage highlight | (#553c9a) | (#d6bcfa) |
Swatches
The Colour Palette also provides 20 generic swatches (with same defaults in light and dark themes):
| Variable | Default (light & dark) |
|---|---|
--ab-color-swatch-1 | (#000000) |
--ab-color-swatch-2 | (#FFFFFF) |
--ab-color-swatch-3 | (#D3D3D3) |
--ab-color-swatch-4 | (#808080) |
--ab-color-swatch-5 | (#A52A2A) |
--ab-color-swatch-6 | (#006400) |
--ab-color-swatch-7 | (#008000) |
--ab-color-swatch-8 | (#32CD32) |
--ab-color-swatch-9 | (#FFFF00) |
--ab-color-swatch-10 | (#FFFFE0) |
--ab-color-swatch-11 | (#00008B) |
--ab-color-swatch-12 | (#0000FF) |
--ab-color-swatch-13 | (#87CEFA) |
--ab-color-swatch-14 | (#00FFFF) |
--ab-color-swatch-15 | (#FF00FF) |
--ab-color-swatch-16 | (#800080) |
--ab-color-swatch-17 | (#8B0000) |
--ab-color-swatch-18 | (#FF0000) |
--ab-color-swatch-19 | (#DC143C) |
--ab-color-swatch-20 | (#FFA500) |
Semantic Colours
There 3rd group of colours included in the Colour Picker are 5 commonly used Theme variables:
| Colour | Light and Dark Theme |
|---|---|
--ab-color-destructive | (#dc3545) |
--ab-color-warn | (#eb9316) |
--ab-color-success | (#419641) |
--ab-color-info | (#17a2b8) |
--ab-color-accent | (#07c) |
Customising the Palette
You can customise the Palette by overriding CSS variables on the shipped light and/or dark themes.
For example, to replace the first seven generic swatches in dark mode:
html.ab--theme-dark {
--ab-color-swatch-1: #660033;
--ab-color-swatch-2: #ccffff;
--ab-color-swatch-3: #ffccff;
--ab-color-swatch-4: #b2ff66;
--ab-color-swatch-5: #ff3333;
--ab-color-swatch-6: #ffffff;
--ab-color-swatch-7: #0000ff;
}You can also override semantic and palette variables the same way — see Customising Themes and Referencing Themes.
Breaking Change
- Prior to AdapTable Version 23 the colour palette was customised using
userInterfaceOptions.colorPalette - This has now been deprecated and will be removed in a future major release
- This demo overrides
--ab-color-swatch-*on the dark theme instyles.css - Open Format Column → Style and use the Colour Picker to see the brand swatches
- Create a new Format Column; in the Style section open the dropdown for the colour properties