# Referencing Theme Variables

Canonical page: https://www.adaptabletools.com/docs/handbook-theming-referencing

- AdapTable exposes theme colours as CSS variables — which you can reference in [Adaptable Styles](https://www.adaptabletools.com/docs/ui-tutorial-providing-adaptable-style/index.md)
- You can do this with both the core **shipped** light and dark themes, and if you extend them
- When users switch theme at run time, object styling picks up the active theme's values automatically

It is quite common to reference AdapTable's theme-based CSS variables when configuring an [Adaptable Style](https://www.adaptabletools.com/docs/ui-tutorial-providing-adaptable-style/index.md).

For instance you might want to reference `var(--ab-color-destructive)` directly when configuring a Format Column.

## Using CSS Variables in Adaptable Styles

Any [Adaptable Style](https://www.adaptabletools.com/docs/ui-tutorial-providing-adaptable-style/index.md) colour property accepts `var(--ab-color-…)` the same way it accepts a hex code or a named swatch.

- **Shipped defaults**: semantic variables (`--ab-color-destructive`, `--ab-color-success`, …) and palette pairs (`--ab-color-palette-1` … `--ab-color-palette-12`) already differ between light and dark — referencing them gives you theme-aware grid styling with no extra CSS
- **Custom overrides**: if you also customise themes (see [Customising Themes](https://www.adaptabletools.com/docs/handbook-theming-custom/index.md)), the same `var(…)` references pick up your overrides when that theme is active
- **One rule, two themes**: you do not need duplicate Format Columns per theme — the browser resolves `var()` against the active theme at render time

### Where to use references

Typical places include:

- [Format Columns](https://www.adaptabletools.com/docs/handbook-column-formatting/index.md)
- [Conditional Styles](https://www.adaptabletools.com/docs/handbook-conditional-style)
- [Flashing Cells](https://www.adaptabletools.com/docs/handbook-flashing-cell/index.md)
- [Styled Columns](https://www.adaptabletools.com/docs/handbook-styled-column) (badge and rating colours)
- [Quick Search](https://www.adaptabletools.com/docs/handbook-quick-search/index.md) match highlighting, [Alerts](https://www.adaptabletools.com/docs/handbook-alerts) row styles, and others listed in [Adaptable Style Object](https://www.adaptabletools.com/docs/ui-tutorial-providing-adaptable-style/index.md)

### Palette and semantic variables

Palette pairs are useful for muted row/cell highlights (background + foreground). Semantic variables (`--ab-color-destructive`, `--ab-color-warn`, `--ab-color-info`, `--ab-color-success`, …) match alert and status colours in the UI.

The [Approved Supplier Registry](https://www.adaptabletools.com/docs/showcase-demos-supplier-registry/index.md) showcase demonstrates palette variables in **team-shared** Format Columns — Alice's pending/suspended highlights render in Bob's palette after he imports her formats.

**Example: Demo: CSS Variables in Adaptable Styles**

Format Columns that follow the active theme

- **Adaptable State** (`adaptableOptions.ts`): three [Format Columns](https://www.adaptabletools.com/docs/handbook-column-formatting/index.md) reference theme variables:
  - `HTML` rows: `BackColor: var(--ab-color-info)`
  - Negative **week_issue_change**: `ForeColor: var(--ab-color-destructive)`
  - Positive **week_issue_change**: `ForeColor: var(--ab-color-success)`
- With **no** custom theme CSS, those resolve to the shipped dark-theme values (cyan, salmon, lime-ish defaults)
- **Optional CSS** (`styles.css`): overrides the same three variables in **dark** only — refresh to see grid colours change without editing the Format Column definitions
- Use the **Theme** toolbar to switch to **light** — the format rules stay the same; colours follow whichever values that theme defines (shipped defaults, or your overrides if you add them)

Demo project (Vanilla); the files without a marker are shown below:

```text
src/
  adaptableOptions.ts
  agGridModules.ts     [template]
  columnDefs.ts        [template]
  gridOptions.ts       [template]
  index.ts             [template]
  onAdaptableReady.ts  [template]
  rowData.ts           [template]
  styles.css           [template + shown below]
index.html             [template]
package.json           [template]
tsconfig.json          [template]
```

Files marked `[template]` are the same in every demo; see the [demo template](https://www.adaptabletools.com/llms/demo-template.md#vanilla).

**`src/adaptableOptions.ts`**

```ts
import {AdaptableOptions} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Referencing Theme Variables',
  initialState: {
    Dashboard: {
      ModuleButtons: ['Theme'],
      Tabs: [
        {
          Name: 'Default',
          Toolbars: ['Theme'],
        },
      ],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Theme'],
        },
      ],
    },
    Theme: {
      CurrentTheme: 'dark',
    },
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'name',
            'language',
            'week_issue_change',
            'github_stars',
            'github_watchers',
            'topics',
            'license',
            'has_wiki',
            'created_at',
            'pushed_at',
            'updated_at',
            'description',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
          ],
          AutoSizeColumns: true,
        },
      ],
    },
    FormatColumn: {
      FormatColumns: [
        {
          Name: 'formatColumn-language-HTML',
          Scope: {
            All: true,
          },
          Style: {
            BackColor: 'var(--ab-color-info)',
            ForeColor: 'var(--ab-color-foreground)',
          },
          Rule: "[language]='HTML'",
        },
        {
          Name: 'formatColumn-week_issue_change-negative',
          Scope: {
            ColumnIds: ['week_issue_change'],
          },
          Style: {
            ForeColor: 'var(--ab-color-destructive)',
          },
          Rule: '[week_issue_change] < 0',
        },
        {
          Name: 'formatColumn-week_issue_change-positive',
          Scope: {
            ColumnIds: ['week_issue_change'],
          },
          Style: {
            ForeColor: 'var(--ab-color-success)',
          },
          Rule: '[week_issue_change] > 0',
        },
      ],
    },
  },
};
```

**`src/styles.css`**

```css
/* Optional: override semantic colours in dark theme to make the demo effect obvious.
   Remove or comment out this block to see shipped defaults only. */
:root.ab--theme-dark {
  --ab-color-success: lime;
  --ab-color-destructive: salmon;
  --ab-color-info: cyan;
}
```

[Providing a Custom Colour Palette](https://www.adaptabletools.com/docs/ui-tutorial-custom-colour-palette/index.md) — palette slots in the colour picker and how to override them per theme