Theming AdapTable UI

Summary

  • All UI components in AdapTable can be easily themed or customised so they blend with the hosting application
  • There are 2 System Themes available - Light and Dark, with OS also available - which integrate directly with AG Grid
  • Every element in AdapTable is fully configurable and themable via CSS Variables
  • This means the Dashboard, Tool Panel, Settings Panel etc. can be styled to match your precise requirements

AdapTable provides Themes to allow an integrated look and feel to be provided to your application.

These are provided as CSS variables.

Find Out More

For how AdapTable UI is built — Base UI, shadcn, Tailwind and accessibility — see AdapTable UI Components.

AdapTable Themes

AdapTable's Themes are used to style AdapTable's popups, wizards and components.

An AdapTable Theme is essentially a named set of CSS Variables.

AdapTable ships with 2 System Themes:

  • light (the default theme)
  • dark

There's an additional os theme, which applies either the light or dark appearance, based on user OS preferences.

In order to correctly see the AdapTable styles and themes, you need to import the CSS file

import '@adaptabletools/adaptable/index.css';

Caution

You only need to customise an AdapTable Theme if you are unhappy with the defaults values

Light Theme

The light Theme is displayed by default and does not need to be specified in Initial Adaptable State.

For the theme to show correctly, you need to make sure you import the index.css file, as already specified above.

import '@adaptabletools/adaptable/index.css';

Dark Theme

AdapTable's dark theme displays a black background with a white font.

Note

When using the dark Theme, AdapTable will automatically set AG Grid to display a matching dark theme

There is no extra CSS file you need to import for the dark theme.

Developer Guide

Setting the dark Theme

To use the dark theme you only have to specify it in your AdapTable state.

Theme: {
  CurrentTheme: "dark"
},
1
Set Current Theme

Set dark as CurrentTheme in the Theme section of Initial Adaptable State

OS Theme

AdapTable also allows developers (and run time users) to select the 'OS Theme'.

This picks up the current operating system Theme and then renders AdapTable as 'dark' or 'light' accordingly.

OS Theme
Fork
  • In this demo the os System Theme is selected by default
  • This means that AdapTable will show dark or light based on your current Operating System theme
Try It Out
  • Switch the operating system theme on your computer and note how the AdapTable (and AG Grid) theme changes.

Customising Themes

If neither of the System Themes are exactly to your liking, you can customise either Theme.

This is done by overriding existing CSS Variables to provide a look and feel that matches your requirements.

Note

  • Every UI element in AdapTable exposes a CSS Variable that you can configure to provide a custom UI look
  • So as well as changing colours you can also override other variables for more fine-grained UI control

Find Out More

See Referencing Themes for how you can refrence Theme variables in Format Columns and other Adaptable Styles

Selecting a Theme

Users can select a new Theme at run-time (subject to Entitlements) in various ways including:

CSS Layers

All the Adaptable CSS rules in our files are nested into a CSS layer called adaptable.

Caution

  • If you are already using CSS layers, please ensure to put adaptable before your app layer. If you use have a CSS layer for resets, it's generally good practice to put adaptable after your own reset layer.
  • This will allow your application more easily to override Adaptable styles, e.g. @layer reset, adaptable, app, theme

If you don't use CSS layers, nothing is required, as layers have a lower precedence to global-scoped CSS.

Hint

  • A big advantage of CSS Layers is that its far easier for developers to override default Adaptable styles
  • e.g. to override the Close button in a Dialog all that is required is (i.e. no !important or more complex selector):
.ab-Dialog__close-button {
  padding: 6px;
}

AG Grid Themes

AdapTable works naturally with any AG Grid theme, and there is nothing extra that is required.

When using Balham, Alpine, Quartz or Material themes, AdapTable will automatically switch between light and dark variants as the AdapTable theme changes.

Co-ordinated Themes

It is possible to provide co-ordinated AG Grid and AdapTable themes, and also to keep them synchronised when switching between light and dark modes.

This requires a 2 step-process:

  • customise the AdapTable system theme by providing CSS variables overrides
  • provide a custom AG Grid theme (and set SystemThemeOptions.AgThemeMode on each system theme to wire everything up)

Find Out More

Co-ordinated Themes
Fork
  • This example shows how to co-ordinate customised AG Grid and AdapTable themes:
    • We provide custom CSS Variables in both AdapTable's dark and light themes
    • In GridOptions we add light-red and dark-red modes on themeQuartz
    • In SystemThemes we pari each AdapTable theme with its AG Grid mode (via the AgThemeMode property)
Try It Out
  • Use the Theme toolbar or status panel to switch between light and dark — both the AdapTable and AG Grid UIs update together
  • Open Settings Panel to see the AdapTable Theme used in panels and wizards

FAQ

If I change the theme, will that get saved? Yes, the last selected theme is saved in the user's settings and selected the next time AdapTable is loaded.

Which System Themes do you ship? We ship with 2 themes: Light Theme and Dark Theme. Additionaly, we also have an OS theme, which displays either Light or Dark based on user operating-system preferences.

Why do you only provide 2 themes - there used to be more? We used to offer 15 themes but we found that, in practice, users were only using the white or dark theme or were creating their own. So to reduce the download footprint we now only offer 2 themes but make it easy for you to add as many other as you want.

Can I make my theme update the Underlying Grid like the System Themes do? Yes. Override the shipped light and dark themes with CSS variables (see Customising AdapTable Themes), then pair matching custom AG Grid theme modes with SystemThemeOptions.AgThemeMode in SystemThemes. When users switch theme, AdapTable applies the matching grid mode — you do not need a UserThemes entry for coordinated grid branding.

Can I create my own theme if I don't like either of the presets? Yes. Override the shipped light and dark themes with your own colour scheme using CSS variables — see Customising AdapTable Themes.

The easiest way to design your own theme is by using the AdapTable DevTools Extension

How do I upload my own theme? UserThemes is deprecated and will be removed in the next major version. Use CSS variable overrides on the shipped themes instead of registering separate theme files in state.

If I customise AdapTable themes, does AG Grid update as well? The shipped light and dark themes automatically sync with AG Grid. When you customise those themes via CSS variables, pair matching custom AG Grid theme modes in SystemThemes using SystemThemeOptions.AgThemeMode and withParams on your grid theme — see Co-ordinated Themes above.

PreviousCustom ComponentsNextCustomising Themes