You can customise the overall design of the grid using CSS.
This page describes the grid's legacy theming system that was the default in 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 variables that allow you to control its appearance using a small amount of code. For more fine-grained control you can write CSS rules targeting the class names of individual elements:
/* set the background color of many elements across the grid */
.ag-theme-quartz {
--ag-background-color: #ddd;
}
/* change the font style of a single UI component */
.ag-theme-quartz .ag-header-cell-label {
font-style: italic;
}
CSS Variable support was added in v28 - if you have upgraded from an earlier version without changing your import paths then you will be using the legacy styles and will not have full CSS variable support. See the notes on upgrading to v28+.
You can consult the full list of CSS variables.
Creating a Reusable Package of Design Customisations
To create a reusable set of design customisations that can be shared between projects you can use a CSS class that is applied in addition to the theme you're modifying. The name of this class must begin with ag-theme-.
The grid wrapper element should specify both the class name of the theme you're modifying, and the name of the custom theme. Any styles for your custom theme should be loaded after the base theme.
<!-- grid div applies your class after the theme class -->
<div id="myGrid" class="ag-theme-quartz ag-theme-acmecorp"></div>
/* ag-theme-acmecorp.css */
.ag-theme-acmecorp {
--ag-odd-row-background-color: #aaa;
}