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.
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.
You do not need to provide a VendorGridClassName when using a System Themes as this is done for you.
To use the Dark Theme, specify dark as the Current Theme in the Theme section of Predefined Config
Make sure to import the AdapTable
dark.css file and, if using AG Grid, also to import the associated dark vendor theme.
AdapTable supports both AG Grid's new Alpine and the older Balham themes in their dark versions.
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
The definition is as follows:
So, for example, if you have a
blue theme you will provide the following css:
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.
The theme name cannot contain whitespace characters - it needs to be a string which can be used as a css className
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).
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.
Start incrementally, and work your way up as you need - use the dark theme code above as an example