This page documents all theme parameters available when using the Theming API.
Parameters are set using the theme.withParams() method:
const myTheme = themeQuartz.withParams({
accentColor: 'red',
spacing: 12,
});
Foundations
Core theme parameters. Most other parameters derive from these values by default.
Background color of the grid. Many UI elements are semi-transparent, so their color blends with the background color. |
Default color for neutral UI elements. Most text, borders and backgrounds are defined as semi-transparent versions of this color, resulting in a blend between the background and foreground colours. |
The 'brand color' for the grid, used wherever a non-neutral color is required. Selections, focus outlines and checkboxes use the accent color by default. |
Amount of spacing around and inside UI elements. All padding and margins in the grid are defined as a multiple of this value. |
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 |
Colours
See Theming: Colours & Dark Mode for more information.
Default color for all text |
Background color for non-data areas of the grid. Headers, tool panels and menus use this color by default. |
The color for inputs and UI controls in an invalid state. |
Color of text and UI elements that should stand out less than the default. |
The CSS color-scheme to apply to the grid, which affects the default appearance of browser scrollbars form inputs unless these have been styled with CSS. |
Spacing & Sizing
See Theming: Compactness & Row Height for more information.
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. |
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 items in scrolling lists e.g. dropdown select inputs and column menu set filters. |
Height of the pagination panel at the bottom of the grid. Defaults to the higher of rowHeight or 22px. |
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 |
Borders
See Theming API: Customising Borders for more information.
Default color for borders. |
Default width for borders. |
Default corner radius for many UI elements such as menus, dialogs and form widgets. |
Borders around the outside of the grid |
Corner radius of the outermost container around the grid. |
Vertical borders between columns within the grid only, excluding headers. |
Vertical borders between columns that are pinned to the left or right and the rest of the grid |
Headers
Style Column Headers, see also Theming: Customising Headers
Background color for header and header-like components |
Color of text in the 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 |
Multiply the header vertical padding by a number, e.g. 1.5 to increase by 50% |
Borders between and below header rows. |
Vertical borders between columns within headers. |
Height of the vertical border between column headers. Percentage values are relative to the header height. |
Color 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. |
Duration in seconds of the background color transition if headerCellHoverBackgroundColor or headerCellMovingBackgroundColor is set |
Background color of a header cell when hovering over it, or transparent for no change. |
Background color of a header cell when dragging to reposition it, or transparent for no change. |
Rows
See Row Styles for more information.
Multiply the row vertical padding by a number, e.g. 1.5 to increase by 50%. Has no effect if rowHeight is set. |
Horizontal borders between rows. |
Background color 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. |
The size of indentation applied to each level of row grouping - deep rows are indented by a multiple of this value. |
Alternative background colour applied to every other row to create a striped effect |
Background color when hovering over columns in the grid. This is not visible unless enabled in the grid options. |
Background color applied to grid rows. Should be a solid color, semi-transparent colors will cause issues. |
Horizontal borders above footer components like the pagination and status bars |
Background color for a row with invalid editor status |
Background color for rows in batch edit mode |
Text color for rows in batch edit mode |
Color of the skeleton loading effect used when loading row data with the Server-side Row Model |
Color to temporarily apply to cell data when its value decreases in an agAnimateShowChangeCellRenderer cell |
Color to temporarily apply to cell data when its value increases in an agAnimateShowChangeCellRenderer cell |
Background color to apply when a cell value changes and enableCellChangeFlash is enabled |
Background color for the rows that have been pinned to the top or bottom |
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 |
Text color for rows that have been pinned to the top or bottom |
Background color 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 |
Text color for row in the main viewport that has been pinned to the top or bottom |
Cells
See Cell Styles for more information.
Sets the default value for cellFontSize and is involved in the default calculation of listItemHeight |
Font family of text in grid cells |
Font size of text in grid cells |
Font weight of text in grid cells |
Color of text in cells in the grid data area |
Horizontal spacing between widgets inside cells (e.g. row group expand buttons and row selection checkboxes). |
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% |
Border around cells being edited |
Shadow for cells being edited |
Background color for cells in batch edit mode |
Text color for cells in batch edit mode |
Buttons
See Customising Inputs & Widgets for more information.
Background color of standard action buttons (e.g. "Reset" and "Apply") |
Text color of standard action buttons (e.g. "Reset" and "Apply") |
Font weight of text in 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") |
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 being clicked |
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. |
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 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 hovered |
Toggle Buttons
See Customising Inputs & Widgets for more information.
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 color 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 |
Icons
See Custom Icons for more information.
Color for icons, or inherit to take on the text color of the containing component |
The size of square icons and icon-buttons |
Default color for clickable icons |
Default background color for clickable icons |
The distance beyond the border of the clickable icons that the background extends to |
Corner radius of clickable icon background |
Color 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 color of clickable icon buttons when styled as active. This is used for the column filter button when a filter is applied to the column. |
Color 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. |
Color of clickable icons when hovered |
Background color for clickable icons when hovered |
Inputs
See Customising Inputs & Widgets for more information.
Background color for text inputs |
Color of text within text inputs |
Color of placeholder text in empty inputs describing the purpose of the input e.g. "Search..." |
Border around text inputs (or underneath, if using the underlined input style) |
Corner radius of text inputs |
Minimum height of text inputs |
Padding at the start of text in text inputs |
Color of search icon within search text inputs |
Background color for focussed text inputs |
Color of text within focussed text inputs |
Border around focussed text inputs (or underneath, if using the underlined input style) |
Shadow around focussed text inputs |
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. |
Background color for disabled text inputs |
Color of text within disabled text inputs |
Border around disabled text inputs (or underneath, if using the underlined input style) |
Background color for text inputs in an invalid state |
Color of text within text inputs in an invalid state |
Border around text inputs in an invalid state (or underneath, if using the underlined input style) |
Checkboxes & Radio Buttons
See Customising Inputs & Widgets for more information.
Border radius for checkboxes |
Border width for checkboxes |
Background color of an unchecked checkbox |
Border color of an unchecked checkbox |
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 |
An image defining the shape of the mark on checked radio buttons |
Pickers & Selects
See Customising Inputs & Widgets for more information.
Background color for buttons with attached dropdown menus (e.g. select fields) |
Border around 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 buttons with attached dropdown menus (e.g. select fields) when focussed |
Background color for dropdown menus attached to buttons (e.g. select fields) |
Border around dropdown menus attached to buttons (e.g. select fields) |
Background color for selected items within the multiple select widget |
Border for selected items within the multiple select widget |
Menus & Popups
Style menus like the Context Menu and Column Menu, see also Theming: Customising Menus & Popups
Background color for menus e.g. column menu and right-click context menu |
Text color 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 |
Default shadow for elements that float above the grid and are intended to appear elevated byt still attached e.g. dropdowns and cell editors |
Default shadow for dropdown menus |
Default shadow for elements that float above the grid and are intended to appear separated from it e.g. dialogs and menus |
Background color of the overlay shown over the grid e.g. a data loading indicator. |
Panels & Dialogs
See Theming: Customising Menus & Popups for more information.
Background color for panels and dialogs such as the advanced filter builder. Note that for the integrated charts panel, the chart fully fills the panel so no background is visible behind it - set the chart theme to change its background. |
Border color popup dialogs such as the integrated charts panel and the advanced filter builder. |
Shadow for popup dialogs such as the integrated charts panel and the advanced filter builder. |
Background color for the title bar of panels and dialogs such as the integrated charts panel and the advanced filter builder. |
Text color for the title bar of panels and dialogs such as the integrated charts panel and the advanced filter builder. |
Font family for the title bar of panels and dialogs such as the integrated charts panel and the advanced filter builder. |
Size of text for the title bar of panels and dialogs such as the integrated charts panel and the advanced filter builder. |
Font weight for the title bar of panels and dialogs such as the integrated charts panel and the advanced filter builder. |
The height of the title bar of panels and dialogs such as the integrated charts panel and the advanced filter builder. |
Border below the title bar of panels and dialogs such as the integrated charts panel and the advanced filter builder. |
Icon color for the title bar of panels and dialogs such as the integrated charts panel and the advanced filter builder. |
Amount of indentation for each level of children when selecting grouped columns in the column select widget. |
Drag & Drop
Row dragging, column dragging, and data drag & drop
Color 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 |
Color 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 color of the drag and drop image component element when dragging columns or rows |
Border color 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 or rows |
Border color of the drag and drop image component element when dropping is not allowed |
Color of the drag handle on draggable rows and column markers |
Tooltips
See Tooltips for more information.
Background color for tooltips |
Text color for tooltips |
Border for tooltips |
Background color for tooltips showing errors |
Text color for tooltips showing errors |
Border for tooltips showing errors |
Tabs
See Theming: Customising Tool Panels for more information.
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 |
Background color of tabs |
Color of text within 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 |
Spacing between tabs |
Background color of tabs when hovered over |
Color of text within tabs when hovered over |
Background color of selected tabs |
Color of text within the selected tabs |
Color of the border around selected tabs |
Width of the border around selected tabs |
Color of line drawn under selected tabs |
Width of line drawn under selected tabs |
Duration in seconds of the fade in/out transition for the line drawn under selected tabs |
Sidebar
Style Tool Panels, see also Theming: Customising Tool Panels
Background color of the sidebar that contains the columns and filters tool panels |
Borders between the grid and side panels including the column and filter tool bars, and chart settings |
Default width of the sidebar that contains the columns and filters tool panels |
Duration of the animation when a sidebar panel opens or closes. Set to 0
to disable animations. Automatically disabled if the user has requested
reduced motion in their OS accessibility settings. |
Background color of the row of tab buttons at the edge of the sidebar |
Spacing between the topmost side button and the top of the sidebar |
Background color of the tab buttons in the sidebar |
Text color of the tab buttons in the sidebar |
Border drawn above and below tab buttons in the sidebar |
Padding to the left of the text in tab buttons in the sidebar (this is always the padding on the inward facing side of the button, so in right-to-left layout it will be on the right) |
Padding to the right of the text in tab buttons in the sidebar (this is always the padding on the outward facing side of the button, so in right-to-left layout it will be on the left) |
Padding above and below the text in tab buttons in the sidebar |
Background color of the tab buttons in the sidebar when hovered |
Text color of the tab buttons in the sidebar when hovered |
Background color of the selected tab button in the sidebar |
Text color of the selected tab button in the sidebar |
Border drawn above and below the selected tab button in the sidebar |
Color of the underline below the selected tab in the sidebar, or 'transparent' to disable the underline effect |
Width of the underline below the selected tab in the sidebar |
Duration of the transition effect for the underline below the selected tab in the sidebar |
The dividing line between sections of menus e.g. column menu and right-click context menu |
Color Picker
The colour picker widget used in Integrated Charts
Size of track in color picker popup |
Border radius of track in color picker popup |
Size of thumb (the draggable item) in color picker popup |
Border width of thumb (the draggable item) in color picker popup |
Border radius of selected/recent colors in color picker |
Selections
Style Cell Selection and Row Selection, see also Theming: Customising Selections
Background color of selected rows in the grid and in dropdown menus. |
Background color of the Row Numbers cells when the range selects all cells for that row. |
Background color of selected cell ranges. Choosing a semi-transparent color ensure that multiple overlapping ranges look correct. |
The color used for borders around range selections. The selection background defaults to a semi-transparent version of this color. |
Border style around range selections. |
Background color to briefly apply to a cell range when the user copies from or pastes into it. |
Background color 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. |
Background color for cells that provide data to the current range chart |
Background color for cells that provide categories to the current range chart |
Column Drop
The Column drop component is used in the Columns Tool Panel and Row Group Panel.
Background color of the pill shape representing columns in the column drop component |
Text color for the pill shape representing columns in the column drop component |
Border for the pill shape representing columns in the column drop component |
Color of the drag grip icon in the pill shape representing columns in the column drop component |
Status Bar
See Status Bar for more information.
Text color for labels in the status bar component |
Font weight for labels in the status bar component |
Text color for values in the status bar component |
Font weight for values in the status bar component |
Integrated Charts
See Integrated Charts for more information.
Color of form field labels within the chart editing panel for integrated charts |
Width of the chart editing panel for integrated charts |
Column Panel
See Columns Tool Panel for more information.
Background color of Columns Tool Panel apply button |
Color of Columns Tool Panel apply button |
Filter Panel
See Filters Tool Panel for more information.
Background color of new Filters Tool Panel apply button |
Color of new Filters Tool Panel apply button |
Color of text and UI elements that should stand out less than the default in new Filters Tool Panel |
Color of text and UI elements that should stand out less than the default in new Filters Tool Panel when hovered |
How much to indent child columns in the filters tool panel relative to their parent |
Amount of indentation for each level of child items in the Set Filter list when filtering tree data. |
Advanced Filter
See Advanced Filter for more information.
Color of the join operator pills in the Advanced Filter Builder |
Color of the column pills in the Advanced Filter Builder |
Color of the filter option pills in the Advanced Filter Builder |
Color of the value pills in the Advanced Filter Builder |
Color of the dividing line above the buttons in the advanced filter builder |
Amount that each level of the nesting in the advanced filter builder is indented by |
Formulas
See Formulas for more information.
The color of the 1st formula field token |
The color of the 2nd formula field token |
The color of the 3rd formula field token |
The color of the 4th formula field token |
The color of the 5th formula field token |
The color of the 6th formula field token |
The color of the 7th formula field token |
The background color of the 1st formula field token associated range |
The background color of the 2nd formula field token associated range |
The background color of the 3rd formula field token associated range |
The background color of the 4th formula field token associated range |
The background color of the 5th formula field token associated range |
The background color of the 6th formula field token associated range |
The background color of the 7th formula field token associated range |
The border of the 1st formula field token associated range |
The border of the 2nd formula field token associated range |
The border of the 3rd formula field token associated range |
The border of the 4th formula field token associated range |
The border of the 5th formula field token associated range |
The border of the 6th formula field token associated range |
The border of the 7th formula field token associated range |
Find
See Find for more information.
Background color of matches used in Find |
Color of matches used in Find |
Background color of the active match used in Find |
Color of the active match used in Find |