Implements the AgStudioThemeParams interface.
Theme params are split into four types. See Theming for usage details.
Shared Theme Params - AgStudioSharedThemeParams Copy Link
These may affect the Studio UI, grid widgets, and chart widgets.
Text color of standard action buttons (e.g. "Reset" and "Apply")
|
Font weight of text in standard action buttons (e.g. "Reset" and "Apply")
|
Background color of standard action buttons (e.g. "Reset" and "Apply")
|
Border around standard action buttons (e.g. "Reset" and "Apply")
|
Corner radius of standard action buttons (e.g. "Reset" and "Apply")
|
Horizontal padding inside standard action buttons (e.g. "Reset" and "Apply")
|
Vertical padding inside standard action buttons (e.g. "Reset" and "Apply")
|
Text color of standard action buttons (e.g. "Reset" and "Apply") when hovered
|
Background color of standard action buttons (e.g. "Reset" and "Apply") when hovered
|
Border around standard action buttons (e.g. "Reset" and "Apply") when hovered. Only has an effect if a border is enabled with buttonBorder.
|
Text color of standard action buttons (e.g. "Reset" and "Apply") when being clicked
|
Background color of standard action buttons (e.g. "Reset" and "Apply") when being clicked
|
Border around standard action buttons (e.g. "Reset" and "Apply") when being clicked. Only has an effect if a border is enabled with buttonBorder.
|
Text color of standard action buttons (e.g. "Reset" and "Apply") when disabled
|
Background color of standard action buttons (e.g. "Reset" and "Apply") when disabled
|
Border around standard action buttons (e.g. "Reset" and "Apply") when disabled.
|
Border radius for checkboxes
|
Border width for checkboxes
|
Background color of a checked checkbox
|
Border color of a checked checkbox
|
The color of the check mark on checked checkboxes.
|
An image defining the shape of the check mark on checked checkboxes.
|
Background color of an indeterminate checkbox
|
Border color of an indeterminate checkbox
|
The color of the dash mark on indeterminate checkboxes
|
An image defining the shape of the dash mark on indeterminate checkboxes
|
Background color of an unchecked checkbox
|
Border color of an unchecked checkbox
|
An image defining the shape of the mark on checked radio buttons
|
Background color for text inputs
|
Border around text inputs (or underneath, if using the underlined input style)
|
Corner radius of text inputs
|
Background color for disabled text inputs
|
Border around disabled text inputs (or underneath, if using the underlined input style)
|
Color of text within disabled text inputs
|
Background color for focussed text inputs
|
Border around focussed text inputs (or underneath, if using the underlined input style)
|
Shadow around focussed text inputs
|
Color of text within focussed text inputs
|
Minimum height of text inputs
|
Background color for text inputs in an invalid state
|
Border around text inputs in an invalid state (or underneath, if using the underlined input style)
|
Color of text within text inputs in an invalid state
|
Padding at the start of text in text inputs
|
Color of text within text inputs
|
Color of placeholder text in empty inputs describing the purpose of the input e.g. "Search..."
|
Color of search icon within search text inputs
|
Border around buttons with attached dropdown menus (e.g. select fields)
|
Corner radius of buttons with attached dropdown menus (e.g. select fields)
|
Border around buttons with attached dropdown menus (e.g. select fields) when focussed
|
Background color for buttons with attached dropdown menus (e.g. select fields)
|
Background color for buttons with attached dropdown menus (e.g. select fields) when focussed
|
Border around dropdown menus attached to buttons (e.g. select fields)
|
Background color for dropdown menus attached to buttons (e.g. select fields)
|
Size of thumb (the draggable item) in color picker popup
|
Size of track in color picker popup
|
Border width of thumb (the draggable item) in color picker popup
|
Border radius of track in color picker popup
|
Border radius of selected/recent colors in color picker
|
Shadow for the selected tabs
|
Border radius for tabs
|
Padding at the bottom of the container for tabs
|
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 most borders. The borders for some features are set separately.
|
Default width for most borders. The border widths for some features are set separately.
|
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.
|
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.
|
Border colour for popup dialogues such as the colour picker input.
|
Shadow for popup dialogues such as the colour picker input.
|
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.
|
Default font family for most text. The font families for some features are set separately.
|
Default font size for most text throughout the Studio UI. The font sizes for some features are set separately.
|
Default font weight for most text throughout the Studio UI. The font weights for some features are set separately.
|
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.
|
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 most items in scrolling lists, e.g. dropdown select inputs and selection filters. Does not impact field or widget selection inputs.
|
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.
|
Minimum height of picker fields such as select dropdowns and color pickers. Picker fields may be taller than this if they contain larger content.
|
Default shadow for elements that float above Studio and are intended to appear separated from it e.g. dialogues and menus.
|
Background colour when hovering over rows in dropdown menus. Set to transparent to disable the hover effect.
|
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 most text. The text colours for some features are set separately.
|
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.
|
Border for tooltips.
|
Text colour for tooltips.
|
Background color of tabs
|
Background color of the container for tabs
|
Border below the container for tabs
|
Padding at the left and right of the container for tabs
|
Padding at the top of the container for tabs
|
Padding at the bottom of the container for tabs
|
Padding inside the top and bottom sides of the container for tabs
|
Background color of tabs when hovered over
|
Color of text within tabs when hovered over
|
Background color of selected tabs
|
Color of the border around selected tabs
|
Width of the border around selected tabs
|
Color of text within the selected tabs
|
Spacing between tabs
|
Color of text within tabs
|
Padding at the top of the container for tabs
|
Studio Theme Params - AgStudioCoreThemeParams Copy Link
These only affect the Studio UI. Generally prefixed studio.
Line height for Studio UI
|
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. 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).
|
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 header font family.
|
Panel header font size.
|
Panel header font weight.
|
Panel header line 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 item border radius.
|
Panel section border color.
|
Panel group background color.
|
Panel group title bar text color.
|
Panel item vertical spacing.
|
Panel item horizontal spacing.
|
Width of compact form items
|
Panel field select drop preview background color.
|
Panel field select replace value border.
|
Panel field select replace value background color.
|
Panel field select selected item background color.
|
Filters panel item vertical spacing.
|
Filters panel item horizontal spacing.
|
Filters panel container vertical padding.
|
Filters panel container horizontal padding.
|
Filters panel warning background color.
|
Filters panel card subtle color.
|
Filters panel card icon subtle hover color.
|
AI panel width.
|
AI panel delete thread and delegate button hover background color.
|
AI panel rich text header and hover background color.
|
AI panel input message background color.
|
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 selection item background color.
|
Widget selection item 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.
|
Widget selection item height.
|
Widget selection item width.
|
Widget icon size.
|
Widget loading overlay background color.
|
Widget loading overlay border width.
|
Widget no data overlay background color.
|
Widget no data overlay border width.
|
Canvas border.
|
Canvas border radius.
|
Canvas border box shadow.
|
Canvas min width.
|
Canvas max width.
|
Canvas 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.
|
Linear gauge label color.
|
Value widget default font size
|
Text widget default font size
|
Expression syntax highlighting: colour for bracket nesting level 1.
|
Expression syntax highlighting: colour for bracket nesting level 2.
|
Expression syntax highlighting: colour for bracket nesting level 3.
|
Expression syntax highlighting: colour for bracket nesting level 4.
|
Expression syntax highlighting: colour for bracket nesting level 5.
|
Expression syntax highlighting: colour for bracket nesting level 6.
|
Expression syntax highlighting: colour for bracket nesting level 7.
|
Expression syntax highlighting: colour for bracket nesting level 8.
|
Expression syntax highlighting: colour for bracket nesting level 9.
|
Expression syntax highlighting: colour for bracket nesting level 10.
|
Expression syntax highlighting: comment token colour.
|
Expression syntax highlighting: identifier token colour.
|
Expression syntax highlighting: function token colour.
|
Expression syntax highlighting: string token colour.
|
Expression syntax highlighting: number token colour.
|
Expression syntax highlighting: boolean token colour.
|
Expression syntax highlighting: field token colour.
|
Expression syntax highlighting: column token colour.
|
Expression syntax highlighting: unknown token text colour.
|
Expression syntax highlighting: unknown token background colour.
|
Expression syntax highlighting: unknown token border shadow.
|
Expression syntax highlighting: highlighted token border shadow.
|
Expression syntax highlighting: error token text decoration colour.
|
Expression input error container border.
|
Expression input error container background color.
|
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.
|
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.
|
Search input heights
|
Grid Theme Params - AgStudioGridThemeParams Copy Link
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.
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.
|
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.
|
Font size for data in grid rows.
|
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 in grid cells.
|
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.
|
Colour for icons, or inherit to take on the text colour of the containing component.
|
The size of square icons and icon-buttons.
|
Amount of spacing around and inside UI elements. All padding and margins in the grid are defined as a multiple of this value.
|
Padding at the start and end of grid cells and header cells.
|
Colour of text in grid cells.
|
Vertical borders between columns within the grid only, excluding headers.
|
Height of the vertical border between column headers. Percentage values are relative to the header height.
|
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.
|
Background colour applied to grid rows.
|
Alternative background colour applied to every other row to create a striped effect.
|
Horizontal borders between the grid and rows that are pinned to the top or bottom and the rest of the grid.
|
Horizontal borders between rows.
|
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.
|
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.
|
Borders around the outside of the grid.
|
Corner radius of the outermost container around the grid.
|
Chart Theme Params - AgStudioChartThemeParams Copy Link
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.
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.
|
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 width for borders.
|
Background colour of standard action buttons.
|
Border around standard action buttons.
|
Corner radius for 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.
|
Font family used for chart text.
|
Default font size used for chart text. Titles and some other text are scaled to this font size.
|
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.
|
Corner radius for tooltips.
|
Text colour for tooltips.
|
Default colour for axis lines and ticks.
|
The outer chart padding.
|
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.
|