---
product: "AG Grid"
title: "Theme Parameters Reference"
description: "Complete reference for all AG Grid theme parameters used to configure colours, fonts, borders, spacing and more."
framework: javascript
version: "36.2.0"
related:
    - title: "Overview"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/grid-interface/"
    - title: "Options Reference"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/grid-options/"
    - title: "Events Reference"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/grid-events/"
    - title: "API Reference"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/grid-api/"
    - title: "Custom Components"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/components/"
llms: "https://www.ag-grid.com/archive/36.2.0/llms.txt"
---

# Theme Parameters Reference

This page documents all theme parameters available when using the [Theming API](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/theming-parameters/).

Parameters are set using the `theme.withParams()` method:

```js
const myTheme = themeQuartz.withParams({
    accentColor: 'red',
    spacing: 12,
});
```

### Foundations

Core theme parameters. Most other parameters derive from these values by default.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `backgroundColor` | `ColorValue` |  |  |  |
| `foregroundColor` | `ColorValue` |  |  |  |
| `accentColor` | `ColorValue` |  |  |  |
| `spacing` | `LengthValue` |  |  |  |
| `fontFamily` | `FontFamilyValue` |  |  |  |
| `fontSize` | `LengthValue` |  |  |  |
| `fontWeight` | `FontWeightValue` |  |  |  |

### Colours

See [Theming: Colours & Dark Mode](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/theming-colors/) for more information.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `textColor` | `ColorValue` |  |  |  |
| `chromeBackgroundColor` | `ColorValue` |  |  |  |
| `invalidColor` | `ColorValue` |  |  |  |
| `subtleTextColor` | `ColorValue` |  |  |  |
| `browserColorScheme` | `ColorSchemeValue` |  |  |  |

### Spacing & Sizing

See [Theming: Compactness & Row Height](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/theming-compactness/) for more information.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `headerHeight` | `LengthValue` |  |  |  |
| `rowHeight` | `LengthValue` |  |  |  |
| `autoHeightMinBodyHeight` | `LengthValue` |  |  |  |
| `autoHeightMaxBodyHeight` | `LengthValue` |  |  |  |
| `listItemHeight` | `LengthValue` |  |  |  |
| `paginationPanelHeight` | `LengthValue` |  |  |  |
| `widgetContainerHorizontalPadding` | `LengthValue` |  |  |  |
| `widgetContainerVerticalPadding` | `LengthValue` |  |  |  |
| `widgetHorizontalSpacing` | `LengthValue` |  |  |  |
| `widgetVerticalSpacing` | `LengthValue` |  |  |  |

### Borders

See [Theming API: Customising Borders](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/theming-borders/) for more information.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `borderColor` | `ColorValue` |  |  |  |
| `borderWidth` | `LengthValue` |  |  |  |
| `borderRadius` | `LengthValue` |  |  |  |
| `wrapperBackgroundColor` | `ColorValue` |  |  |  |
| `wrapperBorder` | `BorderValue` |  |  |  |
| `wrapperBorderRadius` | `LengthValue` |  |  |  |
| `columnBorder` | `BorderValue` |  |  |  |
| `pinnedColumnBorder` | `BorderValue` |  |  |  |

### Headers

Style [Column Headers](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/column-headers/), see also [Theming: Customising Headers](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/theming-headers/)

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `headerBackgroundColor` | `ColorValue` |  |  |  |
| `headerTextColor` | `ColorValue` |  |  |  |
| `headerFontFamily` | `FontFamilyValue` |  |  |  |
| `headerFontSize` | `LengthValue` |  |  |  |
| `headerFontWeight` | `FontWeightValue` |  |  |  |
| `headerVerticalPaddingScale` | `ScaleValue` |  |  |  |
| `headerRowBorder` | `BorderValue` |  |  |  |
| `headerColumnBorder` | `BorderValue` |  |  |  |
| `headerColumnBorderHeight` | `LengthValue` |  |  |  |
| `headerColumnResizeHandleColor` | `ColorValue` |  |  |  |
| `headerColumnResizeHandleHeight` | `LengthValue` |  |  |  |
| `headerColumnResizeHandleWidth` | `LengthValue` |  |  |  |
| `headerCellBackgroundTransitionDuration` | `DurationValue` |  |  |  |
| `headerCellHoverBackgroundColor` | `ColorValue` |  |  |  |
| `headerCellMovingBackgroundColor` | `ColorValue` |  |  |  |

### Rows

