Change the overall colour scheme and appearance of data.
This page describes the grid's theming system from v32 and before, for the benefit of applications that have not yet migrated to the Theming API. These themes are deprecated and will be removed in a future major version. You may want to visit the new theming docs or check out the migration guide.
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.
(Quartz theme only) accent colour used for checked checkboxes, range selections, and input focus outlines in the Quartz theme |
(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 |
(Balham theme only) accent colour used for checked checkboxes, range selections, row selections, and input focus outlines in the Balham theme |
(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 |
(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 |
Colour of text and icons in primary UI elements like menus |
Background colour of the grid |
Colour of text and icons in UI elements that need to be slightly less emphasised to avoid distracting attention from data |
Colour of text in grid cells |
Colour of text and icons in the header |
Background colour for all headers, including the grid header, panels etc |
Color of elements that can't be interacted with because they are in a disabled state |
Background colour applied to every other row |
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 |
Colour for border around major UI components like the grid itself, headers; footers and tool panels. |
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%);
}