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,
});
Advanced Filter
See Advanced Filter for more information.
Color of the dividing line above the buttons in the advanced filter builder |
Color of the column pills in the Advanced Filter Builder |
Amount that each level of the nesting in the advanced filter builder is indented by |
Color of the join operator 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 |
Borders
See Theming API: Customising Borders for more information.
Default corner radius for many UI elements such as menus, dialogs and form widgets. |
Default width for borders. |
Default color for borders. |
Vertical borders between columns within the grid only, excluding headers. |
Horizontal borders above footer components like the pagination and status bars |
Vertical borders between columns within headers. |
Borders between and below header rows. |
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 |
Horizontal borders between rows. |
Borders between the grid and side panels including the column and filter tool bars, and chart settings |
Borders around the outside of the grid |
Corner radius of the outermost container around the grid. |
Buttons
See Customising Inputs & Widgets for more information.
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") |
Border around standard action buttons (e.g. "Reset" and "Apply") |
Corner radius of standard action buttons (e.g. "Reset" and "Apply") |
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 |
Font weight of text in standard action buttons (e.g. "Reset" and "Apply") |
Horizontal padding inside standard action buttons (e.g. "Reset" and "Apply") |
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 |
Text color of standard action buttons (e.g. "Reset" and "Apply") |
Vertical padding inside standard action buttons (e.g. "Reset" and "Apply") |
Checkboxes & Radio Buttons
See Customising Inputs & Widgets for more information.
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 |
Colours & Dark Mode
See Theming: Colours & Dark Mode for more information.
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. |
Background color of the grid. Many UI elements are semi-transparent, so their color blends with the background color. |
Default color for borders. |
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. |
Color of text in cells in the grid data area |
Background color for non-data areas of the grid. Headers, tool panels and menus use this color by default. |
Background color applied to grid rows. Should be a solid color, semi-transparent colors will cause issues. |
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 color for inputs and UI controls in an invalid state. |
Color of text and UI elements that should stand out less than the default. |
Default color for all text |
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 |
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 |
Text color for the pill shape representing columns in the column drop component |
Data Rows & Columns
See Row Styles for more information.
Font family of text in grid cells |
Color of text in cells in the grid data area |
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. |
Font size for data in grid rows |
Alternative background colour applied to every other row to create a striped effect |
Background color for the rows that have been pinned to the top or bottom |
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 |
The size of indentation applied to each level of row grouping - deep rows are indented by a multiple of this value. |
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. |
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 |
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 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 |
Border color of the drag and drop image component element when dropping is not allowed |
Shadow for the drag and drop image component element when dragging columns or rows |
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 |
Editing
See Cell Editing for more information.
Background color for cells in batch edit mode |
Text color for cells in batch edit mode |
Border around cells being edited |
Shadow for cells being edited |
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 |
Filter Panel
See Filters Tool Panel for more information.
Amount of indentation for each level of children when selecting grouped columns in the column select widget. |
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. |
Find
See Find for more information.
Background color of the active match used in Find |
Color of the active match used in Find |
Background color of matches used in Find |
Color of matches used in Find |
Fonts
See Theming: Customising Fonts for more information.
Font family of text in grid cells |
Color of text in cells in the grid data area |
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 |
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 |
Formula Bar
See Formulas for more information.
The background color of the 1st formula field token associated range |
The border of the 1st formula field token associated range |
The color of the 1st formula field token |
The background color of the 2nd formula field token associated range |
The border of the 2nd formula field token associated range |
The color of the 2nd formula field token |
The background color of the 3rd formula field token associated range |
The border of the 3rd formula field token associated range |
The color of the 3rd formula field token |
The background color of the 4th formula field token associated range |
The border of the 4th formula field token associated range |
The color of the 4th formula field token |
The background color of the 5th formula field token associated range |
The border of the 5th formula field token associated range |
The color of the 5th formula field token |
The background color of the 6th formula field token associated range |
The border of the 6th formula field token associated range |
The color of the 6th formula field token |
The background color of the 7th formula field token associated range |
The border of the 7th formula field token associated range |
The color of the 7th formula field token |
Headers
Style Column Headers, see also Theming: Customising Headers
Background color for header and header-like components |
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. |
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. |
Color of text in the header and header-like components |
Icons
See Custom Icons for more information.
Color of the drag handle on draggable rows and column markers |
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 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. |
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 |
Default color for clickable icons |
Background color for clickable icons when hovered |
Color of clickable icons when hovered |
Color for icons, or inherit to take on the text color of the containing component |
Inputs
See Customising Inputs & Widgets for more information.
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. |
Shadow around UI controls that have focus e.g. text inputs and buttons. The value must a valid CSS box-shadow. |
The color for inputs and UI controls in an invalid state. |
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 |
Color of search icon within search 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 placeholder text in empty inputs describing the purpose of the input e.g. "Search..." |
Color of text within text inputs |
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 |
Border radius of selected/recent colors in color picker |
Border width of thumb (the draggable item) in color picker popup |
Size of thumb (the draggable item) in color picker popup |
Border radius of track in color picker popup |
Size of track in color picker popup |
Background color for cells that provide data to the current range chart |
Background color for cells that provide categories to the current range chart |
Menus & Popups
Style menus like the Context Menu and Column Menu, see also Theming: Customising Menus & Popups
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 |
Background 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 |
Text color for menus e.g. column menu and right-click context menu |
Background color of the overlay shown over the grid e.g. a data loading indicator. |
Default shadow for elements that float above the grid and are intended to appear separated from it e.g. dialogs and menus |
Panels & Dialogs
See Theming: Customising Menus & Popups for more information.
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 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. |
Background color for 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. |
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. |
Icon 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. |
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 |
Selections
Style Cell Selection and Row Selection, see also Theming: Customising Selections
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 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 for cells that provide data to the current range chart |
Background color for cells that provide categories to the current range chart |
Background color to briefly apply to a cell range when the user copies from or pastes into it. |
Background color of the Row Numbers cells when the range selects all cells for that row. |
Background color of selected rows in the grid and in dropdown menus. |
Sidebar
Style Tool Panels, see also Theming: Customising Tool Panels
Background color of the sidebar that contains the columns and filters tool panels |
Default width of the sidebar that contains the columns and filters tool panels |
Background color of the tab buttons in the sidebar |
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 |
Border drawn above and below 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 |
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) |
Background color of the selected tab button in the sidebar |
Border drawn above and below the selected tab button in the sidebar |
Text color of 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 |
Duration of the transition effect for the underline below the selected tab in the sidebar |
Width of the underline below the selected tab in the sidebar |
Text color of the tab buttons in the sidebar |
Padding above and below the text in tab buttons in the sidebar |
The dividing line between sections of menus e.g. column menu and right-click context menu |
Spacing & Sizing
See Theming: Compactness & Row Height for more information.
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% |
Horizontal spacing between widgets inside cells (e.g. row group expand buttons and row selection checkboxes). |
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. |
Multiply the header vertical padding by a number, e.g. 1.5 to increase by 50% |
The size of square icons and icon-buttons |
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. |
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. |
Multiply the row vertical padding by a number, e.g. 1.5 to increase by 50%. Has no effect if rowHeight is set. |
Amount of spacing around and inside UI elements. All padding and margins in the grid are defined as a multiple of this value. |
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 |
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 |
Tabs
See Theming: Customising Tool Panels for more information.
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 |
Color of line drawn under selected tabs |
Duration in seconds of the fade in/out transition for the line drawn under selected tabs |
Width of line drawn under selected tabs |
Spacing between tabs |
Color of text within tabs |
Padding at the top of the container for tabs |
Toggle Buttons
See Customising Inputs & Widgets for more information.
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 |
Width of the whole toggle button component |
Tooltips
See Tooltips for more information.
Background color for tooltips |
Border for tooltips |
Background color for tooltips showing errors |
Border for tooltips showing errors |
Text color for tooltips showing errors |
Text color for tooltips |