---
product: "AG Studio"
title: "Theme Reference"
description: "Implements the AgStudioThemeParams interface."
framework: javascript
version: "3.0.0"
related:
    - title: "Overview"
      url: "https://www.ag-grid.com/studio/archive/3.0.0/javascript/studio-interface/"
    - title: "Properties Reference"
      url: "https://www.ag-grid.com/studio/archive/3.0.0/javascript/studio-properties/"
    - title: "Events Reference"
      url: "https://www.ag-grid.com/studio/archive/3.0.0/javascript/studio-events/"
    - title: "API Reference"
      url: "https://www.ag-grid.com/studio/archive/3.0.0/javascript/studio-api/"
    - title: "State Reference"
      url: "https://www.ag-grid.com/studio/archive/3.0.0/javascript/studio-state/"
    - title: "Studio Lifecycle"
      url: "https://www.ag-grid.com/studio/archive/3.0.0/javascript/studio-lifecycle/"
    - title: "Registry Type"
      url: "https://www.ag-grid.com/studio/archive/3.0.0/javascript/registry-type/"
llms: "https://www.ag-grid.com/studio/archive/3.0.0/llms.txt"
---

# Theme Reference

Implements the `AgStudioThemeParams` interface.

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

### Shared Theme Params - `AgStudioSharedThemeParams`

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

