Using Themes

AdapTable allows you to provide a Theme for your application, and to enable run-time users quickly to switch between supplied Themes.

It also makes it easy for you to define and provide your own Custom Themes.

A Theme is essentially a collection of css variables that AdapTable exposes, and developers can customise.

You can have more css theme files imported in the app without them overriding each-other.

System Themes

AdapTable ships with 2 themes: light (the default) and dark.

This means that you only need provide themes for AdapTable and / or the Vendor Grid if you are unhappy with the defaults that we provide.

important

You do not need to provide a VendorGridClassName when using a System Themes as this is done for you.

Dark Theme

To use the Dark Theme, specify dark as the Current Theme in the Theme section of Predefined Config

caution

Make sure to import the AdapTable dark.css file and, if using AG Grid, also to import the associated dark vendor theme.

note

AdapTable supports both AG Grid's new Alpine and the older Balham themes in their dark versions.

import '@adaptabletools/adaptable/index.css';
import '@adaptabletools/adaptable/themes/dark.css';
import '@ag-grid-community/all-modules/dist/styles/ag-grid.css';
import '@ag-grid-community/all-modules/dist/styles/ag-theme-balham.css';
import '@ag-grid-community/all-modules/dist/styles/ag-theme-balham-dark.css';
----
export default {
Theme: {
CurrentTheme: 'dark',
},
} as PredefinedConfig;

Applying a Theme

When AdapTable applies a theme, it sets the ab--theme-<THEME_NAME> css className on the document HTML element - so only one theme will be applied at any given time.

Creating a Custom Theme

In order to write a Custom Theme you need to provide the name as an html element and also provide the same value in the --ab-theme-loaded property.

The definition is as follows:

html.ab--theme-<THEME_NAME> {
--ab-theme-loaded: <THEME_NAME>;
}

So, for example, if you have a blue theme you will provide the following css:

html.ab--theme-blue {
--ab-theme-loaded: blue;
}

You also need to make sure that the theme name is included in the UserThemes property in the Theme section of Predefined Config.

You should also provide a description (the text that appears in the Theme dropdown) and - optionally - the name of the vendor grid theme that you want to load simultaneously with the Theme.

export default {
Theme: {
UserThemes:[
{
Name:"blue",
Description:"Blue Theme",
VendorGridClassName: 'ag-theme-blue'
}
],
CurrentTheme: 'blue'
}
} as PredefinedConfig;
tip

The theme name cannot contain whitespace characters - it needs to be a string which can be used as a css className

Example Theme

The code below is that which AdapTable itself uses to create the Dark Theme.

As can be seen, only a few variables need to be provided - though there are many more which can be used (see CSS Variables for more information).

html.ab--theme-dark {
/* this is here so we detect when the dark theme has been correctly loaded */
--ab-theme-loaded: dark;
/* the background for the whole Adaptable Dashboard - only used once */
--ab-dashboard__background: #232323;
--ab-cmp-input--disabled__background:#b6b7b8;
/* default background color to be used in dialogs, panels, inputs, etc */
--ab-color-defaultbackground: #3e444c;
/* color for text displayed on the default background */
--ab-color-text-on-defaultbackground: #f7f7f7;
/* the most used color - used for example, in dashboard toolbars + a light and dark variation */
--ab-color-primary: #262d2f;
--ab-color-primarylight: #2d3537;
--ab-color-primarydark: #1c2021;
/* color for text displayed over the primary color */
--ab-color-text-on-primary: #f7f7f7;
/* a color not so often used - mostly used for making things stand out
these properties are NOT used in the dark theme but you might want to override in your themes
e.g. to change Dashboard Header colour & text, set '--ab-color-secondary' and '--ab-color-text-on-secondary'*/
// --ab-color-secondary: #f7f7f7;
// --ab-color-secondarylight: #07456d;
// --ab-color-secondarydark: #f7f7f7;
/* color for text displayed over the secondary color */
// --ab-color-text-on-secondary: #262d2f;
// --ab-color-text-on-secondarylight: #f7f7f7;
}

That's all the css you have to write for defining a theme - in fact, you can choose which of the above colors/variables to define - you don't have to define them all.

tip

Start incrementally, and work your way up as you need - use the dark theme code above as an example

More Information