JavaScript Data GridCustomising Colours & Fonts

Change the overall colour scheme and appearance of data.

The grid exposes many CSS --ag-*-color variables that affect the colour of elements. --ag-font-size and --ag-font-family control the default font for the grid.

Example

.ag-theme-quartz {
    --ag-foreground-color: rgb(126, 46, 132);
    --ag-background-color: rgb(249, 245, 227);
    --ag-header-foreground-color: rgb(204, 245, 172);
    --ag-header-background-color: rgb(209, 64, 129);
    --ag-odd-row-background-color: rgb(0, 0, 0, 0.03);
    --ag-header-column-resize-handle-color: rgb(126, 46, 132);

    --ag-font-size: 17px;
    --ag-font-family: monospace;
}

The above code produces these results:

Key colour variables

Some of the most important colour variables are listed below. For the full list check the full CSS variables reference - every colour variable ends with -color.

CSS color (e.g. `red` or `#fff`)

(Quartz theme only) accent colour used for checked checkboxes, range selections, and input focus outlines in the Quartz theme

CSS color (e.g. `red` or `#fff`)

(Alpine theme only) accent colour used for checked checkboxes, range selections, row hover, row selections, selected tab underlines, and input focus outlines in the Alpine theme

CSS color (e.g. `red` or `#fff`)

(Balham theme only) accent colour used for checked checkboxes, range selections, row selections, and input focus outlines in the Balham theme

CSS color (e.g. `red` or `#fff`)

(Material theme only) the primary colour as defined in the Material Design colour system. Currently this is used on buttons, range selections and selected tab underlines in the Material theme

CSS color (e.g. `red` or `#fff`)

(Material theme only) the accent colour as defined in the Material Design colour system. Currently this is used on checked checkboxes in the Material theme

CSS color (e.g. `red` or `#fff`)

Colour of text and icons in primary UI elements like menus

CSS color (e.g. `red` or `#fff`)

Background colour of the grid

CSS color (e.g. `red` or `#fff`)

Colour of text and icons in UI elements that need to be slightly less emphasised to avoid distracting attention from data

CSS color (e.g. `red` or `#fff`)

Colour of text in grid cells

CSS color (e.g. `red` or `#fff`)

Colour of text and icons in the header

CSS color (e.g. `red` or `#fff`)

Background colour for all headers, including the grid header, panels etc

CSS color (e.g. `red` or `#fff`)

Color of elements that can't be interacted with because they are in a disabled state

CSS color (e.g. `red` or `#fff`)

Background colour applied to every other row

CSS color (e.g. `red` or `#fff`)

Background color when hovering over rows in the grid and in dropdown menus. Set to transparent to disable the hover effect. Note: if you want a rollover on one but not the other, use CSS selectors instead of this property

CSS color (e.g. `red` or `#fff`)

Colour for border around major UI components like the grid itself, headers; footers and tool panels.

CSS color (e.g. `red` or `#fff`)

Colour of the border between grid rows, or transparent to display no border

There are a lot of colour variables - the easiest way to find the variable that colours a specific element is often to inspect the element in your browser's developer tools and check the value of its color or background-color properties.

Colour blending

The Quartz theme automatically generates semi-transparent versions of colour variables based on the ones that you define. For example if you set --ag-active-color to red then --ag-range-selection-background-color will default to a 20% opaque red.

If you're on a theme other than Quartz, you can achieve this effect yourself using the CSS color-mix() function. Here is how you would set the range selection background to a 20% opaque red when using the Alpine theme:

.ag-theme-alpine {
    --ag-range-selection-background-color: color-mix(in srgb, transparent, red 20%);
}