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 Selected Event is fired when a shipped theme is selected or re-applied

Tailwind integration

AdapTable styles its UI with Tailwind CSS utility classes.

Every AdapTable-emitted utility is prefixed with twa: — for example twa:flex, twa:p-2, twa:bg-accent — rather than bare flex, p-2, etc.

Important

No configuration required — you do not need to add AdapTable to your Tailwind content / @source paths
No version coupling — your app can use Tailwind v3, v4 (or no Tailwind); AdapTable ships a self-contained build
Theme tokens — colours, spacing etc. still come from AdapTable CSS variables
Do not use twa-prefixed classes — CSS classes starting with twa are internal to AdapTable's styling and may change at any time; to reuse AdapTable's colours and theming in your own app, use the AdapTable CSS variables instead

AdapTable stylesheet rules are also nested in the adaptable CSS layer (see CSS Layers on the Theming page).

If your host app uses Tailwind v4 with cascade layers and prefixed AdapTable utilities lose padding or spacing against your preflight reset, declare an explicit layer order in your global stylesheet:

@layer theme, base, components, adaptable, utilities;

This places AdapTable styles after your base and components layers but before your own utilities, so twa: classes win against the reset while your utilities still override AdapTable when needed.

Find Out More

See AdapTable UI Components and Accessibility & Keyboard Support for more information

Theme State

The Theme State section has these properties:

Property	Type	Description
CurrentTheme	`SystemThemeName`	Name of current Theme or theme set at startup; leave blank if using 'Light Theme', set to 'dark' for 'Dark Theme'
SystemThemes	`(SystemThemeEntry\|AdaptableTheme)[]`	Which shipped themes are available; pass theme name string, or `{ Name, AgThemeMode? }` to pair a custom AG Grid theme mode; leave unset for all shipped themes

Theme API

Full programmatic access to Themes is available in Theme API:

Method	Returns	Description
applyCurrentTheme()	`void`	Applies the Current Theme
editTheme(theme)	`void`	Edits an existing theme
getCurrentTheme()	`string`	Retrieves name of Current Theme
getCurrentThemeObject()	`AdaptableTheme`	Retrieves the current theme object
getSystemThemes()	`AdaptableTheme[]`	Retrieves System Themes in State
getThemeByName(themeName)	`AdaptableTheme`	Retrieves a Theme by name
getThemes()	`AdaptableTheme[]`	Retrieves all Themes (both System & User) in State
getThemeState()	`ThemeState`	Retrieves Theme section from Adaptable State
loadDarkTheme()	`void`	Sets AdapTable Dark Theme - updates the AG Grid theme to match
loadLightTheme()	`void`	Sets AdapTable Light Theme - updates the AG Grid theme to match
loadTheme(theme)	`void`	Sets Adaptable to use a given theme
openThemeSettingsPanel()	`void`	Opens Settings Panel with Theme section selected and visible
setSystemThemes(systemThemes)	`void`	Sets available System Themes; if empty array is passed none will be

Theme Selected Event

The ThemeSelected event fires when a shipped theme is selected, applied at startup, or re-applied.

For example it fires when os tracks a change in operating-system colour scheme.

ThemeSelectedInfo

The event payload is a ThemeSelectedInfo object:

Property	Type	Description
theme	`SystemThemeName`	Shipped theme that is now active: `light`, `dark`, or `os`
adaptableContext	`any`	Custom application Context provided in `AdaptableOptions.adaptableContext`

Event Subscription

Subscribing is the same as for all Adaptable Events:

api.eventApi.on('ThemeSelected', (eventInfo: ThemeSelectedInfo) => {
  // eventInfo.theme is 'light' | 'dark' | 'os'
});

Breaking Change

The older ThemeChanged event is deprecated and will be removed in the next major version
It is still emitted alongside ThemeSelected for backward compatibility when a system theme is applied

PreviousAG Grid Themes NextUI Guides