Theming

The theme is Tailwind CSS v4 only. By default the grid follows your app: neutral surfaces, borders and text map to your Tailwind palette (--color-zinc-*), and the accent maps to Flux's --color-accent when present. Dark mode follows the .dark class.

Loading the theme

Livewire inlines the theme automatically (via the service provider) — nothing to import.

Svelte / Vue — import once in your entry:

import '@elyra/datagrid-theme/theme.css';     // app-following base + dark mode
import '@elyra/datagrid-theme/accents.css';   // Flux-style accents (data-dg-accent)
import '@elyra/datagrid-theme/grid.css';      // component styles

App-following by default

With no configuration the grid inherits your app's Tailwind v4 palette and Flux accent, and switches to dark under .dark. In a Flux app it matches the app's theme automatically.

Accent themes (Flux-style)

Pick an accent per grid with data-dg-accent (via the accent prop). 18 colors are available: zinc, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose.

<DataGrid :options="options" accent="emerald" />

<livewire:sales-grid accent="emerald" />

Accents map to Tailwind color scales (-600 light, -500 dark), with dark text on bright accents. If your app already sets --color-accent (Flux), omit accent to inherit it.

Presets

A fixed Tokyo Night preset is included (ignores the app palette):

import '@elyra/datagrid-theme/tokyo-night.css';

<DataGrid :options="options" theme="tokyo-night" />

Design tokens

The grid renders entirely against semantic CSS variables (--dg-*). Override any of them to fine-tune, scoped to .dg or a theme selector:

Example — a custom accent without an app variable:

.dg[data-dg-accent="brand"] { --dg-accent: #7c3aed; --dg-accent-fg: white; }

Dark / light

Dark mode is driven by the .dark class on any ancestor (Tailwind v4 / Flux convention). No per-grid toggle is required — the grid follows the app.