Referencing Theme Variables

Summary

AdapTable exposes theme colours as CSS variables — which you can reference in Adaptable Styles
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.

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 colour property accepts var(--ab-color-…) the same way it accepts a hex code or a named swatch.

Note

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), 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
Conditional Styles
Flashing Cells
Styled Columns (badge and rating colours)
Quick Search match highlighting, Alerts row styles, and others listed in Adaptable Style Object

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 showcase demonstrates palette variables in team-shared Format Columns — Alice's pending/suspended highlights render in Bob's palette after he imports her formats.

Demo: CSS Variables in Adaptable Styles

Fork Fork

Adaptable State (adaptableOptions.ts): three Format Columns 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)

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Referencing Theme Variables',
  initialState: {
    Dashboard: {
      ModuleButtons: ['SettingsPanel', '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: {
            BooleanExpression: "[language]='HTML'",
          },
        },
        {
          Name: 'formatColumn-week_issue_change-negative',
          Scope: {
            ColumnIds: ['week_issue_change'],
          },
          Style: {
            ForeColor: 'var(--ab-color-destructive)',
          },
          Rule: {
            Predicates: [
              {
                PredicateId: 'Negative',
              },
            ],
          },
        },
        {
          Name: 'formatColumn-week_issue_change-positive',
          Scope: {
            ColumnIds: ['week_issue_change'],
          },
          Style: {
            ForeColor: 'var(--ab-color-success)',
          },
          Rule: {
            Predicates: [
              {
                PredicateId: 'Positive',
              },
            ],
          },
        },
      ],
    },
  },
};

Find Out More

Providing a Custom Colour Palette — palette slots in the colour picker and how to override them per theme

PreviousCustomising Themes NextAG Grid Themes