Custom Themes

Create fully customized themes for AG Grid

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

Colors

• --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

Spacing

• --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)

Typography

• --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

Borders & Effects

• --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