AG Grid Theming Guide

Melissa Spiegel

3 min read

·

Sep 3, 2026

--

Listen

Share

Overview

AG Grid exposes 100+ CSS variables (also referred to as theme parameters) that allow you to customize nearly every aspect of the grid’s appearance — from colors and typography to spacing, borders, and component styling.

With the modern Theming API, these parameters map directly to the withParams() configuration while also being available as CSS custom properties prefixed with --ag-.

Example:

--ag-background-color
--ag-header-height
--ag-font-family
--ag-border-color

Naming Convention

• Prefix: --ag-
• Format: kebab-case
• Scope: Apply within the AG Grid theme class (e.g. .ag-theme-quartz)

Theme Categories

🎨 Color Tokens

Color tokens control the visual appearance of the grid including backgrounds, text, selections, hover states, and validation.

Core Colors

CSS VariableDescription--ag-background-colorMain background color of the grid--ag-foreground-colorDefault text color--ag-header-background-colorHeader row background--ag-subheader-background-colorBackground for grouped column headers--ag-control-panel-background-colorSidebar and tool panel background

Row States

CSS VariableDescription--ag-odd-row-background-colorZebra striping for odd rows--ag-row-hover-colorRow hover background--ag-selected-row-background-colorSelected row background

Interactive States

CSS VariableDescription--ag-accent-colorPrimary accent color used throughout the grid--ag-invalid-colorValidation/error color--ag-range-selection-background-colorCell range selection background

📐 Spacing & Sizing

Spacing parameters determine the overall density and layout of the grid.

Global Spacing

CSS VariableDescription--ag-spacingBase spacing unit used throughout the grid

Heights

CSS VariableDescription--ag-header-heightHeight of header rows--ag-row-heightHeight of data rows

Padding

CSS VariableDescription--ag-cell-horizontal-paddingLeft/right padding inside cells--ag-header-cell-horizontal-paddingLeft/right padding inside header cells

🔤 Typography

Typography variables control fonts and text styling.

Global Fonts

CSS VariableDescription--ag-font-familyGrid font family--ag-font-sizeDefault font size

Header Styling

CSS VariableDescription--ag-header-cell-font-familyHeader font family--ag-header-cell-font-sizeHeader font size--ag-header-cell-font-weightHeader font weight

Miscellaneous

CSS VariableDescription--ag-card-radiusBorder radius used for menus, dialogs, tooltips, and popups

🧱 Borders & Separators

These variables define borders throughout the grid.

General Borders

CSS VariableDescription--ag-bordersMaster border style--ag-border-colorDefault border color

Row & Column Separators

CSS VariableDescription--ag-row-border-styleRow separator style--ag-row-border-colorRow separator color--ag-column-borderColumn separator--ag-header-column-borderHeader column separator

⚙️ Component-Specific Tokens

These parameters customize built-in AG Grid widgets.

Form Controls

CSS VariableDescription--ag-checkbox-checked-colorSelected checkbox color--ag-checkbox-background-colorUnselected checkbox background--ag-input-focus-border-colorInput focus border

Scrollbars

CSS VariableDescription--ag-browser-color-schemeControls browser scrollbar color scheme

Best Practices

Scope Variables to a Theme

Always scope custom properties to the AG Grid theme class instead of defining them globally.

.ag-theme-quartz {
    --ag-background-color: #f9f9f9;
    --ag-foreground-color: #1f2937;
    --ag-spacing: 6px;
    --ag-accent-color: #3b82f6;
    --ag-row-hover-color: rgba(59,130,246,.10);
}

Use a Single Source of Truth

Keep all theme variables together in one stylesheet (for example, ag-grid-theme.css) rather than scattering overrides throughout the application.

Prefer Theme Parameters

When possible:

• ✅ Use AG Grid CSS variables
• ✅ Use the Theming API (withParams())
• ❌ Avoid overriding internal AG Grid classes directly

Using theme parameters ensures upgrades remain straightforward and reduces the likelihood of breaking changes.

Example Theme

.ag-theme-quartz {     /* Colors */
    --ag-background-color: #ffffff;
    --ag-foreground-color: #1f2937;
    --ag-header-background-color: #f3f4f6;
    --ag-accent-color: #2563eb;    /* Layout */
    --ag-spacing: 6px;
    --ag-row-height: 40px;
    --ag-header-height: 44px;    /* Typography */
    --ag-font-family: Inter, Arial, sans-serif;
    --ag-font-size: 14px;
    --ag-header-cell-font-weight: 600;    /* Borders */
    --ag-border-color: #d1d5db;
    --ag-row-border-style: solid;    /* States */
    --ag-row-hover-color: rgba(37,99,235,.08);
    --ag-selected-row-background-color: rgba(37,99,235,.16);
}

References

• AG Grid Theming Documentation
• AG Grid Theming API (withParams)
• AG Grid Theme Builder
• AG Grid CSS Variables Documentation