| 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 |
| `tabSelectedShadow` | `ShadowValue` |  | Shadow for the selected tabs |
| `tabBorderRadius` | `LengthValue` |  | Border radius for tabs |
| `tabBarBottomPadding` | `LengthValue` |  | Padding at the bottom of the container for tabs |
| `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 most borders. The borders for some features are set separately. |
| `borderWidth` | `LengthValue` |  | Default width for most borders. The border widths for some features are set separately. |
| `borderRadius` | `LengthValue` |  | Default corner radius for most UI elements where this is applicable such as menus, dialogues and form items. The corner radii for some features are set separately. |
| `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. |
| `dialogBorder` | `BorderValue` |  | Border colour for popup dialogues such as the colour picker input. |
| `dialogShadow` | `ShadowValue` |  | Shadow for popup dialogues such as the colour picker input. |
| `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. |
| `fontFamily` | `FontFamilyValue` |  | Default font family for most text. The font families for some features are set separately. |
| `fontSize` | `LengthValue` |  | Default font size for most text throughout the Studio UI. The font sizes for some features are set separately. |
| `fontWeight` | `FontWeightValue` |  | Default font weight for most text throughout the Studio UI. The font weights for some features are set separately. |
| `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. |
| `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 most items in scrolling lists, e.g. dropdown select inputs and selection filters. Does not impact field or widget selection inputs. |
| `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. |
| `rowHoverColor` | `ColorValue` |  | Background colour when hovering over rows in dropdown menus. Set to `transparent` to disable the hover effect. |
| `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 most text. The text colours for some features are set separately. |
| `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. |
| `tooltipBorder` | `BorderValue` |  | Border for tooltips. |
| `tooltipTextColor` | `ColorValue` |  | Text colour for tooltips. |
| `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 |
| `tabSpacing` | `LengthValue` |  | Spacing between tabs |
| `tabTextColor` | `ColorValue` |  | Color of text within tabs |
| `tabTopPadding` | `LengthValue` |  | Padding at the top of the container for tabs |

### Studio Theme Params - `AgStudioCoreThemeParams`

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

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `lineHeight` | `LengthValue` |  | Line height for Studio UI |
| `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. This does not apply to each container's canvas-facing edge (the right edge of the left panel and the left edge of the right panel), which is the panel divider (studioPanelDividerColor/studioPanelDividerWidth). |
| `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. |
| `studioPanelHeaderFontFamily` | `FontFamilyValue` |  | Panel header font family. |
| `studioPanelHeaderFontSize` | `LengthValue` |  | Panel header font size. |
| `studioPanelHeaderFontWeight` | `FontWeightValue` |  | Panel header font weight. |
| `studioPanelHeaderLineHeight` | `LengthValue` |  | Panel header line 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. |
| `studioPanelItemBorderRadius` | `LengthValue` |  | Panel item border radius. |
| `studioPanelSectionBorderColor` | `ColorValue` |  | Panel section border color. |
| `studioPanelGroupBackgroundColor` | `ColorValue` |  | Panel group background color. |
| `studioPanelGroupTitleBarTextColor` | `ColorValue` |  | Panel group title bar text 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. |
| `studioFieldSelectSelectedBackgroundColor` | `ColorValue` |  | Panel field select selected item background color. |
| `studioFiltersPanelItemVerticalSpacing` | `LengthValue` |  | Filters panel item vertical spacing. |
| `studioFiltersPanelItemHorizontalSpacing` | `LengthValue` |  | Filters panel item horizontal spacing. |
| `studioFiltersPanelContainerVerticalPadding` | `LengthValue` |  | Filters panel container vertical padding. |
| `studioFiltersPanelContainerHorizontalPadding` | `LengthValue` |  | Filters panel container horizontal padding. |
| `studioFiltersPanelWarnBackgroundColor` | `ColorValue` |  | Filters panel warning background color. |
| `studioFiltersPanelCardSubtleColor` | `ColorValue` |  | Filters panel card subtle color. |
| `studioFiltersPanelCardIconSubtleHoverColor` | `ColorValue` |  | Filters panel card icon subtle hover color. |
| `studioAiPanelWidth` | `LengthValue` |  | AI panel width. |
| `studioAiPanelButtonHoverBackgroundColor` | `ColorValue` |  | AI panel delete thread and delegate button hover background color. |
| `studioAiPanelRichTextAccentBackgroundColor` | `ColorValue` |  | AI panel rich text header and hover background color. |
| `studioAiPanelInputMessageBackgroundColor` | `ColorValue` |  | AI panel input message background color. |
| `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. |
| `studioWidgetSelectionItemBackgroundColor` | `ColorValue` |  | Widget selection item background color. |
| `studioWidgetSelectionItemBorder` | `BorderValue` |  | Widget selection item 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. |
| `studioWidgetSelectionItemHeight` | `LengthValue` |  | Widget selection item height. |
| `studioWidgetSelectionItemWidth` | `LengthValue` |  | Widget selection item 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 min width. |
| `studioCanvasMaxWidth` | `LengthValue` |  | Canvas max width. |
| `studioCanvasHeight` | `LengthValue` |  | Canvas 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. |
| `studioLinearGaugeLabelColor` | `ColorValue` |  | Linear gauge label color. |
| `studioValueWidgetFontSize` | `LengthValue` |  | Value widget default font size |
| `studioTextWidgetFontSize` | `LengthValue` |  | Text widget default font size |
| `studioSyntaxBracketLevel1Color` | `ColorValue` |  | Expression syntax highlighting: colour for bracket nesting level 1. |
| `studioSyntaxBracketLevel2Color` | `ColorValue` |  | Expression syntax highlighting: colour for bracket nesting level 2. |
| `studioSyntaxBracketLevel3Color` | `ColorValue` |  | Expression syntax highlighting: colour for bracket nesting level 3. |
| `studioSyntaxBracketLevel4Color` | `ColorValue` |  | Expression syntax highlighting: colour for bracket nesting level 4. |
| `studioSyntaxBracketLevel5Color` | `ColorValue` |  | Expression syntax highlighting: colour for bracket nesting level 5. |
| `studioSyntaxBracketLevel6Color` | `ColorValue` |  | Expression syntax highlighting: colour for bracket nesting level 6. |
| `studioSyntaxBracketLevel7Color` | `ColorValue` |  | Expression syntax highlighting: colour for bracket nesting level 7. |
| `studioSyntaxBracketLevel8Color` | `ColorValue` |  | Expression syntax highlighting: colour for bracket nesting level 8. |
| `studioSyntaxBracketLevel9Color` | `ColorValue` |  | Expression syntax highlighting: colour for bracket nesting level 9. |
| `studioSyntaxBracketLevel10Color` | `ColorValue` |  | Expression syntax highlighting: colour for bracket nesting level 10. |
| `studioSyntaxCommentColor` | `ColorValue` |  | Expression syntax highlighting: comment token colour. |
| `studioSyntaxIdentifierColor` | `ColorValue` |  | Expression syntax highlighting: identifier token colour. |
| `studioSyntaxFunctionColor` | `ColorValue` |  | Expression syntax highlighting: function token colour. |
| `studioSyntaxStringColor` | `ColorValue` |  | Expression syntax highlighting: string token colour. |
| `studioSyntaxNumberColor` | `ColorValue` |  | Expression syntax highlighting: number token colour. |
| `studioSyntaxBooleanColor` | `ColorValue` |  | Expression syntax highlighting: boolean token colour. |
| `studioSyntaxFieldColor` | `ColorValue` |  | Expression syntax highlighting: field token colour. |
| `studioSyntaxColumnColor` | `ColorValue` |  | Expression syntax highlighting: column token colour. |
| `studioSyntaxUnknownColor` | `ColorValue` |  | Expression syntax highlighting: unknown token text colour. |
| `studioSyntaxUnknownBackgroundColor` | `ColorValue` |  | Expression syntax highlighting: unknown token background colour. |
| `studioSyntaxUnknownShadow` | `ShadowValue` |  | Expression syntax highlighting: unknown token border shadow. |
| `studioSyntaxHighlightedShadow` | `ShadowValue` |  | Expression syntax highlighting: highlighted token border shadow. |
| `studioSyntaxErrorTextDecorationColor` | `ColorValue` |  | Expression syntax highlighting: error token text decoration colour. |
| `studioExpressionInputErrorBorder` | `BorderValue` |  | Expression input error container border. |
| `studioExpressionInputErrorBackgroundColor` | `ColorValue` |  | Expression input error container background color. |
| `studioFieldDeletedBackgroundColor` | `ColorValue` |  | The background colour of a widget field that has been deleted. This is used to indicate that the field is no longer valid, for example when a column has been removed from the grid. |
| `studioFieldDeletedBorderColor` | `ColorValue` |  | The border colour of a widget field that has been deleted. This is used to indicate that the field is no longer valid, for example when a column has been removed from the grid. |
| `studioSearchInputHeight` | `LengthValue` |  | Search input heights |

