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.