See [Row Styles](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/row-styles/) for more information.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `rowVerticalPaddingScale` | `ScaleValue` |  |  |  |
| `rowBorder` | `BorderValue` |  |  |  |
| `rowHoverColor` | `ColorValue` |  |  |  |
| `rowGroupIndentSize` | `LengthValue` |  |  |  |
| `oddRowBackgroundColor` | `ColorValue` |  |  |  |
| `columnHoverColor` | `ColorValue` |  |  |  |
| `dataBackgroundColor` | `ColorValue` |  |  |  |
| `footerRowBorder` | `BorderValue` |  |  |  |
| `fullRowEditInvalidBackgroundColor` | `ColorValue` |  |  |  |
| `rowBatchEditBackgroundColor` | `ColorValue` |  |  |  |
| `rowBatchEditTextColor` | `ColorValue` |  |  |  |
| `rowLoadingSkeletonEffectColor` | `ColorValue` |  |  |  |
| `valueChangeDeltaDownColor` | `ColorValue` |  |  |  |
| `valueChangeDeltaUpColor` | `ColorValue` |  |  |  |
| `valueChangeValueHighlightBackgroundColor` | `ColorValue` |  |  |  |
| `pinnedRowBackgroundColor` | `ColorValue` |  |  |  |
| `pinnedRowBorder` | `BorderValue` |  |  |  |
| `pinnedRowFontWeight` | `FontWeightValue` |  |  |  |
| `pinnedRowTextColor` | `ColorValue` |  |  |  |
| `pinnedSourceRowBackgroundColor` | `ColorValue` |  |  |  |
| `pinnedSourceRowFontWeight` | `FontWeightValue` |  |  |  |
| `pinnedSourceRowTextColor` | `ColorValue` |  |  |  |

### Cells

See [Cell Styles](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/cell-styles/) for more information.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `dataFontSize` | `LengthValue` |  |  |  |
| `cellFontFamily` | `FontFamilyValue` |  |  |  |
| `cellFontSize` | `LengthValue` |  |  |  |
| `cellFontWeight` | `FontWeightValue` |  |  |  |
| `cellTextColor` | `ColorValue` |  |  |  |
| `cellWidgetSpacing` | `LengthValue` |  |  |  |
| `cellHorizontalPadding` | `LengthValue` |  |  |  |
| `cellHorizontalPaddingScale` | `ScaleValue` |  |  |  |
| `cellEditingBorder` | `BorderValue` |  |  |  |
| `cellEditingShadow` | `ShadowValue` |  |  |  |
| `cellBatchEditBackgroundColor` | `ColorValue` |  |  |  |
| `cellBatchEditTextColor` | `ColorValue` |  |  |  |

### Buttons

See [Customising Inputs & Widgets](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/theming-widgets/) for more information.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `buttonBackgroundColor` | `ColorValue` |  |  |  |
| `buttonTextColor` | `ColorValue` |  |  |  |
| `buttonFontWeight` | `FontWeightValue` |  |  |  |
| `buttonBorder` | `BorderValue` |  |  |  |
| `buttonBorderRadius` | `LengthValue` |  |  |  |
| `buttonHorizontalPadding` | `LengthValue` |  |  |  |
| `buttonVerticalPadding` | `LengthValue` |  |  |  |
| `buttonActiveBackgroundColor` | `ColorValue` |  |  |  |
| `buttonActiveBorder` | `BorderValue` |  |  |  |
| `buttonActiveTextColor` | `ColorValue` |  |  |  |
| `buttonDisabledBackgroundColor` | `ColorValue` |  |  |  |
| `buttonDisabledBorder` | `BorderValue` |  |  |  |
| `buttonDisabledTextColor` | `ColorValue` |  |  |  |
| `buttonHoverBackgroundColor` | `ColorValue` |  |  |  |
| `buttonHoverBorder` | `BorderValue` |  |  |  |
| `buttonHoverTextColor` | `ColorValue` |  |  |  |

### Toggle Buttons

See [Customising Inputs & Widgets](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/theming-widgets/) for more information.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `toggleButtonWidth` | `LengthValue` |  |  |  |
| `toggleButtonHeight` | `LengthValue` |  |  |  |
| `toggleButtonOffBackgroundColor` | `ColorValue` |  |  |  |
| `toggleButtonOnBackgroundColor` | `ColorValue` |  |  |  |
| `toggleButtonSwitchBackgroundColor` | `ColorValue` |  |  |  |
| `toggleButtonSwitchInset` | `LengthValue` |  |  |  |

