Theming Overview

AdapTable is extremely themable - every aspect of the UI - Dashboard, Module Popups, Wizards, Tool Panels etc - can be configured to match your styling requirements and themes.

Themes

The highest level of styling in AdapTable is managed via Themes.

important

A Theme is essentially a collection of css variables that AdapTable exposes.

Adaptable provides 2 System Themes - light (the default) and dark - while making it easy for developers to provide their own Custom Themes.

CSS Variables

Themes are themselves simply collections of CSS Variables

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

note

We aim to make all UI properties in AdapTable configured by CSS Variable so if there is something you cannot do, please get in touch with us and we will rectify

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 (see a demo of this here):

.ab-Icon--build path {
visibility: hidden; /* to hide the contents of the actual SVG */
}
.ab-Icon--build {
background-image: url(...);
background-size: cover;
}

More Information