Themes

AG Grid Themes

AG Grid has several provided themes:

• Balham - original and dense
• Material - Google's material design
• Quartz - modern, high contrast, and spacious
• Alpine - legacy, use quartz

All themes come with a dark mode option.

Customizing Themes

• CSS variables
• CSS rules
• SCSS wrapper

CSS Variables

CSS variables was introduced in v28.

.ag-theme-quartz {
  --ag-background-color: blanchedalmond;
  --ag-foreground-color: deeppink;
  --ag-border-color: darkgray;
}

You can get a complete CSS variable reference in the AG Grid documentation.

CSS Rules

You can also customize the styling by including both the name of the theme as well as the class names applied to common AG Grid elements.

.ag-theme-quartz .ag-header {
  background-color: var(--ag-background-color);
  border-bottom-width: 2px;
  border-bottom-style: solid;
}

.ag-theme-quartz .ag-row-even {
  background-color: blanchedalmond;
}

SCSS Wrapper

Finally, AG Grid provides a SCSS wrapper for those that prefer this approach.

@use "ag-grid-community/styles" as ag;
@include ag.grid-styles();

@include ag.grid-styles((
  theme: material
));
.ag-theme-material {
  .ag-header-cell-label {
    font-style: italic;
  }
}