Theming Technical Reference
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/@sourcepaths - 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 withtwaare internal to AdapTable's styling and may change at any time; to reuse AdapTable's colours and theming in your app, use 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
ThemeState
Theme section of Adaptable State, including Initial State.
CurrentTheme is 'light' (the default), 'dark', or 'os'. SystemThemes limits which shipped themes are offered. Omit it to offer all of them.
Shipped theme that is active: 'light', 'dark', or 'os' (follows the operating system). When omitted, the theme is 'light'.
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
CurrentTheme and each entry in SystemThemes use a SystemThemeName:
| Value |
|---|
TypeHint<string, 'light' |
'dark' |
'os'> |
A SystemThemes entry can instead be a SystemThemeOptions object:
SystemThemeOptions
Pairing options between AG Grid and AdapTable themes
TypeHint<string, 'light' | 'dark' | 'dark-blue'>
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
Shipped theme this entry configures: light, dark, or os
Theme API
ThemeApi
The theme currently applied, and the system and user themes in state.
void
Applies the Current Theme
void
Replaces a theme already in state.
string
Retrieves name of Current Theme
Retrieves the current theme object
Retrieves System Themes in State
A theme looked up by name, system or user.
Retrieves all Themes (both System & User) in State
Retrieves Theme section from Adaptable State
void
Sets AdapTable Dark Theme - updates the AG Grid theme to match
void
Sets AdapTable Light Theme - updates the AG Grid theme to match
void
Sets Adaptable to use a given theme
void
Opens Settings Panel with Theme section selected and visible
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:
ThemeSelectedInfo
Payload of the ThemeSelected event.
Fires when a shipped theme is selected, applied at startup, or re-applied. theme is light, dark or os.
Extends , so adaptableApi is included.
Shipped theme that is now active: light, dark or os.
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'
});