Balham Theme

Professional theme with clear visual hierarchy

The Balham theme provides a professional appearance with clear visual hierarchy and good contrast.

Installation

Import the Balham theme stylesheet:

import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-balham.css';

Usage

Apply the ag-theme-balham class to your grid container:

<div id="myGrid" class="ag-theme-balham" style="height: 500px;"></div>

Dark Mode

Use the dark variant with the ag-theme-balham-dark class:

<div id="myGrid" class="ag-theme-balham-dark" style="height: 500px;"></div>

Customization

.ag-theme-balham {
  --ag-foreground-color: #000;
  --ag-background-color: #fff;
  --ag-header-background-color: #f5f7f7;
  --ag-border-color: #bdc3c7;
}