Implements the AgStudioThemeParams interface.
Theme params are split into four types. See Theming for usage details.
Shared Theme Params Copy Link
These may affect the Studio UI, grid widgets, and chart widgets.
The 'brand colour' for Studio, used wherever a non-neutral colour is required. Selections, focus outlines and checkboxes use the accent colour by default.
|
Background colour of Studio. Many UI elements are semi-transparent, so their colour blends with the background colour.
|
Default colour for borders.
|
Default width for borders.
|
Default corner radius for many UI elements such as menus, dialogues and form widgets.
|
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.
|
Default shadow for elements that float above Studio and are intended to appear elevated byt still attached e.g. dropdowns and cell editors.
|
Background colour for non-data areas of Studio. Headers, tool panels and menus use this colour by default.
|
Border colour popup dialogues such as the integrated charts and the advanced filter builder.
|
Shadow for popup dialogues such as the integrated charts and the advanced filter builder.
|
Background colour of the drag and drop image component element when dragging columns or rows.
|
Border colour of the drag and drop image component element when dragging columns or rows.
|
Border colour of the drag and drop image component element when dragging columns or rows.
|
Shadow for the drag and drop image component element when dragging columns.
|
Default shadow for dropdown menus.
|
Shadow around UI controls that have focus e.g. text inputs and buttons. The value must a valid CSS box-shadow.
|
'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.',.
|
Default font family for all text. Can be overridden by more specific parameters like headerFontFamily.
|
Default font size for text throughout Studio UI.
|
Default font weight for text throughout Studio UI.
|
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.
|
Background colour for header and header-like components.
|
Font family of text in the header and header-like components.
|
Size of text in the header and header-like components.
|
Font weight of text in the header and header-like components.
|
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.
|
Color of text in the header and header-like components.
|
Multiply the header vertical padding by a number, e.g. 1.5 to increase by 50%.
|
Color for icons, or inherit to take on the text colour of the containing component.
|
The size of square icons and icon-buttons.
|
The colour for inputs and UI controls in an invalid state.
|
Height of items in scrolling lists e.g. dropdown select inputs and column menu set filters.
|
Background colour for menus e.g. column menu and right-click context menu.
|
Border around menus e.g. column menu and right-click context menu.
|
Color of the dividing line between sections of menus e.g. column menu and right-click context menu.
|
Shadow for menus e.g. column menu and right-click context menu.
|
Text colour for menus e.g. column menu and right-click context menu.
|
Default shadow for elements that float above Studio and are intended to appear separated from it e.g. dialogues and menus.
|
Amount of spacing around and inside UI elements. All padding and margins in Studio are defined as a multiple of this value.
|
Color of text and UI elements that should stand out less than the default.
|
Default colour for all text.
|
Width of the whole toggle button component.
|
Height of the whole toggle button component.
|
Color of the toggle button background in its 'off' state.
|
Color of the toggle button background in its 'on' state.
|
Background colour of the toggle button switch (the bit that slides from left to right).
|
The amount that the toggle switch is inset from the edge of the button.
|
Background colour for tooltips.
|
Background colour for tooltips showing errors.
|
Border for tooltips.
|
Border for tooltips showing errors.
|
Text colour for tooltips.
|
Text colour for tooltips showing errors.
|
The horizontal padding of containers that contain stacked widgets, such as menus and tool panels.
|
The vertical padding of containers that contain stacked widgets, such as menus and tool panels.
|
The spacing between widgets in containers arrange widgets horizontally.
|
The spacing between widgets in containers arrange widgets vertically.
|
Studio Theme Params Copy Link
These only affect the Studio UI. Prefixed studio.
Line height for Studio UI |
Line height for Studio UI headers |
Form label color. |
Form label font size. |
Form label font weight. |
Form label line height. |
Overall min width. |
Overall min height. |
Shadow for the drag and drop image component element when dragging columns |
Text color of the drag and drop image component element when dragging fields |
Icon color of the drag and drop image component element when dragging fields |
Background color of the drag and drop image component element when dragging fields |
Border color of the drag and drop image component element when dragging fields |
Text color of the drag and drop image component element when dragging is not allowed |
Icon color of the drag and drop image component element when dragging is not allowed |
Background color of the drag and drop image component element when dragging is not allowed |
Border color of the drag and drop image component element when dragging is not allowed |
Border for the wrapper. |
Border radius for the wrapper. |
Background color for the wrapper. |
Spacing around the wrapper. |
Background color for the panel containers. |
Border for the panel containers. |
Border radius for the panel containers. |
Width of the resize divider for the panels. |
Color of the resize divider for the panels. |
Color of the resize divider for the panels when actively resizing. |
Panel header height. |
Panel width. |
Panel min width. |
Panel max width. |
Border radius for the panel chevron buttons. |
Hover background color for the panel chevron buttons. |
Hover color for the panel chevron buttons. |
Box shadow spread for the panel chevron buttons. |
Panel background color. |
Panel item border radius. |
Panel tab header background color. |
Panel selected tab header box shadow. |
Panel selected tab header background color. |
Panel section border color. |
Panel group background color. |
Panel group title bar background color. |
Panel item vertical spacing. |
Panel item horizontal spacing. |
Panel field select drop preview background color. |
Panel field select replace value border. |
Panel field select replace value background color. |
Filters panel warning background color. |
AI panel width. |
Widget padding. |
Widget border. |
Widget border radius. |
Widget background color. |
Widget toolbar background color. |
Widget toolbar border. |
Widget toolbar box shadow. |
Widget toolbar button color. |
Widget toolbar button hover background color. |
Widget toolbar button disabled background color. |
Widget toolbar height. |
Widget resize border color. |
Widget dragging opacity. |
Widget select icon background color. |
Widget select icon border. |
Widget title font size. |
Widget title font family. |
Widget title font weight. |
Widget title text color. |
Widget subtitle font size. |
Widget subtitle font family. |
Widget subtitle font weight. |
Widget subtitle text color. |
Widget caption font size. |
Widget caption font family. |
Widget caption font weight. |
Widget caption text color. |
Canvas border. |
Canvas border radius. |
Canvas border box shadow. |
Canvas border min width. |
Canvas border max width. |
Canvas border height. |
Number of canvas columns. |
Canvas row height. |
Canvas padding. |
Canvas background color. |
Canvas font family. |
Canvas grid line color. |
Canvas drag preview background color. |
Canvas drag preview box shadow. |
Toggle button active background color. |
Toggle button active border color. |
Toggle button active color. |
Chart label color. |
Grid Theme Params Copy Link
These only affect grid widgets. Prefixed grid.
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.
|
Background colour of the grid. Many UI elements are semi-transparent, so their colour blends with the background colour.
|
Default colour for borders.
|
Default width for borders.
|
Default corner radius for many UI elements such as menus, dialogues and form widgets.
|
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.
|
Default shadow for elements that float above the grid and are intended to appear elevated but still attached e.g. dropdowns and cell editors.
|
Background colour for non-data areas of the grid. Headers, tool panels and menus use this colour by default.
|
Font size for data in grid rows.
|
Border colour popup dialogues such as the integrated charts and the advanced filter builder.
|
Shadow for popup dialogues such as the integrated charts and the advanced filter builder.
|
Background colour of the drag and drop image component element when dragging columns or rows.
|
Border colour of the drag and drop image component element when dragging columns or rows.
|
Border colour of the drag and drop image component element when dragging columns or rows.
|
Shadow for the drag and drop image component element when dragging columns.
|
Default shadow for dropdown menus.
|
Shadow around UI controls that have focus e.g. text inputs and buttons. The value must be a valid CSS box-shadow.
|
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.
|
Default font family for all text. Can be overridden by more specific parameters like headerFontFamily.
|
Default font size for text throughout the grid UI.
|
Default font weight for text throughout the grid UI.
|
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.
|
Background colour for header and header-like components.
|
Font family of text in the header and header-like components.
|
Size of text in the header and header-like components.
|
Font weight of text in the header and header-like components.
|
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.
|
Colour of text in the header and header-like components.
|
Multiply the header vertical padding by a number, e.g. 1.5 to increase by 50%.
|
Colour for icons, or inherit to take on the text colour of the containing component.
|
The size of square icons and icon-buttons.
|
The colour for inputs and UI controls in an invalid state.
|
Height of items in scrolling lists e.g. dropdown select inputs and column menu set filters.
|
Background colour for menus e.g. column menu and right-click context menu.
|
Border around menus e.g. column menu and right-click context menu.
|
Colour of the dividing line between sections of menus e.g. column menu and right-click context menu.
|
Shadow for menus e.g. column menu and right-click context menu.
|
Text colour for menus e.g. column menu and right-click context menu.
|
Background colour for panels and dialogues such as the integrated charts and the advanced filter builder.
|
Default shadow for elements that float above the grid and are intended to appear separated from it e.g. dialogues and menus.
|
Amount of spacing around and inside UI elements. All padding and margins in the grid are defined as a multiple of this value.
|
Colour of text and UI elements that should stand out less than the default.
|
Default colour for all text.
|
Width of the whole toggle button component.
|
Height of the whole toggle button component.
|
Colour of the toggle button background in its 'off' state.
|
Colour of the toggle button background in its 'on' state.
|
Background colour of the toggle button switch (the bit that slides from left to right).
|
The amount that the toggle switch is inset from the edge of the button.
|
Background colour for tooltips.
|
Background colour for tooltips showing errors.
|
Border for tooltips.
|
Border for tooltips showing errors.
|
Text colour for tooltips.
|
Text colour for tooltips showing errors.
|
The horizontal padding of containers that contain stacked widgets, such as menus and tool panels.
|
The vertical padding of containers that contain stacked widgets, such as menus and tool panels.
|
The spacing between widgets in containers that arrange widgets horizontally.
|
The spacing between widgets in containers that arrange widgets vertically.
|
Padding at the start and end of grid cells and header cells.
|
Multiply the cell horizontal padding by a number, e.g. 1.5 to increase by 50%.
|
Colour of text in grid cells.
|
Horizontal spacing between widgets inside cells (e.g. row group expand buttons and row selection checkboxes).
|
Vertical borders between columns within the grid only, excluding headers.
|
Background colour of the pill shape representing columns in the column drop component.
|
Text colour for the pill shape representing columns in the column drop component.
|
Colour of the drag grip icon in the pill shape representing columns in the column drop component.
|
Border for the pill shape representing columns in the column drop component.
|
Background colour when hovering over columns in the grid. This is not visible unless enabled in the grid options.
|
Amount of indentation for each level of children when selecting grouped columns in the column select widget.
|
Border around cells being edited.
|
Shadow for cells being edited.
|
Background colour for a row with invalid editor status.
|
Colour of the drag handle on draggable rows and column markers.
|
Colour of matches used in Find.
|
Background colour of matches used in Find.
|
Colour of the active match used in Find.
|
Background colour of the active match used in Find.
|
Horizontal borders above footer components like the pagination and status bars.
|
Duration in seconds of the background colour transition if headerCellHoverBackgroundColor or headerCellMovingBackgroundColor is set.
|
Background colour of a header cell when hovering over it, or transparent for no change.
|
Background colour of a header cell when dragging to reposition it, or transparent for no change.
|
Vertical borders between columns within headers.
|
Height of the vertical border between column headers. Percentage values are relative to the header height.
|
Colour of the drag handle on resizable header columns. Set this to transparent to hide the resize handle.
|
Height of the drag handle on resizable header columns. Percentage values are relative to the header height.
|
Width of the drag handle on resizable header columns.
|
Font family of text in grid cells.
|
Font size of text in grid cells.
|
Font weight of text in grid cells.
|
Borders between and below header rows.
|
Default colour for clickable icons.
|
Default background colour for clickable icons.
|
The distance beyond the border of the clickable icons that the background extends to.
|
Corner radius of clickable icon background.
|
Colour of clickable icons when hovered.
|
Background colour for clickable icons when hovered.
|
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.
|
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.
|
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.
|
Background colour of the overlay shown over the grid e.g. a data loading indicator.
|
Background colour applied to grid rows.
|
Alternative background colour applied to every other row to create a striped effect.
|
Vertical borders between columns that are pinned to the left or right and the rest of the grid.
|
Horizontal borders between the grid and rows that are pinned to the top or bottom and the rest of the grid.
|
Font-weight for the rows that have been pinned to the top or bottom.
|
Background colour for the rows that have been pinned to the top or bottom.
|
Text colour for the rows that have been pinned to the top or bottom.
|
Text colour for row in the main viewport that has been pinned to the top or bottom.
|
Background colour for the row in the main viewport that has been pinned to the top or bottom.
|
Font-weight for the row in the main viewport that has been pinned to the top or bottom.
|
Background colour of selected cell ranges. Choosing a semi-transparent colour ensures that multiple overlapping ranges look correct.
|
The colour used for borders around range selections. The selection background defaults to a semi-transparent version of this colour.
|
Border style around range selections.
|
Background colour for cells that provide data to the current range chart.
|
Background colour for cells that provide categories to the current range chart.
|
Background colour to briefly apply to a cell range when the user copies from or pastes into it.
|
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.
|
Colour of the indicator line used to show where a row will be inserted when dragging to reorder rows.
|
Width of the indicator line used to show where a row will be inserted when dragging to reorder rows.
|
Colour of the indicator line used to show where a row will be inserted when dragging to reorder columns.
|
Width of the indicator line used to show where a row will be inserted when dragging to reorder columns.
|
Background colour of the Row Numbers cells when the range selects all cells for that row.
|
Horizontal borders between rows.
|
The size of indentation applied to each level of row grouping - deep rows are indented by a multiple of this value.
|
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.
|
Height of the pagination panel at the bottom of the grid. Defaults to the higher of rowHeight or 22px.
|
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.
|
Colour of the skeleton loading effect used when loading row data with the Server-side Row Model.
|
Multiply the row vertical padding by a number, e.g. 1.5 to increase by 50%. Has no effect if rowHeight is set.
|
Background colour for selected items within the multiple select widget.
|
Border for selected items within the multiple select widget.
|
Background colour of selected rows in the grid and in dropdown menus.
|
Colour to temporarily apply to cell data when its value decreases in an agAnimateShowChangeCellRenderer cell.
|
Colour to temporarily apply to cell data when its value increases in an agAnimateShowChangeCellRenderer cell.
|
Background colour to apply when a cell value changes and enableCellChangeFlash is enabled.
|
Borders around the outside of the grid.
|
Corner radius of the outermost container around the grid.
|
Chart Theme Params Copy Link
These only affect chart widgets. Prefixed chart.
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.
|
Default colour for borders. |
Default corner radius for many UI elements such as menus and dialogues. |
Background colour of standard action buttons. |
Border around standard action buttons. |
Font weight of standard action buttons. |
Text colour of standard action buttons. |
Shadow around UI controls that have focus e.g. text inputs and buttons. The value must be a valid CSS box-shadow. |
Default colour for neutral UI elements. Most text, borders and backgrounds are defined as a blend between the background and foreground colours.
|
Font family used for chart text. |
Default font size used for chart text. Titles and some other text are scaled to this font size. |
Background colour for text inputs. Default: backgroundColor
|
Border around text inputs. |
Colour of text within text inputs. Default: textColor
|
Default shadow for elements that float above the chart and are intended to appear separated from it, e.g. dialogues and menus. |
Colour of text that should stand out less than the default. Default: foregroundColor + backgroundColor
|
Default colour for chart text. Default: foregroundColor
|
Background colour for tooltips. |
Border around tooltips. |
Text colour for tooltips. |
Colour of text that should stand out less in tooltips. |
Default colour for axis lines and ticks. |
The outer chart padding. |
Background colour of tooltips, menus, dialogues, toolbars and buttons. Default: foregroundColor + backgroundColor
|
Font family used for text in tooltips, menus, dialogues, toolbars, buttons and text inputs. Default: fontFamily
|
Font size used for text in tooltips, menus, dialogues, toolbars, buttons and text inputs. Default: fontSize
|
Font weight used for text in tooltips, menus, dialogues, toolbars, buttons and text inputs. Default: fontWeight
|
Default colour for text in tooltips, menus, dialogues, toolbars, buttons and text inputs. Default: textColor
|
Colour of text that should stand out less than the default in tooltips, menus, dialogues, toolbars and buttons. Default: subtleTextColor
|
Background colour of crosshair labels. Default: foregroundColor
|
Colour for text in crosshair labels. Default: backgroundColor
|
Default font weight used for chart text. |
Default colour for grid lines. |
Default colour for grouped-category separation lines. |
Colour 1 used in palette for chart fills. transparent if unused. |
Colour 2 used in palette for chart fills. transparent if unused. |
Colour 3 used in palette for chart fills. transparent if unused. |
Colour 4 used in palette for chart fills. transparent if unused. |
Colour 5 used in palette for chart fills. transparent if unused. |
Colour 6 used in palette for chart fills. transparent if unused. |
Colour 7 used in palette for chart fills. transparent if unused. |
Colour 8 used in palette for chart fills. transparent if unused. |
Colour 9 used in palette for chart fills. transparent if unused. |
Colour 10 used in palette for chart fills. transparent if unused. |
Colour 11 used in palette for chart fills. transparent if unused. |
Colour 12 used in palette for chart fills. transparent if unused. |
Colour 13 used in palette for chart fills. transparent if unused. |
Colour 14 used in palette for chart fills. transparent if unused. |
Colour 15 used in palette for chart fills. transparent if unused. |
Colour 16 used in palette for chart fills. transparent if unused. |
Colour 17 used in palette for chart fills. transparent if unused. |
Colour 18 used in palette for chart fills. transparent if unused. |
Colour 19 used in palette for chart fills. transparent if unused. |
Colour 20 used in palette for chart fills. transparent if unused. |
Colour 1 used in palette for chart strokes. transparent if unused. |
Colour 2 used in palette for chart strokes. transparent if unused. |
Colour 3 used in palette for chart strokes. transparent if unused. |
Colour 4 used in palette for chart strokes. transparent if unused. |
Colour 5 used in palette for chart strokes. transparent if unused. |
Colour 6 used in palette for chart strokes. transparent if unused. |
Colour 7 used in palette for chart strokes. transparent if unused. |
Colour 8 used in palette for chart strokes. transparent if unused. |
Colour 9 used in palette for chart strokes. transparent if unused. |
Colour 10 used in palette for chart strokes. transparent if unused. |
Colour 11 used in palette for chart strokes. transparent if unused. |
Colour 12 used in palette for chart strokes. transparent if unused. |
Colour 13 used in palette for chart strokes. transparent if unused. |
Colour 14 used in palette for chart strokes. transparent if unused. |
Colour 15 used in palette for chart strokes. transparent if unused. |
Colour 16 used in palette for chart strokes. transparent if unused. |
Colour 17 used in palette for chart strokes. transparent if unused. |
Colour 18 used in palette for chart strokes. transparent if unused. |
Colour 19 used in palette for chart strokes. transparent if unused. |
Colour 20 used in palette for chart strokes. transparent if unused. |
Up color used in palette for chart fills. |
Up color used in palette for chart strokes. |
Down color used in palette for chart fills. |
Down color used in palette for chart strokes. |
Neutral color used in palette for chart fills. |
Neutral color used in palette for chart strokes. |