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.
--ag-active-color | (Quartz theme only) accent colour used for checked checkboxes, range selections, and input focus outlines in the Quartz theme |
--ag-alpine-active-color | (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 |
--ag-balham-active-color | (Balham theme only) accent colour used for checked checkboxes, range selections, row selections, and input focus outlines in the Balham theme |
--ag-material-primary-color | (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 |
--ag-material-accent-color | (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 |
--ag-foreground-color | Colour of text and icons in primary UI elements like menus |
--ag-background-color | Background colour of the grid |
--ag-secondary-foreground-color | Colour of text and icons in UI elements that need to be slightly less emphasised to avoid distracting attention from data |
--ag-data-color | Colour of text in grid cells |
--ag-header-foreground-color | Colour of text and icons in the header |
--ag-header-background-color | Background colour for all headers, including the grid header, panels etc |
--ag-disabled-foreground-color | Color of elements that can't be interacted with because they are in a disabled state |
--ag-odd-row-background-color | Background colour applied to every other row |
--ag-row-hover-color | 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 |
--ag-border-color | Colour for border around major UI components like the grid itself, headers; footers and tool panels. |
--ag-row-border-color | 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%);
}