Provided Themes

Provided Themes are themes that come provided with the grid. The quickest way to get a nice style onto a grid is to apply a provided theme.

The themes can be used without any modification, or can tweaked by altering the SASS variables .

Themes Summary

The themes are as follows:

Theme Name Description
ag-theme-balham
ag-theme-balham-dark

Flat themes for professional applications. ag-theme-balham-dark is a dark version of ag-theme-balham.

Recommendation: This is the default theme for the grid and a great choice for most applications.

ag-theme-material

A theme designed according to the Google Material Language Specs.

Recommendation: This theme looks great for simple applications with lots of white space. However the Google Material spec doesn't cater for advanced grid features such as grouped columns and tool panels. For applications that use these advanced features, or need to pack a lot of data into a small space, ag-theme-balham may be a better choice.

ag-theme-fresh
ag-theme-dark
ag-theme-blue
ag-theme-bootstrap

Older flat themes that were part of the grid before we designed the Balham and Material themes. These themes are deprecated and will be removed in the next major release.

Recommendation: Prefer the ag-theme-balham or ag-theme-material themes and use SASS variables to change the colors if required.

To use a theme, add the theme class name to the div element where the ag-Grid directive is attached.

The following is an example of using the balham theme:

<div id="myGrid" class="ag-theme-balham"></div>

The following is an example of using the dark balham theme:

<div id="myGrid" class="ag-theme-balham-dark"></div>

Balham Themes

The Balham theme comes in two versions: 1) light and 2) dark. Below shows examples of each type.

Example Balham Light (ag-theme-balham)

Example Balham Dark (ag-theme-balham-dark)

Change the Theme Accent Color

In addition to the finer grained Scss color variables available for the rest of the themes, the Balham theme has a 'catch all' Sass variable named '$ag-active' that determines the color of the selected checkboxes, selected rows and icons in the column menu.

// Set the colors to blue and amber $ag-active: #E91E63; // pink-500 from https://www.materialui.co/colors // Import the ag-Grid balham theme @import '~ag-grid-community/src/styles/ag-theme-balham/sass/ag-theme-balham';

The recommended way to process your project's Scss files is through webpack, since it provides various loaders that optimize and reduce the final size of the bundle.

Material Design Theme

To comply with the material design data table guidelines, the theme uses different spacing and icon set compared to the other themes.

The example below shows the grid with a rich set of features enabled.

Include the Roboto Font

The material design guidelines require the Roboto font to be used throughout the interface. The easiest way to include it in the document is by loading it from the Google CDN. Put the following code in the HEAD element of your document:

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

Change the Theme Primary / Secondary Colors through Scss

The material theme uses Scss internally, exposing several variables which control its appearance. The ones you are likely looking into changing are the primary and secondary colors. The default ones are indigo-500 and pink-A200 from the Google color palette, which match the indigo-pink Angular Material theme.

To change the application colors, set the variables values to your colors of choice, and include the Scss theme file after that.

// Set the colors to blue and amber $ag-primary-color: #2196F3; // blue-500 $ag-accent-color: #FFD740; // amber-A200 // Import the ag-Grid material theme @import '~ag-grid-community/src/styles/ag-theme-material/sass/ag-theme-material';

You can examine the full list of the variables that can be changed in the theme source file.

The recommended way to process your project's Scss files is through webpack, since it provides various loaders that optimize and reduce the final size of the bundle. A working example for Angular 2 based on angular-cli can be found in the ag-grid-material repository.

Change the row height / header height / icon size

The material design guidelines specify the size of the icons, height of the headers and the rows. We recommend keeping them to the default values for "true" material look. However, In case you wish to change the sizing, you should do that both in the grid configuration and by overriding the $ag-grid-size and $ag-icon-size. A working example that showcases this using webpack can be found ag-grid-material GitHub repository.

Integrate with Other Material Component Libraries

You can customize the various UI bits of the grid by providing custom cell renderers or editor components. A working example that integrates Angular Material's input, checkbox, select and datepicker can be found in the ag-grid-material GitHub repository.

Deprecated Themes

The fresh, dark, blue and bootstrap themes were the original themes provided by the grid. They are deprecated and will be removed in the next major release (v23).

Fresh Theme (ag-theme-fresh)

Dark Theme (ag-theme-dark)

Blue Theme (ag-theme-blue)

Bootstrap Theme (ag-theme-bootstrap)

Customizing Themes

The provided themes are built using Sass. This means that you can change the looks of the theme you use using Sass, by overriding the theme variables value and referencing the Sass source files afterwards.

Some of the things you can change in the theme include:

  • Changing the text / header / tool panel foreground and background colors
  • Changing the icons size and color
  • Changing the cell / row spacing*
* If you are going to change the row or header height, you should also modify the respective options in the JavaScript grid configuration. This is a redundant step we are looking into removing in the future.

