Balham Design Theme

The Balham theme, available from version 17.0 onwards, is the default theme of ag-Grid. It comes in two versions, light and dark.

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

To use the theme, add ag-theme-balham or ag-theme-balham-dark CSS class to the DIV element on which the ag-Grid instance is instantiated.

The following is an example of the angular version of ag-Grid with the balham theme:

<ag-grid-angular class="ag-theme-balham"></ag-grid-angular> <ag-grid-angular class="ag-theme-balham-dark"></ag-grid-angular>

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 '$active' that determines the color of the selected checkboxes, selected rows and icons in the column menu.

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

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.

The ag grid icons path should be re-adjusted when importing the scss file. This is a common problem, described in the Sass(scss) loader project. The theme exposes the $ag-icons-path variable to address that. The customize theme sample repo in github demonstrates how to override the variable.

Change the Theme Icons

Replace the Entire Set

The easiest way to replace the entire icon set is to change the $ag-icons-path Scss variable to point to a directory with your set of icons. The icons should be 16x16px sized SVG files. You can check the full list in the GitHub repository.

Change Individual Icons

You can also change individual icons by overriding the background images for the respective CSS selector. The following code snippet overrides the pin icon used in the drag hint when reordering columns:

/* * The override should be placed after the import of the theme. * Alternatively, you can aso increase the selector's specifcity */ .ag-theme-balham .ag-icon-pin { background-image: url('path/to/my-pin-icon.svg'); }

The icon classes follow the .ag-icon-{icon-file-name} convention.