### 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. |
| `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. |
| `gridDataFontSize` | `LengthValue` |  | Font size for data in grid rows. |
| `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 in grid cells. |
| `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. |
| `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. |
| `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. |
| `gridCellHorizontalPadding` | `LengthValue` |  | Padding at the start and end of grid cells and header cells. |
| `gridCellTextColor` | `ColorValue` |  | Colour of text in grid cells. |
| `gridColumnBorder` | `BorderValue` |  | Vertical borders between columns within the grid only, excluding headers. |
| `gridHeaderColumnBorderHeight` | `LengthValue` |  | Height of the vertical border between column headers. Percentage values are relative to the header height. |
| `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. |
| `gridDataBackgroundColor` | `ColorValue` |  | Background colour applied to grid rows. |
| `gridOddRowBackgroundColor` | `ColorValue` |  | Alternative background colour applied to every other row to create a striped effect. |
| `gridPinnedRowBorder` | `BorderValue` |  | Horizontal borders between the grid and rows that are pinned to the top or bottom and the rest of the grid. |
| `gridRowBorder` | `BorderValue` |  | Horizontal borders between rows. |
| `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. |
| `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. |
| `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. |
| `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. |
| `chartButtonBackgroundColor` | `ColorValue` |  | Background colour of standard action buttons. |
| `chartButtonBorder` | `BorderValue` |  | Border around standard action buttons. |
| `chartButtonBorderRadius` | `LengthValue` |  | Corner radius for 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. |
| `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. |
| `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. |
| `chartAxisLineColor` | `ColorValue` |  | Default colour for axis lines and ticks. |
| `chartChartPadding` | `LengthValue` |  | The outer chart padding. |
| `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. |