For a live example, see: Theme Customization Example Repository.

Following is a list of Sass variables, their default values, and a short explanation of their purpose.

Variable Name
Default Value
Description
foreground-opacity
1
The foreground opacity.
secondary-foreground-color-opacity
1
The header font color opacity.
disabled-foreground-color-opacity
0.5
The opacity of the disabled / empty text elements.
icon-color
<no default>
The icon color.
alt-icon-color
<no default>
The secondary icon, used on icons with two colors (eg. checkbox background).
foreground-color
<no default>
The default color of the text.
secondary-foreground-color
<no default>
The header font color.
disabled-foreground-color
<no default>
The color of the disabled / empty text elements.
menu-option-active-color
<no default>
The background color of the context / column menu items when hovered.
input-disabled-background-color
#ebebeb
The color of disabled input field
card-background-color
<no default>
The background color for the context menu and the column menu.
border-color
<no default>
The color used for all borders.
scroll-spacer-border
1px solid border-color
The border that separates the pinned columns from the scrollable area within the horizontal scrollbar
primary-color
<no default>
The main color associated with selected cells and other items (eg. cell border color, sidbar selected tab border).
accent-color
<no default>
The color for the checked checkboxes.
background-color
<no default>
The default background color.
odd-row-background-color
<no default>
The odd row background color.
editor-background-color
<no default>
The background color of cells being edited.
header-background-color
<no default>
The header background color.
header-cell-hover-background-color
$ag-header-background-color
The header background color while hovering
header-cell-moving-background-color
#bebebe
The header background color while being moved.
header-foreground-color
<no default>
The header text color.
header-background-image
<no default>
The header background gradient - you can also refer to an an image with `url(...)`.
panel-background-color
<no default>
The background color of the column menu.
tool-panel-background-color
<no default>
The tool panel background color
chip-background-color
<no default>
The background color of the column labels used in the grouping / pivoting.
range-selection-background-color
<no default>
The background color of the selected cells.
hover-color
<no default>
The background color of the row when hovered.
selected-color
<no default>
The background color of selected rows.
cell-data-changed-color
<no default>
The background color used when the cell flashes when data is changed.
focused-cell-border-color
<no default>
The border color of the focused cell.
tab-background-color
<no default>
The background color of the tab in the column menu
cell-highlight-border
<no default>
The border used to mark cells as being copied.
cell-horizontal-border
<no default>
The border delimiter between cells.
ag-range-selected-color-1
<no default>
The selection background color.
ag-range-selected-color-2
<no default>
The selection background color when it overlaps with another selection (range) 1 level.
ag-range-selected-color-3
<no default>
The selection background color when it overlaps with another selection (range) 2 levels.
ag-range-selected-color-4
<no default>
The selection background color when it overlaps with another selection (range) 3 levels.
value-change-delta-up-color
<no default>
The color used when the cell value increases.
value-change-delta-down-color
<no default>
The color used when the cell value decreases.
value-change-value-highlight-background-color
<no default>
The background color used when the cell value changes.
row-floating-background-color
<no default>
The background color of the pinned rows.
row-stub-background-color
<no default>
The color of row stub background (see: Row Node)
grid-size
4px
The basic unit used for the grid spacing and dimensions. Changing this makes the grid UI more / less compact.
icon-size
12px
The icon width and height (icons are square).
header-height
grid-size * 6 + 1
The header row height - if you change this, you also have to change the value of the `headerHeight` in the grid options. We are looking into removing this redundant step in the future.
row-height
grid-size * 6 + 1
The row height - if you change this, you also have to change the value of the `rowHeight` in the grid options. We are looking into removing this redundant step in the future.
cell-horizontal-padding
grid-size * 3
The cell horizontal padding.
virtual-item-height
grid-size * 5
The height of virtual items (eg. Set Filter items).
header-icon-size
14px
The header icon height.
font-family
'Helvetica Neue', sans-serif
The grid font family.
font-size
14px
The grid font size.
font-weight
400
The grid font weight
secondary-font-family
font-family
The font family used in the header.
secondary-font-size
14px
The header font size.
secondary-font-weight
400
The header font weight.
card-shadow
none
Box shadow value for the context menu and the column menu.
card-radius
0
Border radius for the context menu and the column menu.
row-border-width
0
the row border width.
toolpanel-indent-size
grid-size * icon-size
The indent used for the tool panel hierarchy.
tooltip-background-color
#535353
The tooltip background color.
tooltip-foreground-color
#ffffff
The tooltip foreground color.
tooltip-border-radius
2px
The tooltip boder radius.
tooltip-padding
5px
The tooltip padding.
tooltip-border-width
1px
The tooltip border width.
tooltip-border-style
solid
The tooltip border style.
tooltip-border-color
#ebebeb
The tooltip border color
Variable Name
Default Value
foreground-opacity
0.87
secondary-foreground-color-opacity
0.54
disabled-foreground-color-opacity
0.38
grid-size
4px
icon-size
16px
row-height
grid-size * 7
default-background
#FFFFF;
chrome-background
lighten(flat-clouds, 3)
active
#0091EA
foreground-color
#000000;
border-color
flat-silver
icon-color
flat-gray-4
alt-background
flat-clouds
odd-row-background-color
#fcfdfe
header-cell-moving-background-color
default-background
foreground-color
rgba(foreground-color, foreground-opacity)
secondary-foreground-color
rgba(foreground-color, secondary-foreground-color-opacity)
disabled-foreground-color
rgba(foreground-color, disabled-foreground-color-opacity)
input-disabled-background-color
#ebebeb
primary-color
active
accent-color
active
range-selection-background-color
transparentize(active, 0.8)
ag-range-selected-color-1
opacify(range-selection-background-color, 0.1)
ag-range-selected-color-2
opacify(range-selection-background-color, 0.2)
ag-range-selected-color-3
opacify(range-selection-background-color, 0.3)
ag-range-selected-color-4
opacify(range-selection-background-color, 0.4)
range-selection-highlight-color
active
selected-color
lighten(active, 40)
alt-icon-color
default-background
background-color
default-background
editor-background-color
chrome-background
panel-background-color
chrome-background
tool-panel-background-color
chrome-background
header-background-color
chrome-background
header-foreground-color
secondary-foreground-color
hover-color
alt-background
chip-background-color
darken(alt-background, 5)
row-stub-background-color
inherit
row-floating-background-color
inherit
cell-data-changed-color
#fce4ec
value-change-delta-up-color
#43a047
value-change-delta-down-color
#e53935
value-change-value-highlight-background-color
transparentize(#16A085, 0.5)
header-height
grid-size * 8
virtual-item-height
grid-size * 7
row-border-width
1px
toolpanel-indent-size
$ag-grid-size + $ag-icon-size
row-group-indent-size
$ag-grid-size * 3 + $ag-icon-size
cell-horizontal-padding
grid-size * 3
header-icon-size
14px
border-radius
2px
font-family
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif
font-size
12px
font-weight
400
secondary-font-family
font-family
secondary-font-size
12px
secondary-font-weight
600
tooltip-background-color
lighten($ag-flat-gray-2, 5%)
tooltip-foreground-color
foreground-color
tooltip-border-radius
border-radius
tooltip-border-color
tooltip-foreground-color
Variable Name
Default Value
mat-grey-0 (color accessor)
#ffffff
mat-grey-50 (color accessor)
#fafafa
mat-grey-100 (color accessor)
#f5f5f5
mat-grey-200 (color accessor)
#eeeeee
mat-grey-300 (color accessor)
#e2e2e2
mat-indigo-500 (color accessor)
#3f51b5
mat-pink-A200 (color accessor)
#ff4081
mat-pink-50 (color accessor)
#fce4ec
mat-indigo-50 (color accessor)
#e8eaf6
foreground-opacity
0.87
secondary-foreground-color-opacity
0.54
disabled-foreground-color-opacity
0.38
grid-size
8px
icon-size
18px
header-height
grid-size * 7
row-height
grid-size * 6
row-border-width
1px
toolpanel-indent-size
grid-size + icon-size
row-group-indent-size
grid-size * 3 + icon-size
cell-horizontal-padding
grid-size * 3
virtual-item-height
grid-size * 5
header-icon-size
14px
font-family
"Roboto", sans-serif
font-size
13px
font-weight
400
secondary-font-family
"Roboto", sans-serif
secondary-font-size
12px
secondary-font-weight
700
foreground-color
rgba(#000, foreground-opacity)
secondary-foreground-color
rgba(#000, secondary-foreground-color-opacity)
disabled-foreground-color
rgba(#000, $ag-disabled-foreground-color-opacity)
header-background-color
$ag-background-color
header-cell-hover-background-color
darken($ag-header-background-color, 5%)
header-cell-moving-background-color
$ag-header-cell-hover-background-color
header-foreground-color
$ag-secondary-foreground-color
border-color
mat-indigo-300
primary-color
mat-indigo-500
accent-color
mat-pink-A200
icon-color
#333
background-color
mat-grey-0
editor-background-color
mat-grey-50
panel-background-color
mat-grey-200
tool-panel-background-color
mat-grey-50
chip-background-color
mat-grey-300
range-selection-background-color
mat-indigo-50
range-selection-highlight-color
mat-pink-50
hover-color
mat-grey-50
selected-color
mat-grey-200
cell-data-changed-color
mat-pink-50
card-shadow
0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)
card-radius
2px
value-change-delta-up-color
#43a047
value-change-delta-down-color:
#e53935
value-change-value-highlight-background-color
#00acc1