### Icons

See [Custom Icons](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/custom-icons/) for more information.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `iconColor` | `ColorValue` |  |  |  |
| `iconSize` | `LengthValue` |  |  |  |
| `iconButtonColor` | `ColorValue` |  |  |  |
| `iconButtonBackgroundColor` | `ColorValue` |  |  |  |
| `iconButtonBackgroundSpread` | `LengthValue` |  |  |  |
| `iconButtonBorderRadius` | `LengthValue` |  |  |  |
| `iconButtonActiveColor` | `ColorValue` |  |  |  |
| `iconButtonActiveBackgroundColor` | `ColorValue` |  |  |  |
| `iconButtonActiveIndicatorColor` | `ColorValue` |  |  |  |
| `iconButtonHoverColor` | `ColorValue` |  |  |  |
| `iconButtonHoverBackgroundColor` | `ColorValue` |  |  |  |

### Inputs

See [Customising Inputs & Widgets](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/theming-widgets/) for more information.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `inputBackgroundColor` | `ColorValue` |  |  |  |
| `inputTextColor` | `ColorValue` |  |  |  |
| `inputPlaceholderTextColor` | `ColorValue` |  |  |  |
| `inputBorder` | `BorderValue` |  |  |  |
| `inputBorderRadius` | `LengthValue` |  |  |  |
| `inputHeight` | `LengthValue` |  |  |  |
| `inputPaddingStart` | `LengthValue` |  |  |  |
| `inputIconColor` | `ColorValue` |  |  |  |
| `inputFocusBackgroundColor` | `ColorValue` |  |  |  |
| `inputFocusTextColor` | `ColorValue` |  |  |  |
| `inputFocusBorder` | `BorderValue` |  |  |  |
| `inputFocusShadow` | `ShadowValue` |  |  |  |
| `focusShadow` | `ShadowValue` |  |  |  |
| `focusErrorShadow` | `ShadowValue` |  |  |  |
| `inputDisabledBackgroundColor` | `ColorValue` |  |  |  |
| `inputDisabledTextColor` | `ColorValue` |  |  |  |
| `inputDisabledBorder` | `BorderValue` |  |  |  |
| `inputInvalidBackgroundColor` | `ColorValue` |  |  |  |
| `inputInvalidTextColor` | `ColorValue` |  |  |  |
| `inputInvalidBorder` | `BorderValue` |  |  |  |

### Checkboxes & Radio Buttons

See [Customising Inputs & Widgets](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/theming-widgets/) for more information.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `checkboxBorderRadius` | `LengthValue` |  |  |  |
| `checkboxBorderWidth` | `LengthValue` |  |  |  |
| `checkboxUncheckedBackgroundColor` | `ColorValue` |  |  |  |
| `checkboxUncheckedBorderColor` | `ColorValue` |  |  |  |
| `checkboxCheckedBackgroundColor` | `ColorValue` |  |  |  |
| `checkboxCheckedBorderColor` | `ColorValue` |  |  |  |
| `checkboxCheckedShapeColor` | `ColorValue` |  |  |  |
| `checkboxCheckedShapeImage` | `ImageValue` |  |  |  |
| `checkboxIndeterminateBackgroundColor` | `ColorValue` |  |  |  |
| `checkboxIndeterminateBorderColor` | `ColorValue` |  |  |  |
| `checkboxIndeterminateShapeColor` | `ColorValue` |  |  |  |
| `checkboxIndeterminateShapeImage` | `ImageValue` |  |  |  |
| `radioCheckedShapeImage` | `ImageValue` |  |  |  |

### Pickers & Selects

See [Customising Inputs & Widgets](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/theming-widgets/) for more information.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `pickerButtonBackgroundColor` | `ColorValue` |  |  |  |
| `pickerButtonBorder` | `BorderValue` |  |  |  |
| `pickerButtonBorderRadius` | `LengthValue` |  |  |  |
| `pickerButtonFocusBackgroundColor` | `ColorValue` |  |  |  |
| `pickerButtonFocusBorder` | `BorderValue` |  |  |  |
| `pickerFieldHeight` | `LengthValue` |  |  |  |
| `pickerListBackgroundColor` | `ColorValue` |  |  |  |
| `pickerListBorder` | `BorderValue` |  |  |  |
| `selectCellBackgroundColor` | `ColorValue` |  |  |  |
| `selectCellBorder` | `BorderValue` |  |  |  |

### Menus & Popups

