The Theme Function 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.
All AdapTable themes are simply collections of CSS Variables
AdapTable ships with 2 themes - "Light Theme" and "Dark Theme", but developers can easily add their own using CSS Variables.
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 Theming and Styling Guide.
The Theme Function 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.
Theme Entitlement Rules:
Full: Users can change the selected Theme
Hidden: Users cannot change the selected Theme
In Theme Predefined Config it is possible to provide and select Themes:
|CurrentTheme||Name 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|
|SystemThemes||Which, if any, of the 2 themes shipped by Adaptable should be available; leave unset to provide both, or an empty array to provide neither.|
|UserThemes||Custom themes (of type AdaptableTheme) provided by developers|
Each User Theme is an
AdaptableTheme object defined as follows:
|Description||Description of Theme - will appear in Theme Toolbar and Toolpanel|
|Name||Name of the Theme|
|VendorGridClassName||Vendor Grid related css className to be applied|
VendorGridClassName is used to style the vendor grid a pre-set theme that matches AdapTable's Theme
The Theme API contains the following methods:
|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|
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.