AdapTable makes it easy for you to switch between themes or create your own
A Theme is essentially a collection of css variables that AdapTable exposes, and you 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.
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.
You do not need to provide a VendorGridClassName when using either of the System Themes as this is done for you.
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.
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 theme you need to provide the name as an html element and also provide the same value in '--ab-theme-loaded' property.
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, together with 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
AdapTable uses CSS Variables in order to allow you to build your own custom themes.
There are a huge number of css variables that are available.
For easy identification purposes every CSS Variable starts with either '--ab-' or '--ab__'
This example shows the contents of the dark theme.
In addition to the above variables, the following are also available
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 as an example.
When using sass, in order to use sass variables as values for css properties, you have to use interpolation:
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
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 in action)