This page describes the grid's theming system from v32 and before, for the benefit of applications that have not yet migrated to the Theming API. These themes are deprecated and will be removed in a future major version. You may want to visit the new theming docs or check out the migration guide.
Here is a list of variables accepted by the the grid:
(Quartz theme only) accent colour used for checked checkboxes, range selections, and input focus outlines in the Quartz theme |
(Alpine theme only) accent colour used for checked checkboxes, range selections, row hover, row selections, selected tab underlines, and input focus outlines in the Alpine theme |
(Balham theme only) accent colour used for checked checkboxes, range selections, row selections, and input focus outlines in the Balham theme |
(Material theme only) the primary colour as defined in the Material Design colour system. Currently this is used on buttons, range selections and selected tab underlines in the Material theme |
(Material theme only) the accent colour as defined in the Material Design colour system. Currently this is used on checked checkboxes in the Material theme |
Colour of text and icons in primary UI elements like menus |
Background colour of the grid |
Colour of text and icons in UI elements that need to be slightly less emphasised to avoid distracting attention from data |
Colour of text in grid cells |
Colour of text and icons in the header |
Background colour for all headers, including the grid header, panels etc |
Background colour for all tooltips |
Color of elements that can't be interacted with because they are in a disabled state |
Background colour for second level headings within UI components |
Background colour for toolbars directly under subheadings (as used in the chart settings menu) |
Background for areas of the interface that contain UI controls, like tool panels and the chart settings menu |
Background for the active tab on the side of the control panel |
Background color of selected rows in the grid and in dropdown menus |
Background colour applied to every other row |
Background color of the overlay shown over the grid e.g. a data loading indicator |
Background color of menus, including the column menu and right-click context menu |
Background color of panels, including the advanced filter builder and integrated charts |
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 rollover on one but not the other, use CSS selectors instead of this property |
Background color when hovering over columns in the grid |
Color to draw around selected cell ranges |
Border style for range selections, e.g. solid or dashed. Do not set to none, if you need to hide the border set the color to transparent |
Background colour of selected cell ranges. |
Background-color when 2 selected ranges overlap. Hint: for a realistic appearance of multiple semi-transparent colours overlaying, set the opacity to 1-((1-X)^2) where X is the opacity of --ag-range-selection-background-color |
Background-color when 3 selected ranges overlap. Hint: for a realistic appearance of multiple semi-transparent colours overlaying, set the opacity to 1-((1-X)^3) where X is the opacity of --ag-range-selection-background-color |
Background-color when 4 or more selected ranges overlap. Hint: for a realistic appearance of multiple semi-transparent colours overlaying, set the opacity to 1-((1-X)^4) where X is the opacity of --ag-range-selection-background-color |
Background colour to briefly apply to a cell range when it is copied from or pasted into |
Colour of the border drawn under selected tabs |
Thickness of the border drawn under selected tabs |
Duration of animation used to show and hide the border drawn under selected tabs |
Background colour for cells that provide categories to the current range chart |
Background colour for cells that provide data to the current range chart |
Rollover colour for header cells. If you set this variable and have enabled column reordering by dragging, you may want to set --ag-header-cell-moving-background-color to ensure that the rollover colour remains in place during dragging. |
Colour applied to header cells when the column is being dragged to a new position |
Colour to apply when a cell value changes and enableCellChangeFlash is enabled |
Colour to temporarily apply to cell data when its value increases in an agAnimateShowChangeCellRenderer cell |
Colour to temporarily apply to cell data when its value decreases in an agAnimateShowChangeCellRenderer cell |
Colour for the 'chip' that represents a column that has been dragged onto a drop zone |
Enable or disable borders around most UI elements in the grid. Set this to a border style and thickness, e.g. solid 1px to enable borders, or none to disable borders. Use the other --ag-borders-* variables for more fine grained control over which UI elements get borders. |
Colour for border around major UI components like the grid itself, headers; footers and tool panels. |
Enable or disable borders that are critical to UX, e.g. those between headers and rows. Themes that disable borders generally may want to enable these borders. Set this to a border style and thickness, e.g. solid 1px to enable borders, or none to disable borders. |
Draw decorative borders separating UI elements within components. Set this to a border style and thickness, e.g. solid 1px to enable borders, or none to disable borders. |
Colour for borders used to separate elements within a major UI component |
Default border style for the grid rows. Set this to a border style, e.g. solid, dotted. |
The thickness of the border between grid rows. Set this to a border thickness, e.g. 1px. |
Colour of the border between grid rows, or transparent to display no border |
Colour of the border around menus including the column menu and right-click context menu |
Colour of the border around panels including the advanced filter builder and integrated charts |
Default border for cells. This can be used to specify the border-style and border-color properties e.g. dashed red but the border-width is fixed at 1px. Set to solid transparent to show no border. |
Draw borders around inputs. Set this to a border style and thickness, e.g. solid 1px to enable borders, or none to disable borders. |
Colour for borders around inputs, if enabled with --ag-borders-input |
Draw borders around inputs when their content has failed validation. Set this to a border style and thickness, e.g. solid 2px to enable borders. Set to none to disable borders but ensure that you have added styles to differentiate invalid from valid inputs. |
The color for the border around invalid inputs, if enabled with --ag-borders-input-invalid |
Draw borders around the vertical tabs on the side of the control panel. Set this to a border style and thickness, e.g. solid 1px to enable borders, or none to disable borders. |
Border radius applied to many elements such as dialogs and form widgets |
The color applied to form elements in an invalid state |
The border around disabled text inputs |
The background colour of disabled text inputs |
the background of an checkbox |
edge rounding a checkboxes |
color of the checkbox-checked icon that is shown in a checked checkbox |
color of the checkbox-unchecked icon that is shown in an unchecked checkbox |
color of the checkbox-indeterminate icon that is shown in an indeterminate checkbox |
size of the toggle button outer border |
colour of the toggle button outer border in its 'on' state |
colour of the toggle button's outer border in its 'off' state |
colour of the toggle button background in its 'on' state |
colour of the toggle button background in its 'off' state |
colour of the toggle button switch (the bit that slides from left to right) |
border colour of the toggle button switch (the bit that slides from left to right) |
width of the whole toggle button component |
height of the whole toggle button component |
box shadow around focussed inputs |
Colour of the border around focussed inputs. Set to var(--ag-input-border-color) if you do not want to change the border colour on focus. |
Color of border around selected chart style |
Color of dot representing selected page of chart styles |
grid-size is the main control for affecting how tightly data and UI elements are packed together. All padding and spacing in the grid is defined as a multiple of grid-size, so increasing it will make most components larger by increasing their internal white space while leaving the size of text and icons unchanged. |
The size of square icons and icon-buttons |
The font weight to apply to icon elements, used for icon fonts that require a specific weight to work |
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 horizontal spacing between widgets in containers that contain horizontally stacked widgets such as the column groups header component. |
The vertical spacing between widgets in containers that contain vertically stacked widgets |
Horizontal padding for grid and header cells (vertical padding is not set explicitly, but inferred from row-height / header-height |
Horizontal spacing between widgets inside cells (e.g. row group expand buttons and row selection checkboxes) |
Height of grid rows |
Height of header rows |
Height of items in lists (example of lists are dropdown select inputs and column menu set filters) |
Whether to display the header column separator - a vertical line that displays between every header cell |
Height of the header column separator. Percentage values are relative to the header height. |
Width of the header column separator |
Colour of the header column separator |
Whether to show the header column resize handle - a vertical line that displays only between resizeable header columns, indicating where to drag in order to resize the column. |
Height of the header resize handle. Percentage values are relative to the header height. |
Width of the header resize handle. |
Colour of the header resize handle |
How much to indent child columns in the column tool panel relative to their parent |
How much to indent child filter items in the Set Filter List relative to their parent |
How much to indent child filter items in the Advanced Filter Builder relative to their parent |
How much to indent child rows in the grid relative to their parent row |
How much to indent child columns in the filters tool panel relative to their parent |
Minimum width of the legacy tabbed column menu. Set this to the largest content you expect to be displayed in the tabbed menu to prevent the menu from changing size as you switch between tabs. |
Minimum width of the filter menu |
Width of the sidebar that contains the columns and filters tool panels |
Font family used for all text |
Default font size for text in the grid |
The icon font used by the grid. |
cards are elements that float above the UI |
the default card shadow applies to simple cards like column drag indicators and text editors |
override the shadow for popups - cards that contain complex UI, like menus and charts |
Colour of the join operator pills in the Advanced Filter Builder |
Colour of the column pills in the Advanced Filter Builder |
Colour of the filter option pills in the Advanced Filter Builder |
Colour of the value pills in the Advanced Filter Builder |
Colour of the skeleton loading effect used in the SSRM |