Style menus like the [Context Menu](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/context-menu/) and [Column Menu](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/column-menu/), see also [Theming: Customising Menus & Popups](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/theming-popups/)

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `menuBackgroundColor` | `ColorValue` |  |  |  |
| `menuTextColor` | `ColorValue` |  |  |  |
| `menuBorder` | `BorderValue` |  |  |  |
| `menuSeparatorColor` | `ColorValue` |  |  |  |
| `menuShadow` | `ShadowValue` |  |  |  |
| `cardShadow` | `ShadowValue` |  |  |  |
| `dropdownShadow` | `ShadowValue` |  |  |  |
| `popupShadow` | `ShadowValue` |  |  |  |
| `modalOverlayBackgroundColor` | `ColorValue` |  |  |  |

### Panels & Dialogs

See [Theming: Customising Menus & Popups](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/theming-popups/) for more information.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `panelBackgroundColor` | `ColorValue` |  |  |  |
| `dialogBorder` | `BorderValue` |  |  |  |
| `dialogShadow` | `ShadowValue` |  |  |  |
| `panelTitleBarBackgroundColor` | `ColorValue` |  |  |  |
| `panelTitleBarTextColor` | `ColorValue` |  |  |  |
| `panelTitleBarFontFamily` | `FontFamilyValue` |  |  |  |
| `panelTitleBarFontSize` | `LengthValue` |  |  |  |
| `panelTitleBarFontWeight` | `FontWeightValue` |  |  |  |
| `panelTitleBarHeight` | `LengthValue` |  |  |  |
| `panelTitleBarBorder` | `BorderValue` |  |  |  |
| `panelTitleBarIconColor` | `ColorValue` |  |  |  |
| `columnSelectIndentSize` | `LengthValue` |  |  |  |

### Drag & Drop

Row dragging, column dragging, and data drag & drop

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `rowDragIndicatorColor` | `ColorValue` |  |  |  |
| `rowDragIndicatorWidth` | `LengthValue` |  |  |  |
| `columnDragIndicatorColor` | `ColorValue` |  |  |  |
| `columnDragIndicatorWidth` | `LengthValue` |  |  |  |
| `dragAndDropImageBackgroundColor` | `ColorValue` |  |  |  |
| `dragAndDropImageBorder` | `BorderValue` |  |  |  |
| `dragAndDropImageShadow` | `ShadowValue` |  |  |  |
| `dragAndDropImageNotAllowedBorder` | `BorderValue` |  |  |  |
| `dragHandleColor` | `ColorValue` |  |  |  |

### Tooltips

See [Tooltips](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/tooltips/) for more information.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `tooltipBackgroundColor` | `ColorValue` |  |  |  |
| `tooltipTextColor` | `ColorValue` |  |  |  |
| `tooltipBorder` | `BorderValue` |  |  |  |
| `tooltipErrorBackgroundColor` | `ColorValue` |  |  |  |
| `tooltipErrorTextColor` | `ColorValue` |  |  |  |
| `tooltipErrorBorder` | `BorderValue` |  |  |  |

### Tabs

See [Theming: Customising Tool Panels](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/theming-tool-panels/) for more information.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `tabBarBackgroundColor` | `ColorValue` |  |  |  |
| `tabBarBorder` | `BorderValue` |  |  |  |
| `tabBarHorizontalPadding` | `LengthValue` |  |  |  |
| `tabBarTopPadding` | `LengthValue` |  |  |  |
| `tabBackgroundColor` | `ColorValue` |  |  |  |
| `tabTextColor` | `ColorValue` |  |  |  |
| `tabTopPadding` | `LengthValue` |  |  |  |
| `tabBottomPadding` | `LengthValue` |  |  |  |
| `tabHorizontalPadding` | `LengthValue` |  |  |  |
| `tabSpacing` | `LengthValue` |  |  |  |
| `tabHoverBackgroundColor` | `ColorValue` |  |  |  |
| `tabHoverTextColor` | `ColorValue` |  |  |  |
| `tabSelectedBackgroundColor` | `ColorValue` |  |  |  |
| `tabSelectedTextColor` | `ColorValue` |  |  |  |
| `tabSelectedBorderColor` | `ColorValue` |  |  |  |
| `tabSelectedBorderWidth` | `LengthValue` |  |  |  |
| `tabSelectedUnderlineColor` | `ColorValue` |  |  |  |
| `tabSelectedUnderlineWidth` | `LengthValue` |  |  |  |
| `tabSelectedUnderlineTransitionDuration` | `DurationValue` |  |  |  |

