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 - which integrate directly with AG Grid
  • Or developers can provide their own Custom Themes if required
  • 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.

Styling in Adaptable

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

For more insight into CSS layers see the MDN page.

If you don't use CSS layers in your app, that's perfectly fine, as layers have a lower precedence to global-scoped CSS, so you'll be able to more easily override Adaptable styles (so you avoid more nested/complex selectors).

If you do use CSS layers, make sure you put adaptable before your app layer, so your app can easily override Adaptable styles.

@layer adaptable, app, theme, etc

What this means in practice

It's easier for you to override default Adaptable styles.

In previous versions, this rule didn't have the expected result.

.ab-Dialog__close-button {
  padding: 6px;
}

You had to make it stronger (by making the selector more complex or adding !important)

.ab-Dialog__close-button.ab-Dialog__close-button {
  padding: 6px;
}
/* or */
.ab-Dialog__close-button {
  padding: 6px !important;
}

This is no longer the case starting with version 22, since the adaptable layer makes our CSS have lower priority, so this means simpler CSS overrides for you 🎉.

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

Caution

This means that you only need provide a Custom Theme if you are unhappy with the defaults that are provided.

Light Theme

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

All that is needed is to import the index.css file from Adaptable:

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

Dark Theme

AdapTable's dark theme displays a back background with a white grid.

Note

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

Developer Guide

Setting the dark Theme

To use the dark theme 2 steps are required:

import '@adaptabletools/adaptable/index.css';
import '@adaptabletools/adaptable/themes/dark.css';
1
Import both index.css and dark.css files

2 files need to be imported:

  • index.css - contains core styles
  • dark.css - contains dark theme css variable overrides
Theme: {
  CurrentTheme: "dark"
},
2
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.

Custom Theme

If neither of the System Themes are to your liking it is easy write a bespoke, Custom Theme.

Hint

You can have multiple css theme files imported in the app without them overriding each other

Light Theme
Fork
  • In this demo the light System Theme is selected by default
  • A High Contrast Custom Theme has also been provided
Try It Out

Switch between the light, dark and High Contrast Themes in the dropdown in the Dashboard

Styling Themes

Every UI element in AdapTable exposes a CSS Variable that you can configure to provide a custom UI look.

Feedback

We aim for comprehensive CSS-variable coverage but if you find an element you are not able to configure to your liking, please contact AdapTable Support and we will rectify

Find Out More

Wizard Theme
Fork
  • In this demo we use the light theme and provide CSS Variables to change the look and feel of the Wizard that is used to create AdapTable Objects
Try It Out

Click the Edit button in the Layout toolbar to enter the Layout Wizard

Selecting a Theme

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

Creating a Theme

Run-time users can create a new Theme by accessing the Theme section of the Settings Panel.

AdapTable will clone a dark or light Theme (depending on user selection)

AG Grid Themes

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

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

Find Out More

See AG Grid Themes for more information and some demos

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

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? You will need to do that yourself .

Can I create my own theme if I don't like either of the presets? Yes, you can create your own theme based on your own colour scheme. Everything is based on CSS Variables.

How do I upload my own theme? You can do that through configuration. The Themes section has a 'UserThemes' collection, each of which specifies a Name and Description. These themes will appear in the themes dropdown like the system themes and get resolved when they are selected. The Description is the value that will appear in the dropdown and the Name is the name of the css file that you have to provide.

Do custom Themes include theming AG Grid? No, only the 2 shipped themes will also update AG Grid's theme. When providing a custom Theme, it's your responsibility to style AG Grid as appropriate.

PreviousTechnical ReferenceNextCustom Themes