---
title: "Theme Reference"
framework: angular
version: "2.1.2"
---

# Theme Reference

Implements the `AgStudioThemeParams` interface.

Theme params are split into five types. See [Theming](https://www.ag-grid.com/studio/angular/theming/) for usage details.

### Shared Theme Params - `AgStudioSharedThemeParams`

These may affect the Studio UI, grid widgets, and chart widgets.

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `accentColor` | `ColorValue` |  | The 'brand colour' for Studio, used wherever a non-neutral colour is required. Selections, focus outlines and checkboxes use the accent colour by default. |
| `backgroundColor` | `ColorValue` |  | Background colour of Studio. Many UI elements are semi-transparent, so their colour blends with the background colour. |
| `borderColor` | `ColorValue` |  | Default colour for borders. |
| `borderWidth` | `LengthValue` |  | Default width for borders. |
| `borderRadius` | `LengthValue` |  | Default corner radius for many UI elements such as menus, dialogues and form widgets. |
| `browserColorScheme` | `ColorSchemeValue` |  | The CSS colour-scheme to apply to Studio, which affects the default appearance of browser scrollbars form inputs unless these have been styled with CSS. |
| `cardShadow` | `ShadowValue` |  | Default shadow for elements that float above Studio and are intended to appear elevated byt still attached e.g. dropdowns and cell editors. |
| `chromeBackgroundColor` | `ColorValue` |  | Background colour for non-data areas of Studio. Headers, tool panels and menus use this colour by default. |
| `dialogBorder` | `BorderValue` |  | Border colour popup dialogues such as the integrated charts and the advanced filter builder. |
| `dialogShadow` | `ShadowValue` |  | Shadow for popup dialogues such as the integrated charts and the advanced filter builder. |
| `dragAndDropImageBackgroundColor` | `ColorValue` |  | Background colour of the drag and drop image component element when dragging columns or rows. |
| `dragAndDropImageBorder` | `BorderValue` |  | Border colour of the drag and drop image component element when dragging columns or rows. |
| `dragAndDropImageNotAllowedBorder` | `BorderValue` |  | Border colour of the drag and drop image component element when dragging columns or rows. |
| `dragAndDropImageShadow` | `ShadowValue` |  | Shadow for the drag and drop image component element when dragging columns. |
| `dropdownShadow` | `ShadowValue` |  | Default shadow for dropdown menus. |
| `focusShadow` | `ShadowValue` |  | Shadow around UI controls that have focus e.g. text inputs and buttons. The value must a valid CSS box-shadow. |
| `focusErrorShadow` | `ShadowValue` |  | 'Shadow around UI controls that have focus and contain validation errors e.g. text inputs, text-areas. The value must a valid CSS box-shadow.',. |
| `fontFamily` | `FontFamilyValue` |  | Default font family for all text. Can be overridden by more specific parameters like `headerFontFamily`. |
| `fontSize` | `LengthValue` |  | Default font size for text throughout Studio UI. |
| `fontWeight` | `FontWeightValue` |  | Default font weight for text throughout Studio UI. |
| `foregroundColor` | `ColorValue` |  | Default colour for neutral UI elements. Most text, borders and backgrounds are defined as semi-transparent versions of this colour, resulting in a blend between the background and foreground colours. |
| `headerBackgroundColor` | `ColorValue` |  | Background colour for header and header-like components. |
| `headerFontFamily` | `FontFamilyValue` |  | Font family of text in the header and header-like components. |
| `headerFontSize` | `LengthValue` |  | Size of text in the header and header-like components. |
| `headerFontWeight` | `FontWeightValue` |  | Font weight of text in the header and header-like components. |
| `headerHeight` | `LengthValue` |  | Height of header and header-like components. NOTE: by default this value is calculated to leave enough room for text, icons and padding. Most applications should leave it as is and use headerVerticalPaddingScale to change padding. |
| `headerTextColor` | `ColorValue` |  | Color of text in the header and header-like components. |
| `headerVerticalPaddingScale` | `ScaleValue` |  | Multiply the header vertical padding by a number, e.g. 1.5 to increase by 50%. |
| `iconColor` | `ColorValue` |  | Color for icons, or `inherit` to take on the text colour of the containing component. |
| `iconSize` | `LengthValue` |  | The size of square icons and icon-buttons. |
| `invalidColor` | `ColorValue` |  | The colour for inputs and UI controls in an invalid state. |
| `listItemHeight` | `LengthValue` |  | Height of items in scrolling lists e.g. dropdown select inputs and column menu set filters. |
| `menuBackgroundColor` | `ColorValue` |  | Background colour for menus e.g. column menu and right-click context menu. |
| `menuBorder` | `BorderValue` |  | Border around menus e.g. column menu and right-click context menu. |
| `menuSeparatorColor` | `ColorValue` |  | Color of the dividing line between sections of menus e.g. column menu and right-click context menu. |
| `menuShadow` | `ShadowValue` |  | Shadow for menus e.g. column menu and right-click context menu. |
| `menuTextColor` | `ColorValue` |  | Text colour for menus e.g. column menu and right-click context menu. |
| `pickerFieldHeight` | `LengthValue` |  | Minimum height of picker fields such as select dropdowns and color pickers. Picker fields may be taller than this if they contain larger content. |
| `popupShadow` | `ShadowValue` |  | Default shadow for elements that float above Studio and are intended to appear separated from it e.g. dialogues and menus. |
| `spacing` | `LengthValue` |  | Amount of spacing around and inside UI elements. All padding and margins in Studio are defined as a multiple of this value. |
| `subtleTextColor` | `ColorValue` |  | Color of text and UI elements that should stand out less than the default. |
| `textColor` | `ColorValue` |  | Default colour for all text. |
| `toggleButtonWidth` | `LengthValue` |  | Width of the whole toggle button component. |
| `toggleButtonHeight` | `LengthValue` |  | Height of the whole toggle button component. |
| `toggleButtonOffBackgroundColor` | `ColorValue` |  | Color of the toggle button background in its 'off' state. |
| `toggleButtonOnBackgroundColor` | `ColorValue` |  | Color of the toggle button background in its 'on' state. |
| `toggleButtonSwitchBackgroundColor` | `ColorValue` |  | Background colour of the toggle button switch (the bit that slides from left to right). |
| `toggleButtonSwitchInset` | `LengthValue` |  | The amount that the toggle switch is inset from the edge of the button. |
| `tooltipBackgroundColor` | `ColorValue` |  | Background colour for tooltips. |
| `tooltipErrorBackgroundColor` | `ColorValue` |  | Background colour for tooltips showing errors. |
| `tooltipBorder` | `BorderValue` |  | Border for tooltips. |
| `tooltipErrorBorder` | `BorderValue` |  | Border for tooltips showing errors. |
| `tooltipTextColor` | `ColorValue` |  | Text colour for tooltips. |
| `tooltipErrorTextColor` | `ColorValue` |  | Text colour for tooltips showing errors. |
| `widgetContainerHorizontalPadding` | `LengthValue` |  | The horizontal padding of containers that contain stacked widgets, such as menus and tool panels. |
| `widgetContainerVerticalPadding` | `LengthValue` |  | The vertical padding of containers that contain stacked widgets, such as menus and tool panels. |
| `widgetHorizontalSpacing` | `LengthValue` |  | The spacing between widgets in containers arrange widgets horizontally. |
| `widgetVerticalSpacing` | `LengthValue` |  | The spacing between widgets in containers arrange widgets vertically. |

### Studio Theme Params - `AgStudioCoreThemeParams`

These only affect the Studio UI. Generally prefixed `studio`.

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `lineHeight` | `LengthValue` |  | Line height for Studio UI |
| `headerLineHeight` | `LengthValue` |  | Line height for Studio UI headers |
| `studioFormLabelColor` | `ColorValue` |  | Form label color. |
| `studioFormLabelFontSize` | `LengthValue` |  | Form label font size. |
| `studioFormLabelFontWeight` | `FontWeightValue` |  | Form label font weight. |
| `studioFormLabelLineHeight` | `LengthValue` |  | Form label line height. |
| `studioMinWidth` | `LengthValue` |  | Overall min width. |
| `studioMinHeight` | `LengthValue` |  | Overall min height. |
| `studioDragAndDropImageShadow` | `ShadowValue` |  | Shadow for the drag and drop image component element when dragging columns |
| `studioDragAndDropImageTextColor` | `ColorValue` |  | Text color of the drag and drop image component element when dragging fields |
| `studioDragAndDropImageIconColor` | `ColorValue` |  | Icon color of the drag and drop image component element when dragging fields |
| `studioDragAndDropImageBackgroundColor` | `ColorValue` |  | Background color of the drag and drop image component element when dragging fields |
| `studioDragAndDropImageBorder` | `BorderValue` |  | Border color of the drag and drop image component element when dragging fields |
| `studioDragAndDropImageNotAllowedTextColor` | `ColorValue` |  | Text color of the drag and drop image component element when dragging is not allowed |
| `studioDragAndDropImageNotAllowedIconColor` | `ColorValue` |  | Icon color of the drag and drop image component element when dragging is not allowed |
| `studioDragAndDropImageNotAllowedBackgroundColor` | `ColorValue` |  | Background color of the drag and drop image component element when dragging is not allowed |
| `studioDragAndDropImageNotAllowedBorder` | `BorderValue` |  | Border color of the drag and drop image component element when dragging is not allowed |
| `studioWrapperBorder` | `BorderValue` |  | Border for the wrapper. |
| `studioWrapperBorderRadius` | `LengthValue` |  | Border radius for the wrapper. |
| `studioWrapperBackgroundColor` | `ColorValue` |  | Background color for the wrapper. |
| `studioWrapperSpacing` | `LengthValue` |  | Spacing around the wrapper. |
| `studioPanelContainerBackgroundColor` | `ColorValue` |  | Background color for the panel containers. |
| `studioPanelContainerBorder` | `BorderValue` |  | Border for the panel containers. |
| `studioPanelContainerBorderRadius` | `LengthValue` |  | Border radius for the panel containers. |
| `studioPanelDividerWidth` | `LengthValue` |  | Width of the resize divider for the panels. |
| `studioPanelDividerColor` | `ColorValue` |  | Color of the resize divider for the panels. |
| `studioPanelDividerActiveColor` | `ColorValue` |  | Color of the resize divider for the panels when actively resizing. |
| `studioPanelHeaderHeight` | `LengthValue` |  | Panel header height. |
| `studioPanelWidth` | `LengthValue` |  | Panel width. |
| `studioPanelMinWidth` | `LengthValue` |  | Panel min width. |
| `studioPanelMaxWidth` | `LengthValue` |  | Panel max width. |
| `studioPanelChevronButtonBorderRadius` | `LengthValue` |  | Border radius for the panel chevron buttons. |
| `studioPanelChevronButtonHoverBackgroundColor` | `ColorValue` |  | Hover background color for the panel chevron buttons. |
| `studioPanelChevronButtonHoverColor` | `ColorValue` |  | Hover color for the panel chevron buttons. |
| `studioPanelChevronButtonBackgroundSpread` | `LengthValue` |  | Box shadow spread for the panel chevron buttons. |
| `studioPanelBackgroundColor` | `ColorValue` |  | Panel background color. |
| `studioPanelItemBorderRadius` | `LengthValue` |  | Panel item border radius. |
| `studioPanelTabHeaderBackgroundColor` | `ColorValue` |  | Panel tab header background color. |
| `studioPanelTabHeaderSelectedShadow` | `ShadowValue` |  | Panel selected tab header box shadow. |
| `studioPanelTabHeaderSelectedBackgroundColor` | `ColorValue` |  | Panel selected tab header background color. |
| `studioPanelSectionBorderColor` | `ColorValue` |  | Panel section border color. |
| `studioPanelGroupBackgroundColor` | `ColorValue` |  | Panel group background color. |
| `studioPanelGroupTitleBarBackgroundColor` | `ColorValue` |  | Panel group title bar background color. |
| `studioPanelItemVerticalSpacing` | `LengthValue` |  | Panel item vertical spacing. |
| `studioPanelItemHorizontalSpacing` | `LengthValue` |  | Panel item horizontal spacing. |
| `studioPanelItemCompactWidth` | `LengthValue` |  | Width of compact form items |
| `studioFieldSelectDropPreviewBackgroundColor` | `ColorValue` |  | Panel field select drop preview background color. |
| `studioFieldSelectReplaceBorder` | `BorderValue` |  | Panel field select replace value border. |
| `studioFieldSelectReplaceBackgroundColor` | `ColorValue` |  | Panel field select replace value background color. |
| `studioFiltersPanelWarnBackgroundColor` | `ColorValue` |  | Filters panel warning background color. |
| `studioFiltersPanelCardSubtleColor` | `ColorValue` |  | Filters panel card subtle color. |
| `studioFiltersPanelCardSubtleHoverColor` | `ColorValue` |  | Filters panel card subtle hover color. |
| `studioAiPanelWidth` | `LengthValue` |  | AI panel width. |
| `studioWidgetPadding` | `LengthValue` |  | Widget padding. |
| `studioWidgetBorder` | `BorderValue` |  | Widget border. |
| `studioWidgetBorderRadius` | `LengthValue` |  | Widget border radius. |
| `studioWidgetBackgroundColor` | `ColorValue` |  | Widget background color. |
| `studioWidgetToolbarBackgroundColor` | `ColorValue` |  | Widget toolbar background color. |
| `studioWidgetToolbarBorder` | `BorderValue` |  | Widget toolbar border. |
| `studioWidgetToolbarShadow` | `ShadowValue` |  | Widget toolbar box shadow. |
| `studioWidgetToolbarButtonColor` | `ColorValue` |  | Widget toolbar button color. |
| `studioWidgetToolbarButtonHoverBackgroundColor` | `ColorValue` |  | Widget toolbar button hover background color. |
| `studioWidgetToolbarButtonDisabledBackgroundColor` | `ColorValue` |  | Widget toolbar button disabled background color. |
| `studioWidgetToolbarHeight` | `LengthValue` |  | Widget toolbar height. |
| `studioWidgetResizeBorderColor` | `ColorValue` |  | Widget resize border color. |
| `studioWidgetDraggingOpacityScale` | `ScaleValue` |  | Widget dragging opacity. |
| `studioWidgetSelectIconBackgroundColor` | `ColorValue` |  | Widget select icon background color. |
| `studioWidgetSelectIconBorder` | `BorderValue` |  | Widget select icon border. |
| `studioWidgetTitleFontSize` | `LengthValue` |  | Widget title font size. |
| `studioWidgetTitleFontFamily` | `FontFamilyValue` |  | Widget title font family. |
| `studioWidgetTitleFontWeight` | `FontWeightValue` |  | Widget title font weight. |
| `studioWidgetTitleTextColor` | `ColorValue` |  | Widget title text color. |
| `studioWidgetSubtitleFontSize` | `LengthValue` |  | Widget subtitle font size. |
| `studioWidgetSubtitleFontFamily` | `FontFamilyValue` |  | Widget subtitle font family. |
| `studioWidgetSubtitleFontWeight` | `FontWeightValue` |  | Widget subtitle font weight. |
| `studioWidgetSubtitleTextColor` | `ColorValue` |  | Widget subtitle text color. |
| `studioWidgetCaptionFontSize` | `LengthValue` |  | Widget caption font size. |
| `studioWidgetCaptionFontFamily` | `FontFamilyValue` |  | Widget caption font family. |
| `studioWidgetCaptionFontWeight` | `FontWeightValue` |  | Widget caption font weight. |
| `studioWidgetCaptionTextColor` | `ColorValue` |  | Widget caption text color. |
| `studioWidgetTileHeight` | `LengthValue` |  | Widget tile height. |
| `studioWidgetTileWidth` | `LengthValue` |  | Widget tile width. |
| `studioWidgetIconSize` | `LengthValue` |  | Widget icon size. |
| `studioWidgetLoadingOverlayBackgroundColor` | `ColorValue` |  | Widget loading overlay background color. |
| `studioWidgetLoadingOverlayBorderWidth` | `LengthValue` |  | Widget loading overlay border width. |
| `studioWidgetNoDataOverlayBackgroundColor` | `ColorValue` |  | Widget no data overlay background color. |
| `studioWidgetNoDataOverlayBorderWidth` | `LengthValue` |  | Widget no data overlay border width. |
| `studioCanvasBorder` | `BorderValue` |  | Canvas border. |
| `studioCanvasBorderRadius` | `LengthValue` |  | Canvas border radius. |
| `studioCanvasShadow` | `ShadowValue` |  | Canvas border box shadow. |
| `studioCanvasMinWidth` | `LengthValue` |  | Canvas border min width. |
| `studioCanvasMaxWidth` | `LengthValue` |  | Canvas border max width. |
| `studioCanvasHeight` | `LengthValue` |  | Canvas border height. |
| `studioCanvasColumnsScale` | `ScaleValue` |  | Number of canvas columns. |
| `studioCanvasRowHeight` | `LengthValue` |  | Canvas row height. |
| `studioCanvasPadding` | `LengthValue` |  | Canvas padding. |
| `studioCanvasBackgroundColor` | `ColorValue` |  | Canvas background color. |
| `studioCanvasFontFamily` | `FontFamilyValue` |  | Canvas font family. |
| `studioCanvasGridLineColor` | `ColorValue` |  | Canvas grid line color. |
| `studioCanvasDragPreviewBackgroundColor` | `ColorValue` |  | Canvas drag preview background color. |
| `studioCanvasDragPreviewShadow` | `ShadowValue` |  | Canvas drag preview box shadow. |
| `studioToggleButtonActiveBackgroundColor` | `ColorValue` |  | Toggle button active background color. |
| `studioToggleButtonActiveBorderColor` | `ColorValue` |  | Toggle button active border color. |
| `studioToggleButtonActiveColor` | `ColorValue` |  | Toggle button active color. |
| `studioChartLabelColor` | `ColorValue` |  | Chart label color. |
| `studioValueWidgetFontSize` | `LengthValue` |  | Value widget default font size |
| `studioTextWidgetFontSize` | `LengthValue` |  | Text widget default font size |

### Grid Theme Params - `AgStudioGridThemeParams`

These only affect grid widgets. Prefixed `grid`.

Where a matching shared theme param exists, a grid theme param will generally default to that param variable.

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `gridAccentColor` | `ColorValue` |  | The 'brand colour' for the grid, used wherever a non-neutral colour is required. Selections, focus outlines and checkboxes use the accent colour by default. |
| `gridAutoHeightMinBodyHeight` | `LengthValue` |  | Minimum height of the grid's rows section when using auto-height or print layout. This prevents an empty grid from collapsing to nothing. Set to `0` to remove the minimum height. |
| `gridBackgroundColor` | `ColorValue` |  | Background colour of the grid. Many UI elements are semi-transparent, so their colour blends with the background colour. |
| `gridBorderColor` | `ColorValue` |  | Default colour for borders. |
| `gridBorderWidth` | `LengthValue` |  | Default width for borders. |
| `gridBorderRadius` | `LengthValue` |  | Default corner radius for many UI elements such as menus, dialogues and form widgets. |
| `gridBrowserColorScheme` | `ColorSchemeValue` |  | The CSS colour-scheme to apply to the grid, which affects the default appearance of browser scrollbars form inputs unless these have been styled with CSS. |
| `gridCardShadow` | `ShadowValue` |  | Default shadow for elements that float above the grid and are intended to appear elevated but still attached e.g. dropdowns and cell editors. |
| `gridChromeBackgroundColor` | `ColorValue` |  | Background colour for non-data areas of the grid. Headers, tool panels and menus use this colour by default. |
| `gridDataFontSize` | `LengthValue` |  | Font size for data in grid rows. |
| `gridDialogBorder` | `BorderValue` |  | Border colour popup dialogues such as the integrated charts and the advanced filter builder. |
| `gridDialogShadow` | `ShadowValue` |  | Shadow for popup dialogues such as the integrated charts and the advanced filter builder. |
| `gridDragAndDropImageBackgroundColor` | `ColorValue` |  | Background colour of the drag and drop image component element when dragging columns or rows. |
| `gridDragAndDropImageBorder` | `BorderValue` |  | Border colour of the drag and drop image component element when dragging columns or rows. |
| `gridDragAndDropImageNotAllowedBorder` | `BorderValue` |  | Border colour of the drag and drop image component element when dragging columns or rows. |
| `gridDragAndDropImageShadow` | `ShadowValue` |  | Shadow for the drag and drop image component element when dragging columns. |
| `gridDropdownShadow` | `ShadowValue` |  | Default shadow for dropdown menus. |
| `gridFocusShadow` | `ShadowValue` |  | Shadow around UI controls that have focus e.g. text inputs and buttons. The value must be a valid CSS box-shadow. |
| `gridFocusErrorShadow` | `ShadowValue` |  | Shadow around UI controls that have focus and contain validation errors e.g. text inputs, text-areas. The value must be a valid CSS box-shadow. |
| `gridFontFamily` | `FontFamilyValue` |  | Default font family for all text. Can be overridden by more specific parameters like `headerFontFamily`. |
| `gridFontSize` | `LengthValue` |  | Default font size for text throughout the grid UI. |
| `gridFontWeight` | `FontWeightValue` |  | Default font weight for text throughout the grid UI. |
| `gridForegroundColor` | `ColorValue` |  | Default colour for neutral UI elements. Most text, borders and backgrounds are defined as semi-transparent versions of this colour, resulting in a blend between the background and foreground colours. |
| `gridHeaderBackgroundColor` | `ColorValue` |  | Background colour for header and header-like components. |
| `gridHeaderFontFamily` | `FontFamilyValue` |  | Font family of text in the header and header-like components. |
| `gridHeaderFontSize` | `LengthValue` |  | Size of text in the header and header-like components. |
| `gridHeaderFontWeight` | `FontWeightValue` |  | Font weight of text in the header and header-like components. |
| `gridHeaderHeight` | `LengthValue` |  | Height of header and header-like components. NOTE: by default this value is calculated to leave enough room for text, icons and padding. Most applications should leave it as is and use headerVerticalPaddingScale to change padding. |
| `gridHeaderTextColor` | `ColorValue` |  | Colour of text in the header and header-like components. |
| `gridHeaderVerticalPaddingScale` | `ScaleValue` |  | Multiply the header vertical padding by a number, e.g. 1.5 to increase by 50%. |
| `gridIconColor` | `ColorValue` |  | Colour for icons, or `inherit` to take on the text colour of the containing component. |
| `gridIconSize` | `LengthValue` |  | The size of square icons and icon-buttons. |
| `gridInvalidColor` | `ColorValue` |  | The colour for inputs and UI controls in an invalid state. |
| `gridListItemHeight` | `LengthValue` |  | Height of items in scrolling lists e.g. dropdown select inputs and column menu set filters. |
| `gridMenuBackgroundColor` | `ColorValue` |  | Background colour for menus e.g. column menu and right-click context menu. |
| `gridMenuBorder` | `BorderValue` |  | Border around menus e.g. column menu and right-click context menu. |
| `gridMenuSeparatorColor` | `ColorValue` |  | Colour of the dividing line between sections of menus e.g. column menu and right-click context menu. |
| `gridMenuShadow` | `ShadowValue` |  | Shadow for menus e.g. column menu and right-click context menu. |
| `gridMenuTextColor` | `ColorValue` |  | Text colour for menus e.g. column menu and right-click context menu. |
| `gridPanelBackgroundColor` | `ColorValue` |  | Background colour for panels and dialogues such as the integrated charts and the advanced filter builder. |
| `gridPopupShadow` | `ShadowValue` |  | Default shadow for elements that float above the grid and are intended to appear separated from it e.g. dialogues and menus. |
| `gridSpacing` | `LengthValue` |  | Amount of spacing around and inside UI elements. All padding and margins in the grid are defined as a multiple of this value. |
| `gridSubtleTextColor` | `ColorValue` |  | Colour of text and UI elements that should stand out less than the default. |
| `gridTextColor` | `ColorValue` |  | Default colour for all text. |
| `gridToggleButtonWidth` | `LengthValue` |  | Width of the whole toggle button component. |
| `gridToggleButtonHeight` | `LengthValue` |  | Height of the whole toggle button component. |
| `gridToggleButtonOffBackgroundColor` | `ColorValue` |  | Colour of the toggle button background in its 'off' state. |
| `gridToggleButtonOnBackgroundColor` | `ColorValue` |  | Colour of the toggle button background in its 'on' state. |
| `gridToggleButtonSwitchBackgroundColor` | `ColorValue` |  | Background colour of the toggle button switch (the bit that slides from left to right). |
| `gridToggleButtonSwitchInset` | `LengthValue` |  | The amount that the toggle switch is inset from the edge of the button. |
| `gridTooltipBackgroundColor` | `ColorValue` |  | Background colour for tooltips. |
| `gridTooltipErrorBackgroundColor` | `ColorValue` |  | Background colour for tooltips showing errors. |
| `gridTooltipBorder` | `BorderValue` |  | Border for tooltips. |
| `gridTooltipErrorBorder` | `BorderValue` |  | Border for tooltips showing errors. |
| `gridTooltipTextColor` | `ColorValue` |  | Text colour for tooltips. |
| `gridTooltipErrorTextColor` | `ColorValue` |  | Text colour for tooltips showing errors. |
| `gridWidgetContainerHorizontalPadding` | `LengthValue` |  | The horizontal padding of containers that contain stacked widgets, such as menus and tool panels. |
| `gridWidgetContainerVerticalPadding` | `LengthValue` |  | The vertical padding of containers that contain stacked widgets, such as menus and tool panels. |
| `gridWidgetHorizontalSpacing` | `LengthValue` |  | The spacing between widgets in containers that arrange widgets horizontally. |
| `gridWidgetVerticalSpacing` | `LengthValue` |  | The spacing between widgets in containers that arrange widgets vertically. |
| `gridCellHorizontalPadding` | `LengthValue` |  | Padding at the start and end of grid cells and header cells. |
| `gridCellHorizontalPaddingScale` | `ScaleValue` |  | Multiply the cell horizontal padding by a number, e.g. 1.5 to increase by 50%. |
| `gridCellTextColor` | `ColorValue` |  | Colour of text in grid cells. |
| `gridCellWidgetSpacing` | `LengthValue` |  | Horizontal spacing between widgets inside cells (e.g. row group expand buttons and row selection checkboxes). |
| `gridColumnBorder` | `BorderValue` |  | Vertical borders between columns within the grid only, excluding headers. |
| `gridColumnDropCellBackgroundColor` | `ColorValue` |  | Background colour of the pill shape representing columns in the column drop component. |
| `gridColumnDropCellTextColor` | `ColorValue` |  | Text colour for the pill shape representing columns in the column drop component. |
| `gridColumnDropCellDragHandleColor` | `ColorValue` |  | Colour of the drag grip icon in the pill shape representing columns in the column drop component. |
| `gridColumnDropCellBorder` | `BorderValue` |  | Border for the pill shape representing columns in the column drop component. |
| `gridColumnHoverColor` | `ColorValue` |  | Background colour when hovering over columns in the grid. This is not visible unless enabled in the grid options. |
| `gridColumnSelectIndentSize` | `LengthValue` |  | Amount of indentation for each level of children when selecting grouped columns in the column select widget. |
| `gridCellEditingBorder` | `BorderValue` |  | Border around cells being edited. |
| `gridCellEditingShadow` | `ShadowValue` |  | Shadow for cells being edited. |
| `gridFullRowEditInvalidBackgroundColor` | `ColorValue` |  | Background colour for a row with invalid editor status. |
| `gridDragHandleColor` | `ColorValue` |  | Colour of the drag handle on draggable rows and column markers. |
| `gridFindMatchColor` | `ColorValue` |  | Colour of matches used in Find. |
| `gridFindMatchBackgroundColor` | `ColorValue` |  | Background colour of matches used in Find. |
| `gridFindActiveMatchColor` | `ColorValue` |  | Colour of the active match used in Find. |
| `gridFindActiveMatchBackgroundColor` | `ColorValue` |  | Background colour of the active match used in Find. |
| `gridFooterRowBorder` | `BorderValue` |  | Horizontal borders above footer components like the pagination and status bars. |
| `gridHeaderCellBackgroundTransitionDuration` | `DurationValue` |  | Duration in seconds of the background colour transition if headerCellHoverBackgroundColor or headerCellMovingBackgroundColor is set. |
| `gridHeaderCellHoverBackgroundColor` | `ColorValue` |  | Background colour of a header cell when hovering over it, or `transparent` for no change. |
| `gridHeaderCellMovingBackgroundColor` | `ColorValue` |  | Background colour of a header cell when dragging to reposition it, or `transparent` for no change. |
| `gridHeaderColumnBorder` | `BorderValue` |  | Vertical borders between columns within headers. |
| `gridHeaderColumnBorderHeight` | `LengthValue` |  | Height of the vertical border between column headers. Percentage values are relative to the header height. |
| `gridHeaderColumnResizeHandleColor` | `ColorValue` |  | Colour of the drag handle on resizable header columns. Set this to transparent to hide the resize handle. |
| `gridHeaderColumnResizeHandleHeight` | `LengthValue` |  | Height of the drag handle on resizable header columns. Percentage values are relative to the header height. |
| `gridHeaderColumnResizeHandleWidth` | `LengthValue` |  | Width of the drag handle on resizable header columns. |
| `gridCellFontFamily` | `FontFamilyValue` |  | Font family of text in grid cells. |
| `gridCellFontSize` | `LengthValue` |  | Font size of text in grid cells. |
| `gridCellFontWeight` | `FontWeightValue` |  | Font weight of text in grid cells. |
| `gridHeaderRowBorder` | `BorderValue` |  | Borders between and below header rows. |
| `gridIconButtonColor` | `ColorValue` |  | Default colour for clickable icons. |
| `gridIconButtonBackgroundColor` | `ColorValue` |  | Default background colour for clickable icons. |
| `gridIconButtonBackgroundSpread` | `LengthValue` |  | The distance beyond the border of the clickable icons that the background extends to. |
| `gridIconButtonBorderRadius` | `LengthValue` |  | Corner radius of clickable icon background. |
| `gridIconButtonHoverColor` | `ColorValue` |  | Colour of clickable icons when hovered. |
| `gridIconButtonHoverBackgroundColor` | `ColorValue` |  | Background colour for clickable icons when hovered. |
| `gridIconButtonActiveColor` | `ColorValue` |  | Colour of clickable icon buttons when styled as active. This is used for the column filter button when a filter is applied to the column. |
| `gridIconButtonActiveBackgroundColor` | `ColorValue` |  | Background colour of clickable icon buttons when styled as active. This is used for the column filter button when a filter is applied to the column. |
| `gridIconButtonActiveIndicatorColor` | `ColorValue` |  | Colour of the marker dot shown on icon buttons when styled as active. This is used for the column filter button when a filter is applied to the column. |
| `gridModalOverlayBackgroundColor` | `ColorValue` |  | Background colour of the overlay shown over the grid e.g. a data loading indicator. |
| `gridDataBackgroundColor` | `ColorValue` |  | Background colour applied to grid rows. |
| `gridOddRowBackgroundColor` | `ColorValue` |  | Alternative background colour applied to every other row to create a striped effect. |
| `gridPickerFieldHeight` | `LengthValue` |  | Minimum height of picker fields such as select dropdowns and color pickers. Picker fields may be taller than this if they contain larger content. |
| `gridPinnedColumnBorder` | `BorderValue` |  | Vertical borders between columns that are pinned to the left or right and the rest of the grid. |
| `gridPinnedRowBorder` | `BorderValue` |  | Horizontal borders between the grid and rows that are pinned to the top or bottom and the rest of the grid. |
| `gridPinnedRowFontWeight` | `FontWeightValue` |  | Font-weight for the rows that have been pinned to the top or bottom. |
| `gridPinnedRowBackgroundColor` | `ColorValue` |  | Background colour for the rows that have been pinned to the top or bottom. |
| `gridPinnedRowTextColor` | `ColorValue` |  | Text colour for the rows that have been pinned to the top or bottom. |
| `gridPinnedSourceRowTextColor` | `ColorValue` |  | Text colour for row in the main viewport that has been pinned to the top or bottom. |
| `gridPinnedSourceRowBackgroundColor` | `ColorValue` |  | Background colour for the row in the main viewport that has been pinned to the top or bottom. |
| `gridPinnedSourceRowFontWeight` | `FontWeightValue` |  | Font-weight for the row in the main viewport that has been pinned to the top or bottom. |
| `gridRangeSelectionBackgroundColor` | `ColorValue` |  | Background colour of selected cell ranges. Choosing a semi-transparent colour ensures that multiple overlapping ranges look correct. |
| `gridRangeSelectionBorderColor` | `ColorValue` |  | The colour used for borders around range selections. The selection background defaults to a semi-transparent version of this colour. |
| `gridRangeSelectionBorderStyle` | `BorderStyleValue` |  | Border style around range selections. |
| `gridRangeSelectionChartBackgroundColor` | `ColorValue` |  | Background colour for cells that provide data to the current range chart. |
| `gridRangeSelectionChartCategoryBackgroundColor` | `ColorValue` |  | Background colour for cells that provide categories to the current range chart. |
| `gridRangeSelectionHighlightColor` | `ColorValue` |  | Background colour to briefly apply to a cell range when the user copies from or pastes into it. |
| `gridRangeHeaderHighlightColor` | `ColorValue` |  | Background colour of the grid header when any cell of that header is part of a range. This is not visible unless enabled in the cell selection options. |
| `gridRowDragIndicatorColor` | `ColorValue` |  | Colour of the indicator line used to show where a row will be inserted when dragging to reorder rows. |
| `gridRowDragIndicatorWidth` | `LengthValue` |  | Width of the indicator line used to show where a row will be inserted when dragging to reorder rows. |
| `gridColumnDragIndicatorColor` | `ColorValue` |  | Colour of the indicator line used to show where a row will be inserted when dragging to reorder columns. |
| `gridColumnDragIndicatorWidth` | `LengthValue` |  | Width of the indicator line used to show where a row will be inserted when dragging to reorder columns. |
| `gridRowNumbersSelectedColor` | `ColorValue` |  | Background colour of the Row Numbers cells when the range selects all cells for that row. |
| `gridRowBorder` | `BorderValue` |  | Horizontal borders between rows. |
| `gridRowGroupIndentSize` | `LengthValue` |  | The size of indentation applied to each level of row grouping - deep rows are indented by a multiple of this value. |
| `gridRowHeight` | `LengthValue` |  | Height of grid rows. NOTE: by default this value is calculated to leave enough room for text, icons and padding. Most applications should leave it as is and use rowVerticalPaddingScale to change padding. |
| `gridPaginationPanelHeight` | `LengthValue` |  | Height of the pagination panel at the bottom of the grid. Defaults to the higher of rowHeight or 22px. |
| `gridRowHoverColor` | `ColorValue` |  | Background colour when hovering over rows in the grid and in dropdown menus. Set to `transparent` to disable the hover effect. NOTE: if you want a hover effect on one but not the other, use CSS selectors instead of this property. |
| `gridRowLoadingSkeletonEffectColor` | `ColorValue` |  | Colour of the skeleton loading effect used when loading row data with the Server-side Row Model. |
| `gridRowVerticalPaddingScale` | `ScaleValue` |  | Multiply the row vertical padding by a number, e.g. 1.5 to increase by 50%. Has no effect if rowHeight is set. |
| `gridSelectCellBackgroundColor` | `ColorValue` |  | Background colour for selected items within the multiple select widget. |
| `gridSelectCellBorder` | `BorderValue` |  | Border for selected items within the multiple select widget. |
| `gridSelectedRowBackgroundColor` | `ColorValue` |  | Background colour of selected rows in the grid and in dropdown menus. |
| `gridValueChangeDeltaDownColor` | `ColorValue` |  | Colour to temporarily apply to cell data when its value decreases in an agAnimateShowChangeCellRenderer cell. |
| `gridValueChangeDeltaUpColor` | `ColorValue` |  | Colour to temporarily apply to cell data when its value increases in an agAnimateShowChangeCellRenderer cell. |
| `gridValueChangeValueHighlightBackgroundColor` | `ColorValue` |  | Background colour to apply when a cell value changes and enableCellChangeFlash is enabled. |
| `gridWrapperBackgroundColor` | `ColorValue` |  | Background color of the outermost container around the grid. |
| `gridWrapperBorder` | `BorderValue` |  | Borders around the outside of the grid. |
| `gridWrapperBorderRadius` | `LengthValue` |  | Corner radius of the outermost container around the grid. |

### Chart Theme Params - `AgStudioChartThemeParams`

These only affect chart widgets. Prefixed `chart`.

Where a matching shared theme param exists, a chart theme param will generally default to that param variable.

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `chartPaletteFills1Color` | `ColorValue` |  | Colour 1 used in palette for chart fills. `transparent` if unused. |
| `chartPaletteFills2Color` | `ColorValue` |  | Colour 2 used in palette for chart fills. `transparent` if unused. |
| `chartPaletteFills3Color` | `ColorValue` |  | Colour 3 used in palette for chart fills. `transparent` if unused. |
| `chartPaletteFills4Color` | `ColorValue` |  | Colour 4 used in palette for chart fills. `transparent` if unused. |
| `chartPaletteFills5Color` | `ColorValue` |  | Colour 5 used in palette for chart fills. `transparent` if unused. |
| `chartPaletteFills6Color` | `ColorValue` |  | Colour 6 used in palette for chart fills. `transparent` if unused. |
| `chartPaletteFills7Color` | `ColorValue` |  | Colour 7 used in palette for chart fills. `transparent` if unused. |
| `chartPaletteFills8Color` | `ColorValue` |  | Colour 8 used in palette for chart fills. `transparent` if unused. |
| `chartPaletteFills9Color` | `ColorValue` |  | Colour 9 used in palette for chart fills. `transparent` if unused. |
| `chartPaletteFills10Color` | `ColorValue` |  | Colour 10 used in palette for chart fills. `transparent` if unused. |
| `chartPaletteFills11Color` | `ColorValue` |  | Colour 11 used in palette for chart fills. `transparent` if unused. |
| `chartPaletteFills12Color` | `ColorValue` |  | Colour 12 used in palette for chart fills. `transparent` if unused. |
| `chartPaletteFills13Color` | `ColorValue` |  | Colour 13 used in palette for chart fills. `transparent` if unused. |
| `chartPaletteFills14Color` | `ColorValue` |  | Colour 14 used in palette for chart fills. `transparent` if unused. |
| `chartPaletteFills15Color` | `ColorValue` |  | Colour 15 used in palette for chart fills. `transparent` if unused. |
| `chartPaletteFills16Color` | `ColorValue` |  | Colour 16 used in palette for chart fills. `transparent` if unused. |
| `chartPaletteFills17Color` | `ColorValue` |  | Colour 17 used in palette for chart fills. `transparent` if unused. |
| `chartPaletteFills18Color` | `ColorValue` |  | Colour 18 used in palette for chart fills. `transparent` if unused. |
| `chartPaletteFills19Color` | `ColorValue` |  | Colour 19 used in palette for chart fills. `transparent` if unused. |
| `chartPaletteFills20Color` | `ColorValue` |  | Colour 20 used in palette for chart fills. `transparent` if unused. |
| `chartPaletteStrokes1Color` | `ColorValue` |  | Colour 1 used in palette for chart strokes. `transparent` if unused. |
| `chartPaletteStrokes2Color` | `ColorValue` |  | Colour 2 used in palette for chart strokes. `transparent` if unused. |
| `chartPaletteStrokes3Color` | `ColorValue` |  | Colour 3 used in palette for chart strokes. `transparent` if unused. |
| `chartPaletteStrokes4Color` | `ColorValue` |  | Colour 4 used in palette for chart strokes. `transparent` if unused. |
| `chartPaletteStrokes5Color` | `ColorValue` |  | Colour 5 used in palette for chart strokes. `transparent` if unused. |
| `chartPaletteStrokes6Color` | `ColorValue` |  | Colour 6 used in palette for chart strokes. `transparent` if unused. |
| `chartPaletteStrokes7Color` | `ColorValue` |  | Colour 7 used in palette for chart strokes. `transparent` if unused. |
| `chartPaletteStrokes8Color` | `ColorValue` |  | Colour 8 used in palette for chart strokes. `transparent` if unused. |
| `chartPaletteStrokes9Color` | `ColorValue` |  | Colour 9 used in palette for chart strokes. `transparent` if unused. |
| `chartPaletteStrokes10Color` | `ColorValue` |  | Colour 10 used in palette for chart strokes. `transparent` if unused. |
| `chartPaletteStrokes11Color` | `ColorValue` |  | Colour 11 used in palette for chart strokes. `transparent` if unused. |
| `chartPaletteStrokes12Color` | `ColorValue` |  | Colour 12 used in palette for chart strokes. `transparent` if unused. |
| `chartPaletteStrokes13Color` | `ColorValue` |  | Colour 13 used in palette for chart strokes. `transparent` if unused. |
| `chartPaletteStrokes14Color` | `ColorValue` |  | Colour 14 used in palette for chart strokes. `transparent` if unused. |
| `chartPaletteStrokes15Color` | `ColorValue` |  | Colour 15 used in palette for chart strokes. `transparent` if unused. |
| `chartPaletteStrokes16Color` | `ColorValue` |  | Colour 16 used in palette for chart strokes. `transparent` if unused. |
| `chartPaletteStrokes17Color` | `ColorValue` |  | Colour 17 used in palette for chart strokes. `transparent` if unused. |
| `chartPaletteStrokes18Color` | `ColorValue` |  | Colour 18 used in palette for chart strokes. `transparent` if unused. |
| `chartPaletteStrokes19Color` | `ColorValue` |  | Colour 19 used in palette for chart strokes. `transparent` if unused. |
| `chartPaletteStrokes20Color` | `ColorValue` |  | Colour 20 used in palette for chart strokes. `transparent` if unused. |
| `chartPaletteUpFillColor` | `ColorValue` |  | Up color used in palette for chart fills. |
| `chartPaletteUpStrokeColor` | `ColorValue` |  | Up color used in palette for chart strokes. |
| `chartPaletteDownFillColor` | `ColorValue` |  | Down color used in palette for chart fills. |
| `chartPaletteDownStrokeColor` | `ColorValue` |  | Down color used in palette for chart strokes. |
| `chartPaletteNeutralFillColor` | `ColorValue` |  | Neutral color used in palette for chart fills. |
| `chartPaletteNeutralStrokeColor` | `ColorValue` |  | Neutral color used in palette for chart strokes. |
| `chartAccentColor` | `ColorValue` |  | The 'brand colour' for the chart, used wherever a non-neutral colour is required. Selections, focus outlines and checkboxes use the accent colour by default. |
| `chartBorderColor` | `ColorValue` |  | Default colour for borders. |
| `chartBorderWidth` | `LengthValue` |  | Default width for borders. |
| `chartBorderRadius` | `LengthValue` |  | Default corner radius for many UI elements such as menus and dialogues. |
| `chartButtonBackgroundColor` | `ColorValue` |  | Background colour of standard action buttons. |
| `chartButtonBorder` | `BorderValue` |  | Border around standard action buttons. |
| `chartButtonBorderRadius` | `LengthValue` |  | Corner radius for buttons. |
| `chartButtonFontWeight` | `FontWeightValue` |  | Font weight of standard action buttons. |
| `chartButtonTextColor` | `ColorValue` |  | Text colour of standard action buttons. |
| `chartFocusShadow` | `ShadowValue` |  | Shadow around UI controls that have focus e.g. text inputs and buttons. The value must be a valid CSS box-shadow. |
| `chartForegroundColor` | `ColorValue` |  | Default colour for neutral UI elements. Most text, borders and backgrounds are defined as a blend between the background and foreground colours. |
| `chartFontFamily` | `FontFamilyValue` |  | Font family used for chart text. |
| `chartFontSize` | `LengthValue` |  | Default font size used for chart text. Titles and some other text are scaled to this font size. |
| `chartInputBackgroundColor` | `ColorValue` |  | Background colour for text inputs. Default: `backgroundColor` |
| `chartInputBorder` | `BorderValue` |  | Border around text inputs. |
| `chartInputBorderRadius` | `LengthValue` |  | Corner radius for inputs. |
| `chartInputTextColor` | `ColorValue` |  | Colour of text within text inputs. Default: `textColor` |
| `chartPopupShadow` | `ShadowValue` |  | Default shadow for elements that float above the chart and are intended to appear separated from it, e.g. dialogues and menus. |
| `chartSubtleTextColor` | `ColorValue` |  | Colour of text that should stand out less than the default. Default: `foregroundColor + backgroundColor` |
| `chartTextColor` | `ColorValue` |  | Default colour for chart text. Default: `foregroundColor` |
| `chartTooltipBackgroundColor` | `ColorValue` |  | Background colour for tooltips. |
| `chartTooltipBorder` | `BorderValue` |  | Border around tooltips. |
| `chartTooltipBorderRadius` | `LengthValue` |  | Corner radius for tooltips. |
| `chartTooltipTextColor` | `ColorValue` |  | Text colour for tooltips. |
| `chartTooltipSubtleTextColor` | `ColorValue` |  | Colour of text that should stand out less in tooltips. |
| `chartAxisLineColor` | `ColorValue` |  | Default colour for axis lines and ticks. |
| `chartChartPadding` | `LengthValue` |  | The outer chart padding. |
| `chartChromeBackgroundColor` | `ColorValue` |  | Background colour of tooltips, menus, dialogues, toolbars and buttons. Default: `foregroundColor + backgroundColor` |
| `chartChromeFontFamily` | `FontFamilyValue` |  | Font family used for text in tooltips, menus, dialogues, toolbars, buttons and text inputs. Default: `fontFamily` |
| `chartChromeFontSize` | `LengthValue` |  | Font size used for text in tooltips, menus, dialogues, toolbars, buttons and text inputs. Default: `fontSize` |
| `chartChromeFontWeight` | `FontWeightValue` |  | Font weight used for text in tooltips, menus, dialogues, toolbars, buttons and text inputs. Default: `fontWeight` |
| `chartChromeTextColor` | `ColorValue` |  | Default colour for text in tooltips, menus, dialogues, toolbars, buttons and text inputs. Default: `textColor` |
| `chartChromeSubtleTextColor` | `ColorValue` |  | Colour of text that should stand out less than the default in tooltips, menus, dialogues, toolbars and buttons. Default: `subtleTextColor` |
| `chartCrosshairLabelBackgroundColor` | `ColorValue` |  | Background colour of crosshair labels. Default: `foregroundColor` |
| `chartCrosshairLabelTextColor` | `ColorValue` |  | Colour for text in crosshair labels. Default: `backgroundColor` |
| `chartFontWeight` | `FontWeightValue` |  | Default font weight used for chart text. |
| `chartGridLineColor` | `ColorValue` |  | Default colour for grid lines. |
| `chartGroupedCategoryLineColor` | `ColorValue` |  | Default colour for grouped-category separation lines. |

### Default Theme Params

These params are used for the default Studio theme (`studioTheme`). They are not used if you are creating your own Studio theme via `createStudioTheme()`.

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `buttonTextColor` | `ColorValue` |  | Text color of standard action buttons (e.g. "Reset" and "Apply") |
| `buttonFontWeight` | `FontWeightValue` |  | Font weight of text in standard action buttons (e.g. "Reset" and "Apply") |
| `buttonBackgroundColor` | `ColorValue` |  | Background color of standard action buttons (e.g. "Reset" and "Apply") |
| `buttonBorder` | `BorderValue` |  | Border around standard action buttons (e.g. "Reset" and "Apply") |
| `buttonBorderRadius` | `LengthValue` |  | Corner radius of standard action buttons (e.g. "Reset" and "Apply") |
| `buttonHorizontalPadding` | `LengthValue` |  | Horizontal padding inside standard action buttons (e.g. "Reset" and "Apply") |
| `buttonVerticalPadding` | `LengthValue` |  | Vertical padding inside standard action buttons (e.g. "Reset" and "Apply") |
| `buttonHoverTextColor` | `ColorValue` |  | Text color of standard action buttons (e.g. "Reset" and "Apply") when hovered |
| `buttonHoverBackgroundColor` | `ColorValue` |  | Background color of standard action buttons (e.g. "Reset" and "Apply") when hovered |
| `buttonHoverBorder` | `BorderValue` |  | Border around standard action buttons (e.g. "Reset" and "Apply") when hovered. Only has an effect if a border is enabled with `buttonBorder`. |
| `buttonActiveTextColor` | `ColorValue` |  | Text color of standard action buttons (e.g. "Reset" and "Apply") when being clicked |
| `buttonActiveBackgroundColor` | `ColorValue` |  | Background color of standard action buttons (e.g. "Reset" and "Apply") when being clicked |
| `buttonActiveBorder` | `BorderValue` |  | Border around standard action buttons (e.g. "Reset" and "Apply") when being clicked. Only has an effect if a border is enabled with `buttonBorder`. |
| `buttonDisabledTextColor` | `ColorValue` |  | Text color of standard action buttons (e.g. "Reset" and "Apply") when disabled |
| `buttonDisabledBackgroundColor` | `ColorValue` |  | Background color of standard action buttons (e.g. "Reset" and "Apply") when disabled |
| `buttonDisabledBorder` | `BorderValue` |  | Border around standard action buttons (e.g. "Reset" and "Apply") when disabled. |
| `checkboxBorderRadius` | `LengthValue` |  | Border radius for checkboxes |
| `checkboxBorderWidth` | `LengthValue` |  | Border width for checkboxes |
| `checkboxCheckedBackgroundColor` | `ColorValue` |  | Background color of a checked checkbox |
| `checkboxCheckedBorderColor` | `ColorValue` |  | Border color of a checked checkbox |
| `checkboxCheckedShapeColor` | `ColorValue` |  | The color of the check mark on checked checkboxes. |
| `checkboxCheckedShapeImage` | `ImageValue` |  | An image defining the shape of the check mark on checked checkboxes. |
| `checkboxIndeterminateBackgroundColor` | `ColorValue` |  | Background color of an indeterminate checkbox |
| `checkboxIndeterminateBorderColor` | `ColorValue` |  | Border color of an indeterminate checkbox |
| `checkboxIndeterminateShapeColor` | `ColorValue` |  | The color of the dash mark on indeterminate checkboxes |
| `checkboxIndeterminateShapeImage` | `ImageValue` |  | An image defining the shape of the dash mark on indeterminate checkboxes |
| `checkboxUncheckedBackgroundColor` | `ColorValue` |  | Background color of an unchecked checkbox |
| `checkboxUncheckedBorderColor` | `ColorValue` |  | Border color of an unchecked checkbox |
| `radioCheckedShapeImage` | `ImageValue` |  | An image defining the shape of the mark on checked radio buttons |
| `inputBackgroundColor` | `ColorValue` |  | Background color for text inputs |
| `inputBorder` | `BorderValue` |  | Border around text inputs (or underneath, if using the underlined input style) |
| `inputBorderRadius` | `LengthValue` |  | Corner radius of text inputs |
| `inputDisabledBackgroundColor` | `ColorValue` |  | Background color for disabled text inputs |
| `inputDisabledBorder` | `BorderValue` |  | Border around disabled text inputs (or underneath, if using the underlined input style) |
| `inputDisabledTextColor` | `ColorValue` |  | Color of text within disabled text inputs |
| `inputFocusBackgroundColor` | `ColorValue` |  | Background color for focussed text inputs |
| `inputFocusBorder` | `BorderValue` |  | Border around focussed text inputs (or underneath, if using the underlined input style) |
| `inputFocusShadow` | `ShadowValue` |  | Shadow around focussed text inputs |
| `inputFocusTextColor` | `ColorValue` |  | Color of text within focussed text inputs |
| `inputHeight` | `LengthValue` |  | Minimum height of text inputs |
| `inputInvalidBackgroundColor` | `ColorValue` |  | Background color for text inputs in an invalid state |
| `inputInvalidBorder` | `BorderValue` |  | Border around text inputs in an invalid state (or underneath, if using the underlined input style) |
| `inputInvalidTextColor` | `ColorValue` |  | Color of text within text inputs in an invalid state |
| `inputPaddingStart` | `LengthValue` |  | Padding at the start of text in text inputs |
| `inputTextColor` | `ColorValue` |  | Color of text within text inputs |
| `inputPlaceholderTextColor` | `ColorValue` |  | Color of placeholder text in empty inputs describing the purpose of the input e.g. "Search..." |
| `inputIconColor` | `ColorValue` |  | Color of search icon within search text inputs |
| `pickerButtonBorder` | `BorderValue` |  | Border around buttons with attached dropdown menus (e.g. select fields) |
| `pickerButtonBorderRadius` | `LengthValue` |  | Corner radius of buttons with attached dropdown menus (e.g. select fields) |
| `pickerButtonFocusBorder` | `BorderValue` |  | Border around buttons with attached dropdown menus (e.g. select fields) when focussed |
| `pickerButtonBackgroundColor` | `ColorValue` |  | Background color for buttons with attached dropdown menus (e.g. select fields) |
| `pickerButtonFocusBackgroundColor` | `ColorValue` |  | Background color for buttons with attached dropdown menus (e.g. select fields) when focussed |
| `pickerListBorder` | `BorderValue` |  | Border around dropdown menus attached to buttons (e.g. select fields) |
| `pickerListBackgroundColor` | `ColorValue` |  | Background color for dropdown menus attached to buttons (e.g. select fields) |
| `colorPickerThumbSize` | `LengthValue` |  | Size of thumb (the draggable item) in color picker popup |
| `colorPickerTrackSize` | `LengthValue` |  | Size of track in color picker popup |
| `colorPickerThumbBorderWidth` | `LengthValue` |  | Border width of thumb (the draggable item) in color picker popup |
| `colorPickerTrackBorderRadius` | `LengthValue` |  | Border radius of track in color picker popup |
| `colorPickerColorBorderRadius` | `LengthValue` |  | Border radius of selected/recent colors in color picker |
| `tabBackgroundColor` | `ColorValue` |  | Background color of tabs |
| `tabBarBackgroundColor` | `ColorValue` |  | Background color of the container for tabs |
| `tabBarBorder` | `BorderValue` |  | Border below the container for tabs |
| `tabBarHorizontalPadding` | `LengthValue` |  | Padding at the left and right of the container for tabs |
| `tabBarTopPadding` | `LengthValue` |  | Padding at the top of the container for tabs |
| `tabBottomPadding` | `LengthValue` |  | Padding at the bottom of the container for tabs |
| `tabHorizontalPadding` | `LengthValue` |  | Padding inside the top and bottom sides of the container for tabs |
| `tabHoverBackgroundColor` | `ColorValue` |  | Background color of tabs when hovered over |
| `tabHoverTextColor` | `ColorValue` |  | Color of text within tabs when hovered over |
| `tabSelectedBackgroundColor` | `ColorValue` |  | Background color of selected tabs |
| `tabSelectedBorderColor` | `ColorValue` |  | Color of the border around selected tabs |
| `tabSelectedBorderWidth` | `LengthValue` |  | Width of the border around selected tabs |
| `tabSelectedTextColor` | `ColorValue` |  | Color of text within the selected tabs |
| `tabSelectedUnderlineColor` | `ColorValue` |  | Color of line drawn under selected tabs |
| `tabSelectedUnderlineTransitionDuration` | `DurationValue` |  | Duration in seconds of the fade in/out transition for the line drawn under selected tabs |
| `tabSelectedUnderlineWidth` | `LengthValue` |  | Width of line drawn under selected tabs |
| `tabSpacing` | `LengthValue` |  | Spacing between tabs |
| `tabTextColor` | `ColorValue` |  | Color of text within tabs |
| `tabTopPadding` | `LengthValue` |  | Padding at the top of the container for tabs |