### Sidebar

Style [Tool Panels](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/tool-panel/), see also [Theming: Customising Tool Panels](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/theming-tool-panels/)

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `sideBarBackgroundColor` | `ColorValue` |  |  |  |
| `sidePanelBorder` | `BorderValue` |  |  |  |
| `sideBarPanelWidth` | `LengthValue` |  |  |  |
| `sideBarPanelAnimationDuration` | `DurationValue` |  |  |  |
| `sideButtonBarBackgroundColor` | `ColorValue` |  |  |  |
| `sideButtonBarTopPadding` | `LengthValue` |  |  |  |
| `sideButtonBackgroundColor` | `ColorValue` |  |  |  |
| `sideButtonTextColor` | `ColorValue` |  |  |  |
| `sideButtonBorder` | `BorderValue` |  |  |  |
| `sideButtonLeftPadding` | `LengthValue` |  |  |  |
| `sideButtonRightPadding` | `LengthValue` |  |  |  |
| `sideButtonVerticalPadding` | `LengthValue` |  |  |  |
| `sideButtonHoverBackgroundColor` | `ColorValue` |  |  |  |
| `sideButtonHoverTextColor` | `ColorValue` |  |  |  |
| `sideButtonSelectedBackgroundColor` | `ColorValue` |  |  |  |
| `sideButtonSelectedTextColor` | `ColorValue` |  |  |  |
| `sideButtonSelectedBorder` | `BorderValue` |  |  |  |
| `sideButtonSelectedUnderlineColor` | `ColorValue` |  |  |  |
| `sideButtonSelectedUnderlineWidth` | `LengthValue` |  |  |  |
| `sideButtonSelectedUnderlineTransitionDuration` | `DurationValue` |  |  |  |
| `toolPanelSeparatorBorder` | `BorderValue` |  |  |  |

### Toolbar

See [Quick Access Toolbar](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/toolbar/) for more information.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `toolbarBackgroundColor` | `ColorValue` |  |  |  |
| `toolbarTextColor` | `ColorValue` |  |  |  |
| `toolbarSeparatorBorder` | `BorderValue` |  |  |  |

### Color Picker

The colour picker widget used in [Integrated Charts](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/integrated-charts/)

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `colorPickerTrackSize` | `LengthValue` |  |  |  |
| `colorPickerTrackBorderRadius` | `LengthValue` |  |  |  |
| `colorPickerThumbSize` | `LengthValue` |  |  |  |
| `colorPickerThumbBorderWidth` | `LengthValue` |  |  |  |
| `colorPickerColorBorderRadius` | `LengthValue` |  |  |  |

### Selections

Style [Cell Selection](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/cell-selection/) and [Row Selection](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/row-selection/), see also [Theming: Customising Selections](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/theming-selections/)

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `selectedRowBackgroundColor` | `ColorValue` |  |  |  |
| `rowNumbersSelectedColor` | `ColorValue` |  |  |  |
| `rangeSelectionBackgroundColor` | `ColorValue` |  |  |  |
| `rangeSelectionBorderColor` | `ColorValue` |  |  |  |
| `rangeSelectionBorderStyle` | `BorderStyleValue` |  |  |  |
| `rangeSelectionHighlightColor` | `ColorValue` |  |  |  |
| `rangeHeaderHighlightColor` | `ColorValue` |  |  |  |
| `calculatedColumnHighlightColor` | `ColorValue` |  |  |  |
| `columnHeaderEditHighlightColor` | `ColorValue` |  |  |  |
| `calculatedColumnParentSuggestionColor` | `ColorValue` |  |  |  |
| `calculatedColumnSuggestionListWidth` | `LengthValue` |  |  |  |
| `rangeSelectionChartBackgroundColor` | `ColorValue` |  |  |  |
| `rangeSelectionChartCategoryBackgroundColor` | `ColorValue` |  |  |  |

### Column Drop

The Column drop component is used in the [Columns Tool Panel](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/tool-panel-columns/) and [Row Group Panel](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/grouping-group-panel/).

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `columnDropCellBackgroundColor` | `ColorValue` |  |  |  |
| `columnDropCellTextColor` | `ColorValue` |  |  |  |
| `columnDropCellBorder` | `BorderValue` |  |  |  |
| `columnDropCellDragHandleColor` | `ColorValue` |  |  |  |

### Status Bar

