---
product: "AG Grid"
title: "Legacy Themes: CSS Variable Reference"
description: "Here is a list of variables accepted by the grid:"
framework: angular
version: "36.2.0"
llms: "https://www.ag-grid.com/archive/36.2.0/llms.txt"
---

# Legacy Themes: CSS Variable Reference

> **Note**
>
> This page describes the grid's legacy theming system that was the default in v32 and before, for the benefit of applications that have not yet migrated to the Theming API. These themes are deprecated and will be removed in a future major version. You may want to visit the [new theming docs](https://www.ag-grid.com/archive/36.2.0/angular-data-grid/theming/) or check out the [migration guide](https://www.ag-grid.com/archive/36.2.0/angular-data-grid/theming-migration/).

Here is a list of variables accepted by the grid:

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `--ag-active-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-alpine-active-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-balham-active-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-material-primary-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-material-accent-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-foreground-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-secondary-foreground-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-data-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-header-foreground-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-header-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-tooltip-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-disabled-foreground-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-subheader-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-subheader-toolbar-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-control-panel-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-side-button-selected-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-selected-row-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-data-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-odd-row-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-modal-overlay-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-menu-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-panel-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-row-hover-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-row-drag-indicator-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-row-drag-indicator-width` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-column-drag-indicator-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-column-drag-indicator-width` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-column-hover-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-range-selection-border-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-range-selection-border-style` | `a CSS border style (e.g. `dotted`, `solid` or `none`)` |  |  |  |
| `--ag-range-selection-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-range-selection-background-color-2` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-range-selection-background-color-3` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-range-selection-background-color-4` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-range-selection-highlight-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-range-header-highlight-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-calculated-column-highlight-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-selected-tab-underline-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-selected-tab-underline-width` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  |  |
| `--ag-selected-tab-underline-transition-speed` | `CSS time duration (e.g. `3s` or `250ms`)` |  |  |  |
| `--ag-range-selection-chart-category-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-range-selection-chart-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-header-cell-hover-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-header-cell-moving-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-value-change-value-highlight-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-value-change-delta-up-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-value-change-delta-down-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-chip-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-borders` | `a CSS border style and size (e.g. `solid 1px` or `none`)` |  |  |  |
| `--ag-border-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-borders-critical` | `a CSS border style and size (e.g. `solid 1px` or `none`)` |  |  |  |
| `--ag-borders-secondary` | `a CSS border style and size (e.g. `solid 1px` or `none`)` |  |  |  |
| `--ag-secondary-border-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-row-border-style` | `a CSS border style (e.g. `solid` or `dotted`)` |  |  |  |
| `--ag-row-border-width` | `a CSS border style (e.g. `solid` or `dotted`)` |  |  |  |
| `--ag-row-border-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-row-numbers-selected-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-menu-border-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-panel-border-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-cell-horizontal-border` | `a CSS border style and colour (e.g. `solid red`)` |  |  |  |
| `--ag-borders-input` | `a CSS border style and size (e.g. `solid 1px` or `none`)` |  |  |  |
| `--ag-input-border-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-borders-input-invalid` | `a CSS border style and size (e.g. `solid 1px` or `none`)` |  |  |  |
| `--ag-input-border-color-invalid` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-full-row-invalid-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-borders-side-button` | `a CSS border style and size (e.g. `solid 1px` or `none`)` |  |  |  |
| `--ag-border-radius` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  |  |
| `--ag-invalid-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-input-disabled-border-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-input-disabled-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-checkbox-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-checkbox-border-radius` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  |  |
| `--ag-checkbox-checked-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-checkbox-unchecked-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-checkbox-indeterminate-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-toggle-button-border-width` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  |  |
| `--ag-toggle-button-on-border-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-toggle-button-off-border-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-toggle-button-on-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-toggle-button-off-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-toggle-button-switch-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-toggle-button-switch-border-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-toggle-button-width` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  |  |
| `--ag-toggle-button-height` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  |  |
| `--ag-input-focus-box-shadow` | `CSS box-shadow value (e.g. `0 5px 10px black`)` |  |  |  |
| `--ag-input-focus-border-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-minichart-selected-chart-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-minichart-selected-page-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-grid-size` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  |  |
| `--ag-icon-size` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  |  |
| `--ag-icon-font-weight` | `CSS font weight value (e.g. `100`, `bold` or `normal`)` |  |  |  |
| `--ag-widget-container-horizontal-padding` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  |  |
| `--ag-widget-container-vertical-padding` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  |  |
| `--ag-widget-horizontal-spacing` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  |  |
| `--ag-widget-vertical-spacing` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  |  |
| `--ag-cell-horizontal-padding` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  |  |
| `--ag-cell-widget-spacing` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  |  |
| `--ag-row-height` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  |  |
| `--ag-auto-height-min-body-height` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  |  |
| `--ag-header-height` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  |  |
| `--ag-list-item-height` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  |  |
| `--ag-pagination-panel-height` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  |  |
| `--ag-header-column-separator-display` | `CSS display value - `block` to show or `none` to hide` |  |  |  |
| `--ag-header-column-separator-height` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  |  |
| `--ag-header-column-separator-width` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  |  |
| `--ag-header-column-separator-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-header-column-resize-handle-display` | `CSS display value - `block` to show or `none` to hide` |  |  |  |
| `--ag-header-column-resize-handle-height` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  |  |
| `--ag-header-column-resize-handle-width` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  |  |
| `--ag-header-column-resize-handle-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-column-select-indent-size` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  |  |
| `--ag-set-filter-indent-size` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  |  |
| `--ag-advanced-filter-builder-indent-size` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  |  |
| `--ag-row-group-indent-size` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  |  |
| `--ag-filter-tool-panel-group-indent` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  |  |
| `--ag-tab-min-width` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  |  |
| `--ag-menu-min-width` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  |  |
| `--ag-side-bar-panel-width` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  |  |
| `--ag-font-family` | `CSS font-family value (e.g. `font-family: `'Gill Sans', sans-serif`)` |  |  |  |
| `--ag-font-size` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  |  |
| `--ag-icon-font-family` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  |  |
| `--ag-card-radius` | `CSS length (e.g. `0`, `4px` or `50%`)` |  |  |  |
| `--ag-card-shadow` | `CSS box-shadow value (e.g. `0 5px 10px black`)` |  |  |  |
| `--ag-popup-shadow` | `CSS box-shadow value (e.g. `0 5px 10px black`)` |  |  |  |
| `--ag-advanced-filter-join-pill-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-advanced-filter-column-pill-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-advanced-filter-option-pill-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-advanced-filter-value-pill-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-row-loading-skeleton-effect-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-find-match-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-find-match-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-find-active-match-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-find-active-match-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-pinned-row-border` | `a CSS border style, size and color (e.g. `1px dotted black`, `3rem solid #fff` or `none`)` |  |  |  |
| `--ag-pinned-row-text-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-pinned-row-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-pinned-row-font-weight` | `CSS font weight value (e.g. `100`, `bold` or `normal`)` |  |  |  |
| `--ag-pinned-source-row-text-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-pinned-source-row-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-pinned-source-row-font-weight` | `CSS font weight value (e.g. `100`, `bold` or `normal`)` |  |  |  |