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 Summer of 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 the Theme section of Predefined Config. Make sure, if using ag-Grid, that you also import the associated vendor them.
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 pre-shipped 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') - see Container Options for more details..
When installing the Adaptable Blotter its your responsibility to ensure that the current themes for the Blotter and for the Vender Grid are imported.
For example if you want to use the (default) light theme then you will need to import 'light.css' from the themes folder (together with the base.css that is always needed). Plus you will need to import the 'ag-theme-balham.css' because that is the theme which the Adaptable Blotter uses as default for the light theme, and also the main ag-Grid theme. So your imports will look like this:
import 'adaptableblotter/base.css'; import 'adaptableblotter/themes/light.css'; import 'ag-grid-community/dist/styles/ag-grid.css'; import 'ag-grid-community/dist/styles/ag-theme-balham.css';
And if you want to use both the light and dark themes then you will need to import both 'light.css' and 'dark.css' from the themes folder (together with the base.css that is always needed). Plus you will need to import both 'ag-theme-balham.css' and 'ag-theme-balham-dark.css' (because they are the vendor grid themes which the Adaptable Blotter uses), and also the main ag-Grid theme. So your imports will look like this:
import 'adaptableblotter/base.css'; import 'adaptableblotter/themes/light.css'; import 'adaptableblotter/themes/dark.css'; import 'ag-grid-community/dist/styles/ag-grid.css'; import 'ag-grid-community/dist/styles/ag-theme-balham.css'; import 'ag-grid-community/dist/styles/ag-theme-balham-dark.css';