Skip to main content
Create custom themes by overriding CSS variables or building themes from scratch.

​
Using CSS Variables

The easiest way to create a custom theme is to extend an existing theme and override CSS variables.

​
Color Variables

.ag-theme-quartz.my-custom-theme {
  /* Base colors */
  --ag-foreground-color: #1a1a1a;
  --ag-background-color: #ffffff;
  --ag-header-foreground-color: #000000;
  --ag-header-background-color: #f8f9fa;
  
  /* Border colors */
  --ag-border-color: #e0e0e0;
  --ag-row-border-color: #f0f0f0;
  
  /* Interactive colors */
  --ag-row-hover-color: #f0f4f8;
  --ag-selected-row-background-color: #e3f2fd;
  --ag-range-selection-background-color: rgba(4, 220, 252, 0.2);
  
  /* Accent color */
  --ag-alpine-active-color: #04dcfc;
}

​
Spacing Variables

.ag-theme-quartz.my-custom-theme {
  --ag-row-height: 48px;
  --ag-header-height: 56px;
  --ag-cell-horizontal-padding: 16px;
  --ag-cell-horizontal-border: solid transparent;
}

​
Typography Variables

.ag-theme-quartz.my-custom-theme {
  --ag-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ag-font-size: 14px;
  --ag-header-font-size: 14px;
  --ag-header-font-weight: 600;
}

​
Complete Example

1

Create your CSS file

Create a new CSS file for your custom theme:
custom-theme.css
.ag-theme-quartz.my-app-theme {
  /* Brand colors */
  --ag-alpine-active-color: #04dcfc;
  --ag-foreground-color: #1a1a1a;
  --ag-background-color: #ffffff;
  
  /* Header */
  --ag-header-background-color: #f8f9fa;
  --ag-header-foreground-color: #000000;
  --ag-header-height: 56px;
  
  /* Rows */
  --ag-row-height: 48px;
  --ag-row-hover-color: #f0f4f8;
  --ag-selected-row-background-color: rgba(4, 220, 252, 0.1);
  
  /* Borders */
  --ag-border-color: #e0e0e0;
  --ag-border-radius: 8px;
  
  /* Typography */
  --ag-font-family: 'Inter', sans-serif;
  --ag-font-size: 14px;
}
2

Import your theme

Import your custom theme after the base theme:
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-quartz.css';
import './custom-theme.css';
3

Apply your theme

Use both the base theme class and your custom class:
<div id="myGrid" class="ag-theme-quartz my-app-theme" style="height: 500px;"></div>

​
Available CSS Variables

  • --ag-foreground-color - Text color
  • --ag-background-color - Grid background
  • --ag-header-foreground-color - Header text
  • --ag-header-background-color - Header background
  • --ag-disabled-foreground-color - Disabled text
  • --ag-border-color - Border color
  • --ag-row-hover-color - Row hover background
  • --ag-selected-row-background-color - Selected row background
  • --ag-row-height - Default row height
  • --ag-header-height - Header row height
  • --ag-cell-horizontal-padding - Cell padding
  • --ag-grid-size - Base spacing unit (4px)
  • --ag-font-family - Font stack
  • --ag-font-size - Base font size
  • --ag-header-font-size - Header font size
  • --ag-header-font-weight - Header font weight
  • --ag-border-radius - Border radius
  • --ag-borders - Enable/disable borders
  • --ag-borders-critical - Critical borders only

​
Dark Mode Support

Create dark mode variants using media queries or separate classes: 
/* Media query approach */
@media (prefers-color-scheme: dark) {
  .ag-theme-quartz.my-app-theme {
    --ag-foreground-color: #e0e0e0;
    --ag-background-color: #1a1d27;
    --ag-header-background-color: #242838;
  }
}

/* Separate class approach */
.ag-theme-quartz-dark.my-app-theme-dark {
  --ag-foreground-color: #e0e0e0;
  --ag-background-color: #1a1d27;
  --ag-header-background-color: #242838;
}

​
Best Practices

Start with a base

Extend an existing theme rather than building from scratch

Test thoroughly

Test your theme with different grid configurations and features

Consider accessibility

Ensure sufficient color contrast for readability

Document changes

Keep a list of customized variables for maintenance