AdaptableBlotter.JS allows you to choose from the selection of shipped themes, or to create your own themes.
The Adaptable Blotter ships with 2 Bootstrap themes - Light Theme and Dark Theme. However it will work with any Bootstrap compliant theme - there are many freely available from Bootswatch and all are compatible.
We are currently using version 3.3.7 of Bootswatch. We plan to update to version 4 in April 2019 as part of a big UI overhaul.
Users are able to change the theme through the Theme Picker function.
If you dont like either of the shipped themes, then you are able to upload or create your own Theme.
The default Theme for the Adaptable Blotter is Light Theme.
If you wish to use the Dark Theme, specify it as the Current Theme in Theme Config.
If you wish to use your own Theme then specify it in the UserThemes section of Configuration (see User State for more details).
Changing the Adaptable Blotter theme will only affect the Dashboard, and Adaptable Blotter screens - it is your responsibility to provide the theme or style for the underlying vendor grid that you are using.
However, in order to help you, we provide 2 default theme options for each underlying vendor grid: a Light Theme and a Dark Theme which match the Adaptable Blotter Light and Dark Themes so that the 2 components appear as one seamless unit to the end user.
If you have the useDefaultVendorGridThemes property set to true in GeneralOptions in IAdaptableBlotterOptions, then setting the Current Adaptable Blotter theme to either Light Theme or Dark Theme in your configuration, will update the vendor grid theme accordingly, so that the 2 component's themes stay in sync. See General Options for more details.
The default system theme is Light Theme so, at startup, your underlying vendor grid will automatically pick up the light theme associated with it (if useDefaultVendorGridThemes is set to true).
This means that you only need provide themes for the Adaptable Blotter and / or the Vendor Grid if you are unhappy with the defaults that we provide.
The defaults are:
ag-Grid - Light Theme: balham, Dark Theme: balham-dark
Hypergrid - a Light Theme (blue and white alternating rows) and a Dark Theme (black and grey alternating rows) provided by us.
The vendor grid theme will only be changed if the vendor grid is placed in a <div> which matches the value of the vendorContainer property in IAdaptableBlotterOptions (the default value is "grid').