# Theming Technical Reference

Canonical page: https://www.adaptabletools.com/docs/technical-reference-theming

## Tailwind integration

AdapTable styles its UI with [Tailwind CSS](https://tailwindcss.com/) 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.

- **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](https://www.adaptabletools.com/docs/handbook-theming-custom/index.md)
- **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 app, use [AdapTable CSS variables](https://www.adaptabletools.com/docs/handbook-theming-custom/index.md) instead

AdapTable stylesheet rules are also nested in the **`adaptable`** [CSS layer](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@layer) (see [CSS Layers](https://www.adaptabletools.com/docs/handbook-theming/index.md#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:

```css
@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.

See [AdapTable UI Components](https://www.adaptabletools.com/docs/ui-components/index.md) and [Accessibility & Keyboard Support](https://www.adaptabletools.com/docs/ui-tutorial-accessibility-keyboard/index.md) for more information

----

## Theme State

| Property | Type | Description |
| --- | --- | --- |
| [CurrentTheme](https://www.adaptabletools.com/docs/reference/themestate.md#currenttheme) | [`SystemThemeName`](https://www.adaptabletools.com/docs/reference/systemthemename.md) | Shipped theme that is active: `'light'`, `'dark'`, or `'os'` (follows the operating system). When omitted, the theme is `'light'`. |
| [SystemThemes](https://www.adaptabletools.com/docs/reference/themestate.md#systemthemes) | `(`[`SystemThemeEntry`](https://www.adaptabletools.com/docs/reference/systemthemeentry.md)` \| `[`AdaptableTheme`](https://www.adaptabletools.com/docs/reference/adaptabletheme.md)`)[]` | 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`](https://www.adaptabletools.com/docs/reference/systemthemename.md):

[See API: systemthemename](https://www.adaptabletools.com/docs/reference/systemthemename.md)

A `SystemThemes` entry can instead be a [`SystemThemeOptions`](https://www.adaptabletools.com/docs/reference/systemthemeoptions.md) object:

| Property | Type | Description |
| --- | --- | --- |
| [AgThemeMode](https://www.adaptabletools.com/docs/reference/systemthemeoptions.md#agthememode) | `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 |
| [Name](https://www.adaptabletools.com/docs/reference/systemthemeoptions.md#name) | [`SystemThemeName`](https://www.adaptabletools.com/docs/reference/systemthemename.md) | Shipped theme this entry configures: `light`, `dark`, or `os` |

----

## Theme API

| Method | Returns | Description |
| --- | --- | --- |
| [applyCurrentTheme()](https://www.adaptabletools.com/docs/reference/themeapi.md#applycurrenttheme) | `void` | Applies the Current Theme |
| [editTheme(theme)](https://www.adaptabletools.com/docs/reference/themeapi.md#edittheme) | `void` | Replaces a theme already in state. |
| [getCurrentTheme()](https://www.adaptabletools.com/docs/reference/themeapi.md#getcurrenttheme) | `string` | Retrieves name of Current Theme |
| [getCurrentThemeObject()](https://www.adaptabletools.com/docs/reference/themeapi.md#getcurrentthemeobject) | [`AdaptableTheme`](https://www.adaptabletools.com/docs/reference/adaptabletheme.md) | Retrieves the current theme object |
| [getSystemThemes()](https://www.adaptabletools.com/docs/reference/themeapi.md#getsystemthemes) | [`AdaptableTheme`](https://www.adaptabletools.com/docs/reference/adaptabletheme.md)`[]` | Retrieves System Themes in State |
| [getThemeByName(themeName)](https://www.adaptabletools.com/docs/reference/themeapi.md#getthemebyname) | [`AdaptableTheme`](https://www.adaptabletools.com/docs/reference/adaptabletheme.md) | A theme looked up by name, system or user. |
| [getThemes()](https://www.adaptabletools.com/docs/reference/themeapi.md#getthemes) | [`AdaptableTheme`](https://www.adaptabletools.com/docs/reference/adaptabletheme.md)`[]` | Retrieves all Themes (both System &amp; User) in State |
| [getThemeState()](https://www.adaptabletools.com/docs/reference/themeapi.md#getthemestate) | [`ThemeState`](https://www.adaptabletools.com/docs/reference/themestate.md) | Retrieves Theme section from Adaptable State |
| [loadDarkTheme()](https://www.adaptabletools.com/docs/reference/themeapi.md#loaddarktheme) | `void` | Sets AdapTable Dark Theme - updates the AG Grid theme to match |
| [loadLightTheme()](https://www.adaptabletools.com/docs/reference/themeapi.md#loadlighttheme) | `void` | Sets AdapTable Light Theme - updates the AG Grid theme to match |
| [loadTheme(theme)](https://www.adaptabletools.com/docs/reference/themeapi.md#loadtheme) | `void` | Sets Adaptable to use a given theme |
| [openThemeSettingsPanel()](https://www.adaptabletools.com/docs/reference/themeapi.md#openthemesettingspanel) | `void` | Opens Settings Panel with Theme section selected and visible |
| [setSystemThemes(systemThemes)](https://www.adaptabletools.com/docs/reference/themeapi.md#setsystemthemes) | `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`](https://www.adaptabletools.com/docs/reference/themeselectedinfo.md) object:

| Property | Type | Description |
| --- | --- | --- |
| [theme](https://www.adaptabletools.com/docs/reference/themeselectedinfo.md#theme) | [`SystemThemeName`](https://www.adaptabletools.com/docs/reference/systemthemename.md) | Shipped theme that is now active: `light`, `dark` or `os`. |
| [adaptableContext](https://www.adaptabletools.com/docs/reference/themeselectedinfo.md#adaptablecontext) | `any` | Custom application Context provided in `AdaptableOptions.adaptableContext` |

### Event Subscription

Subscribing is the same as for all [Adaptable Events](https://www.adaptabletools.com/docs/technical-reference-adaptable-events/index.md):

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