Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/ag-grid/ag-grid/llms.txt

Use this file to discover all available pages before exploring further.

The Quartz theme is AG Grid’s modern default theme, featuring clean lines, subtle shadows, and a polished appearance.

​
Installation

Import the Quartz theme stylesheet: 
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-quartz.css';

​
Usage

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

​
Dark Mode

Use the dark variant with the ag-theme-quartz-dark class: 
<div id="myGrid" class="ag-theme-quartz-dark" style="height: 500px;"></div>

​
Customization

Customize the Quartz theme using CSS variables: 
.ag-theme-quartz {
  --ag-foreground-color: #1a1a1a;
  --ag-background-color: #ffffff;
  --ag-header-background-color: #f8f9fa;
  --ag-border-color: #e0e0e0;
  --ag-row-hover-color: #f0f4f8;
  --ag-selected-row-background-color: #e3f2fd;
}
The Quartz theme is the recommended theme for new projects.