Skip to main content
AG Grid provides a powerful theming system with four built-in themes, each available in light and dark modes. You can use themes as-is or customize them using CSS variables.

​
Available Themes

AG Grid includes four professionally designed themes:

Quartz

Modern, clean design with subtle shadows and borders

Material

Google Material Design inspired theme

Alpine

Compact, data-dense theme for enterprise applications

Balham

Professional theme with clear hierarchy

​
Using Themes

​
Import Theme Styles

Import both the base grid styles and your chosen theme: 
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-quartz.css';

​
Apply Theme Class

Add the theme class to your grid container: 
<div id="myGrid" class="ag-theme-quartz" style="height: 500px;"></div>

​
Dark Mode

All themes support dark mode. Append -dark to the theme class: 
<div id="myGrid" class="ag-theme-quartz-dark" style="height: 500px;"></div>

<div class="ag-theme-quartz-dark" style="height: 500px;"></div>

​
Theme Customization

Customize themes using CSS variables without modifying the original theme files.

​
CSS Variables

.ag-theme-quartz {
  --ag-foreground-color: rgb(33, 37, 41);
  --ag-background-color: rgb(255, 255, 255);
  --ag-header-background-color: rgb(248, 249, 250);
  --ag-odd-row-background-color: rgb(248, 249, 250);
  --ag-row-hover-color: rgb(240, 244, 248);
}

​
Common Customizations

.ag-theme-quartz {
  --ag-alpine-active-color: #04dcfc;
}

.ag-theme-quartz {
  --ag-row-height: 50px;
  --ag-header-height: 60px;
}

.ag-theme-quartz {
  --ag-font-family: 'Inter', sans-serif;
  --ag-font-size: 14px;
}

​
Next Steps

Custom Themes

Create a fully custom theme from scratch

Styling Cells

Apply custom styles to individual cells

Build docs developers (and LLMs) love

Get started for freeTalk to us