Theming Technical Reference
Summary
- AdapTable enables Themes to be provided in Theme Initial Adaptable State
- Theme API manages run-time access to Theming
- The Theme Changed Event is fired when a Theme changes
Theme State
The Theme State section has these properties:
| Property | Description |
|---|---|
| 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 |
A User Theme is an AdaptableTheme object defined as follows:
| Property | Description |
|---|---|
| AgThemeMode | AG Grid theme mode to apply when this theme is selected. Valid values are light, dark, dark-blue or any custom theme mode defined in AG Grid. When set, adds a data-ag-theme-mode attribute to the document body. |
| CSSVariables | Variables to be applied at runtime |
| Description | Description of Theme - will appear in Theme Toolbar and Toolpanel |
| Name | Name of the Theme as it appears in the Theme toolbar and tool panel |
| Variant | Base theme variant to derive custom theme from. Use light to inherit from Adaptable Light Theme or dark for Adaptable Dark Theme. When creating custom themes, specifying a variant ensures proper inheritance of base theme styles. |
| IsReadOnly | Sets Entity to ReadOnly (overwriting a Strategy Entitlement of 'Full') |
Theme API
Full programmatic access to Themes is available in Theme API:
| Method | Description |
|---|---|
| addUserTheme(theme) | Adds a User Theme to State |
| applyCurrentTheme() | Applies the Current Theme |
| deleteUserTheme(theme) | Deletes a User Theme from State |
| editTheme(theme) | Edits an existing theme |
| getCurrentTheme() | Retrieves name of Current Theme |
| getCurrentThemeObject() | Retrieves the current theme object |
| getSystemThemes() | Retrieves System Themes in State |
| getThemeByName(themeName) | Retrieves a Theme by name |
| getThemes() | Retrieves all Themes (both System & User) in State |
| getThemeState() | Retrieves Theme section from Adaptable State |
| getUserThemes() | Retrieves User Themes in State |
| loadDarkTheme() | Sets AdapTable Dark Theme - updates the AG Grid theme to match |
| loadLightTheme() | Sets AdapTable Light Theme - updates the AG Grid theme to match |
| loadTheme(theme) | Sets Adaptable to use a given theme |
| openThemeSettingsPanel() | Opens Settings Panel with Theme section selected and visible |
| setSystemThemes(systemThemes) | Sets available System Themes; if empty array is passed none will be |
| setUserThemes(userThemes) | Sets available User Themes |
Theme Changed Event
The Theme Changed Event fires whenever a Theme has been Selected or Editor.
ThemeChangedInfo
The event comprises a single ThemeChangedInfo which contains details of the Theme and the Trigger that caused the Event to fire.
| Property | Description |
|---|---|
| theme | Current Theme: either name of a System Theme or a Custom Theme object |
| trigger | What caused Event to fire: "ThemeSelected" or "ThemeEdited" |
| adaptableContext | Custom application Context provided in AdaptableOptions.adaptableContext |
As can be seen the theme can be either:
- the name of a System Theme (
lightordark) - the full Theme object if a Custom Theme has been selected / edited
The trigger can be either:
ThemeSelected- triggered by choosing a new ThemeThemeEdited- triggered by changing properties in a Theme
Events Subscription
Subscribing to the Events is done the same as with all Adaptable Events:
api.eventApi.on('ThemeChanged', (eventInfo: ThemeChangedInfo) => {
});