Theme

The Theme Module allows users to select a Theme for AdapTable.

This can either be one of AdapTable's 2 shipped Themes ('Light' and 'Dark') or a Custom Theme provided by developers at design time.

Users can change the Theme at run-time (subject to Entitlements) via the Theme Toolbar, Tool Panel or Popup.

important

All AdapTable themes are simply collections of CSS Variables

Custom Themes

AdapTable ships with 2 themes - "Light Theme" and "Dark Theme", but developers can easily add their own using CSS Variables.

tip

Make sure to include the name of the Custom Theme in the Theme State section of Predefined Config.

Full details of how to create a Custom Theme can be found in the Using Themes section.

UI Elements

The Theme Module includes the following UI Elements:

  • Popup - Allows the User to select a Theme from those available.

  • Toolbar - Contains a Theme dropdown enabling the User to select a Theme from those available.

  • Tool Panel - Same as Toolbar above.

Entitlements

Theme Entitlement Rules:

  • Full: Users can change the selected Theme

  • Hidden: Users cannot change the selected Theme

  • ReadOnly: N/A

Predefined Config

In Theme Predefined Config it is possible to provide and select Themes:

PropertyDescription
CurrentThemeName of current theme (or theme to set at startup); leave blank if using 'Light Theme', set to 'dark' for 'Dark Theme' or provide name of Custom Theme
SystemThemesWhich, if any, of the 2 themes shipped by Adaptable should be available; leave unset to provide both, or an empty array to provide neither.
UserThemesCustom themes (of type AdaptableTheme) provided by developers

Each User Theme is an AdaptableTheme object defined as follows:

PropertyDescription
DescriptionDescription of Theme - will appear in Theme Toolbar and Toolpanel
NameName of the Theme
VendorGridClassNameVendor Grid related css className to be applied
tip

VendorGridClassName is used to style the vendor grid a pre-set theme that matches AdapTable's Theme

Example

//css file
html.ab--theme-blue {
--ab-theme-loaded: blue;
}
export default {
Theme: {
CurrentTheme:"blue",
UserThemes:[
{
Name:"blue",
Description:"Blue Theme",
// optional - sets theme of underlying vendor grid to match selected blue theme
VendorGridClassName: 'ag-theme-blue'
}
],
}
} as PredefinedConfig;

API Methods

The Theme API contains the following methods:

MethodDescription
applyCurrentTheme()Applies the Current Theme
getAllSystemTheme()Retrieves System Themes in State
getAllTheme()Retrieves all Themes (both System User) in State
getAllUserTheme()Retrieves User Themes in State
getCurrentTheme()Retrieves name of Current Theme
getThemeState()Retrieves Theme section from Adaptable State
loadDarkTheme()Sets AdapTable Dark Theme - updates underlying vendor grid theme to match
loadLightTheme()Sets AdapTable Light Theme - updates underlying vendor grid theme to match
loadTheme(theme)Sets Adaptable to use a given theme
setSystemThemes(systemThemes)Sets available System Themes; if empty array is passed none will be
setUserThemes(userThemes)Sets available User Themes
showThemePopup()Opens Theme popup screen

FAQ

Can I create my own theme if I don't like either of the presets?

Yes, you can create your own theme based on your own colour scheme. Everything is based on CSS Variables.

If I change the theme, will that get saved?

Yes, the last selected theme is saved in the user's settings and selected the next time AdapTable is loaded.

Which System Themes do you ship?

We ship with 2 themes: Light Theme and Dark Theme

Why do you only provide 2 themes - there used to be more?

We used to offer 15 themes but we found that, in practice, users were only using the white or dark theme or were creating their own. So to reduce the download footprint we now only offer 2 themes but make it easy for you to add as many other as you want.

Can I make my theme update the Underlying Grid like the System Themes do?

You will need to do that yourself .

How do I upload my own theme?

You can do that through configuration. The Themes section has a 'UserThemes' collection, each of which specifies a Name and Description.

These themes will appear in the themes dropdown like the system themes and get resolved when they are selected.

The Description is the value that will appear in the dropdown and the Name is the name of the css file that you have to provide.

Do Themes include the underlying Vendor Grid?

No, only the 2 shipped themes do that. Its your responsibility when providing a custom theme to style the underlying vendor grid as appropriate.

More Information