Customising AdapTable Themes
Summary
- Developers can customise the shipped light and dark themes provided by AdapTable
- Overrides are CSS variable assignments in your own stylesheet (variables start with
--ab-or--ab__) - There are two main approaches — each has its own demo below
Important
- AdapTable will shortly be releasing a browser Devtools extension (currently in public beta)
- This allows you very easily to customise Themes and interact with existing AdapTable instances from Chrome
AdapTable provides 2 system themes — light and dark, and additionally os, which applies either the light or dark appearance based on the user operating-system preferences.
If neither is quite right, you can override the CSS variables that make up each theme.
Note
- You do not need to fork the theme files to achieve this
- Simply import the shipped theme and layer your overrides on
:root.ab--theme-lightand:root.ab--theme-dark
Two Approaches
There are 2 main conceptual approaches to customising an AdapTable Theme:
Hint
- It is possible to choose either or both approaches in the same Theme override
- Our advice is to start with approach 1 and add 2 only where you need more control
| Approach | What Changes | Typical Use | Examples |
|---|---|---|---|
| 1. Key theme variables | Core colours, spacing, fonts, color palette | Brand colours and typography that flow through Dashboard, toolbars, panels, and wizards | --ab-color-accent--ab-color-primary--ab-base-space ... |
| 2. Component variables and selectors | Per-component variables and targeted CSS classes | Fine-tune one area — e.g. hide toolbar button, restyle wizard section, theme date picker | --ab-dashboard-header__background--ab-cmp-datepicker__.ab-OnePageWizard__… |
Find Out More
- You can also reference theme CSS variables in Format Columns, Conditional Styles, and other Adaptable Styles
- This includes using shipped defaults and without customising the theme first - see Referencing Themes
Key Theme Variables
AdapTable contains many CSS variables.
Typically only a few, usually regarding colours, fonts and spacing, are required when modifying a Theme.
For this reason, most users make changes to CSS variables incrementally and work their way up as needed.
Hint
- The easiest way to design your own theme is by using the forthcoming AdapTable DevTools Extension
- This allows you to change variables in real-time and save your theme configuration
Theme Colours
These are the core theme colours that differ between the light and dark themes (i.e. the --ab-color-* variables that AdapTable overrides in its dark theme).
Setting these is usually all you need to create a coherent custom theme.
Note
We show here the default AdapTable values in the light and dark Themes.
| Variable | Where Used | Light | Dark |
|---|---|---|---|
| --ab-color-accent | Back Colour in Dashboard and Panel Headers | (#07c) | (#07c) |
| --ab-color-accent-foreground | Font Colour in Dashboard and Panel Headers | (#e2e2e2) | (#e2e2e2) |
| --ab-color-background | App-wide background; colours most UI controls | (white) | (#474c52) |
| --ab-color-foreground | App-wide font colour used in most UI controls | (#656565) | (#e2e2e2) |
| --ab-color-primary | Colour of Toolbars and Toolpanels | (#e9e9e9) | (#262d2f) |
| --ab-color-primary-foreground | Font colour where primary colour is background | (#656565) | (#e2e2e2) |
| --ab-color-primarylight | Colours Dashboard and most Panels | (#f5f5f5) | (#3d3e3f) |
| --ab-color-primarydark | Border colour for most UI Controls | (#b7b7b7) | (#1c2021) |
| --ab-color-card | Background for Cards and floating panels | (#f5f5f5) | (#51555a) |
| --ab-color-card-foreground | Font colour used on Cards | (#656565) | (#e2e2e2) |
| --ab-color-secondary | Secondary surfaces | (oklch(0.97 0 0)) | (oklch(0.269 0 0)) |
| --ab-color-secondary-foreground | Font colour on secondary surfaces | (oklch(0.205 0 0)) | (oklch(0.985 0 0)) |
| --ab-color-border | Border colour for many UI controls | (oklch(0.922 0 0)) | (oklch(0.269 0 0)) |
| --ab-color-destructive | Error states and destructive actions | (#dc3545) | (oklch(0.396 0.141 25.723)) |
| --ab-color-destructive-foreground | Font colour on the destructive background | (white) | (oklch(0.637 0.237 25.331)) |
| --ab-color-shadow | Colours shadows and the backdrop behind popups | (rgb(0 0 0 / 0.2)) | (rgb(255 255 255 / 0.45)) |
Other Key Colours
There are a number of other core, colour-related variables that can be used when setting a theme.
Note
All these colour variables have the same value in both AdapTable's light and dark themes
| Variable | Description | Value |
|---|---|---|
| --ab-color-accentlight | Shadow for Toggle Buttons | (#dbf0ff) |
| --ab-color-ring | Colour of the focus ring (defaults to accent) | (#07c) |
| --ab-color-warn | Used in Warning Messages & Notifications | (#eb9316) |
| --ab-color-warn-foreground | Font colour for Warning Messages | (white) |
| --ab-color-info | Used in Info Messages & Notifications | (#17a2b8) |
| --ab-color-info-foreground | Font colour for Info Messages | (white) |
| --ab-color-success | Used in Success Messages & Notifications | (#419641) |
| --ab-color-success-foreground | Font colour for Success Messages | (white) |
| --ab-color-action-edit | Colour of Edit Button | (#17a2b8) |
| --ab-color-action-edit-foreground | Font Colour for Edit Button | (white) |
| --ab-color-action-share | Colour of Share Button | (#eb9316) |
| --ab-color-action-share-foreground | Font Colour for Share Button | (white) |
| --ab-color-action-delete | Colour of Delete Button | (#dc3545) |
| --ab-color-action-delete-foreground | Font Colour for Delete Button | (white) |
| --ab-color-action-clone | Colour of Clone Button | (#419641) |
| --ab-color-action-clone-foreground | Font Colour for Clone Button | (white) |
Colour Palette
The 2 shipped Themes also contain 2 sets of colours that are used for creating the Colour Palette:
- 12 Colour Palette variables (differ in
lightanddark) - 20 Generic Swatches (same in
lightanddark)
Colour Palette Variables
As can be seen below there are 12 Colour Palette variables.
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) |
Hint
Typically you will want to override both items in a pair
Generic Swatch Variables
AdapTable also provides 20 generic swatches (with the same defaults in light and dark):
Note
It is very unlikely that you will want to to override any of these variables but we list them for completeness
| 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) |
Find Out More
See the UI Guide on providing a Custom Colour Palette for replacing or extending the picker list
Spacing
All spacing in AdapTable is based on the --ab-base-space variable.
This defaults to 4px.
Spacing in the application is derived from this value using calc() (e.g. calc(var(--ab-base-space) * 2)).
Hint
You can uniformly adjust all spacing by overriding the value of --ab-base-space
Font Sizes
AdapTable also supports a scale for font size, providing 8 different font sizes.
These are derived from --ab-base-font-size (which defaults to 1rem) and are used as follows:
| Font Size | Calculation | Rem Equivalent | Preview |
|---|---|---|---|
| --ab-font-size-0 | calc(var(--ab-base-font-size) * 0.5) | 0.5 rem | Preview |
| --ab-font-size-1 | calc(var(--ab-base-font-size) * 0.625) | 0.625 rem | Preview |
| --ab-font-size-2 | calc(var(--ab-base-font-size) * 0.75) | 0.75 rem | Preview |
| --ab-font-size-3 | calc(var(--ab-base-font-size) * 0.875) | 0.875 rem | Preview |
| --ab-font-size-4 | var(--ab-base-font-size) | 1 rem | Preview |
| --ab-font-size-5 | calc(var(--ab-base-font-size) * 1.25) | 1.25 rem | Preview |
| --ab-font-size-6 | calc(var(--ab-base-font-size) * 1.5) | 1.5 rem | Preview |
| --ab-font-size-7 | calc(var(--ab-base-font-size) * 2.25) | 2.25 rem | Preview |
Hint
In practice only --ab-font-size-2 and --ab-font-size-3 are used, so are the ones you are most likely to adjust
Font Family
By default AdapTable inherits the Font it will use.
This is done using the --ab__font-family CSS Variable which defaults to inherit.
Hint
Override this variable if you wish to specify a font to be used
- This demo overrides only key theme variables — no component-specific selectors
- Light theme: teal accent, cool grey toolbars, Georgia font, slightly wider spacing
- Dark theme: slate-blue accent with a dark
--ab-color-accent-foreground(readable title on the pale header), Segoe UI font, different primary/background tones - Use the Theme toolbar or status panel to switch between light and dark and compare the two brands
- Open Settings Panel to see primary/background colours on panels and wizards
Component Variables
Beyond the key variables above, every UI element exposes additional CSS variables.
In AdapTable these are typically prefixed with --ab-cmp- or scoped to a surface such as --ab-dashboard-header__background.
You can also target AdapTable CSS classes (e.g. .ab-Dashboard__title, .ab-OnePageWizard__section-title) when you need layout or visibility changes that variables alone cannot express.
Feedback
- We aim for comprehensive CSS-variable coverage so elements can meet bespoke requirements
- If something cannot be configured as you wish, please contact Support and we will rectify
- This demo applies component-level changes on top of the shipped light theme (
darkis unchanged) - Variables: dashboard header background, dashboard/panel gap colours, settings popup shadow, navigation separator
- Selectors: italic dashboard title; overline on toolbar labels; reversed wizard footer buttons; mint/chocolate wizard and tab styling
- Visibility:
New/Clonehidden in the Layout toolbar;Close/Configurehidden in the Export toolbar - Open Settings Panel (header button) and expand Layout / Export toolbars to see the effects
Styling Icons
Adaptable uses inline SVG for icons, since that's very performant and doesn't require any additional download.
However, you might want to style icons differently - in this case, you can customize that through css.
Every icon has the ab-Icon css class, and also ab-Icon--NAME where NAME is the name of the icon.
So for example, if you want to use a background image, you can do the following:
.ab-Icon--spanner path {
visibility: hidden; /* to hide the contents of the actual SVG */
}
.ab-Icon--spanner {
background-image: url(...);
background-size: cover;
}Using SASS
If you author theme overrides in Sass, use interpolation when assigning a Sass variable to a CSS custom property — the same rule applies to any --ab-* variable:
$panel-header-light: #fea7ff;
$panel-header-dark: #7a4d99;
:root.ab--theme-light {
--ab-cmp-dashboardpanel_header__background: #{$panel-header-light};
}
:root.ab--theme-dark {
--ab-cmp-dashboardpanel_header__background: #{$panel-header-dark};
}Date Picker
One control that is often themed with component variables is the Date Picker.
Note
This is used by AdapTable when editing or filtering date columns
- In this demo we provide a set of custom CSS Variables for the Date Picker
- We provide one set for each of the AdapTable System Themes: Light and Dark