See [Status Bar](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/status-bar/) for more information.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `statusBarLabelColor` | `ColorValue` |  |  |  |
| `statusBarLabelFontWeight` | `FontWeightValue` |  |  |  |
| `statusBarValueColor` | `ColorValue` |  |  |  |
| `statusBarValueFontWeight` | `FontWeightValue` |  |  |  |

### Integrated Charts

See [Integrated Charts](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/integrated-charts/) for more information.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `chartMenuLabelColor` | `ColorValue` |  |  |  |
| `chartMenuPanelWidth` | `LengthValue` |  |  |  |

### Column Panel

See [Columns Tool Panel](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/tool-panel-columns/) for more information.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `columnPanelApplyButtonBackgroundColor` | `ColorValue` |  |  |  |
| `columnPanelApplyButtonColor` | `ColorValue` |  |  |  |

### Filter Panel

See [Filters Tool Panel](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/tool-panel-filters/) for more information.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `filterPanelApplyButtonBackgroundColor` | `ColorValue` |  |  |  |
| `filterPanelApplyButtonColor` | `ColorValue` |  |  |  |
| `filterPanelCardSubtleColor` | `ColorValue` |  |  |  |
| `filterPanelCardSubtleHoverColor` | `ColorValue` |  |  |  |
| `filterToolPanelGroupIndent` | `LengthValue` |  |  |  |
| `setFilterIndentSize` | `LengthValue` |  |  |  |

### Advanced Filter

See [Advanced Filter](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/filter-advanced/) for more information.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `advancedFilterBuilderJoinPillColor` | `ColorValue` |  |  |  |
| `advancedFilterBuilderColumnPillColor` | `ColorValue` |  |  |  |
| `advancedFilterBuilderOptionPillColor` | `ColorValue` |  |  |  |
| `advancedFilterBuilderValuePillColor` | `ColorValue` |  |  |  |
| `advancedFilterBuilderButtonBarBorder` | `BorderValue` |  |  |  |
| `advancedFilterBuilderIndentSize` | `LengthValue` |  |  |  |

### Formulas

See [Formulas](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/formulas/) for more information.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `formulaToken1Color` | `ColorValue` |  |  |  |
| `formulaToken2Color` | `ColorValue` |  |  |  |
| `formulaToken3Color` | `ColorValue` |  |  |  |
| `formulaToken4Color` | `ColorValue` |  |  |  |
| `formulaToken5Color` | `ColorValue` |  |  |  |
| `formulaToken6Color` | `ColorValue` |  |  |  |
| `formulaToken7Color` | `ColorValue` |  |  |  |
| `formulaToken1BackgroundColor` | `ColorValue` |  |  |  |
| `formulaToken2BackgroundColor` | `ColorValue` |  |  |  |
| `formulaToken3BackgroundColor` | `ColorValue` |  |  |  |
| `formulaToken4BackgroundColor` | `ColorValue` |  |  |  |
| `formulaToken5BackgroundColor` | `ColorValue` |  |  |  |
| `formulaToken6BackgroundColor` | `ColorValue` |  |  |  |
| `formulaToken7BackgroundColor` | `ColorValue` |  |  |  |
| `formulaToken1Border` | `BorderValue` |  |  |  |
| `formulaToken2Border` | `BorderValue` |  |  |  |
| `formulaToken3Border` | `BorderValue` |  |  |  |
| `formulaToken4Border` | `BorderValue` |  |  |  |
| `formulaToken5Border` | `BorderValue` |  |  |  |
| `formulaToken6Border` | `BorderValue` |  |  |  |
| `formulaToken7Border` | `BorderValue` |  |  |  |

### Find

See [Find](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/find/) for more information.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `findMatchBackgroundColor` | `ColorValue` |  |  |  |
| `findMatchColor` | `ColorValue` |  |  |  |
| `findActiveMatchBackgroundColor` | `ColorValue` |  |  |  |
| `findActiveMatchColor` | `ColorValue` |  |  |  |

### Notes

See [Notes](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/notes/) for more information.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `noteIndicatorColor` | `ColorValue` |  |  |  |
| `noteIndicatorSize` | `LengthValue` |  |  |  |
| `notePopupBackgroundColor` | `ColorValue` |  |  |  |
| `notePopupTextColor` | `ColorValue` |  |  |  |
| `notePopupInputTextColor` | `ColorValue` |  |  |  |
| `notePopupInputBackgroundColor` | `ColorValue` |  |  |  |
| `notePopupBorder` | `BorderValue` |  |  |  |
| `notePopupPadding` | `LengthValue` |  |  |  |