---
product: "AG Grid"
title: "Theming: Customising Tool Panels"
description: "Angular Data Grid theming: style the Filters Tool Panel and Columns Tool Panel with theme parameters."
framework: angular
version: "36.2.0"
related:
    - title: "Overview"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/theming/"
    - title: "Built-in Themes"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/themes/"
    - title: "Theme Parameters"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/theming-parameters/"
    - title: "Theme Parts"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/theming-parts/"
    - title: "Colors & Dark Mode"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/theming-colors/"
    - title: "Fonts"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/theming-fonts/"
    - title: "Borders"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/theming-borders/"
    - title: "Compactness & Row Height"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/theming-compactness/"
    - title: "Selections"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/theming-selections/"
    - title: "Headers"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/theming-headers/"
    - title: "Icons"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/custom-icons/"
    - title: "Master Detail"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/theming-master-detail/"
    - title: "Inputs & Widgets"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/theming-widgets/"
    - title: "Menus & Popups"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/theming-popups/"
    - title: "Extending with CSS"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/theming-css/"
    - title: "Theme Builder"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/theming-theme-builder/"
    - title: "Distributing Shared Themes"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/theming-distribution/"
    - title: "Migration from v32"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/theming-migration/"
    - title: "Legacy Themes"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/theming-v32/"
llms: "https://www.ag-grid.com/archive/36.2.0/llms.txt"
---

# Theming: Customising Tool Panels

Style the Filters [Tool Panel](https://www.ag-grid.com/archive/36.2.0/angular-data-grid/component-tool-panel/) and [Columns Tool Panel](https://www.ag-grid.com/archive/36.2.0/angular-data-grid/tool-panel-columns/).

## Styling the Sidebar Area

The sidebar is a tabbed container for opening and switching between tool panels. The grid exposes many theme parameters for customising the sidebar and tabbed buttons. For the full list, see the [Sidebar section](https://www.ag-grid.com/archive/36.2.0/angular-data-grid/theming-api/#reference-sidebar) of the parameters reference.

```js
const myTheme = themeQuartz.withParams({
    sideBarBackgroundColor: '#08f3',
    sideButtonBarBackgroundColor: '#fff6',
    sideButtonBarTopPadding: 20,
    sideButtonSelectedUnderlineColor: 'orange',
    sideButtonTextColor: '#0009',
    sideButtonHoverBackgroundColor: '#fffa',
    sideButtonSelectedBackgroundColor: '#08f1',
    sideButtonHoverTextColor: '#000c',
    sideButtonSelectedTextColor: '#000e',
    sideButtonSelectedBorder: false,
});
```

To create effects beyond what is possible with theme parameters, use CSS selectors:

```css
.ag-side-button.ag-selected {
    text-shadow: 0 0 8px #039;
    font-weight: 500;
}
```

#### Tool Panel Area Styling

```ts
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import "./styles.css";
import {
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  SideBarDef,
  Theme,
  enableDevValidations,
  themeQuartz,
} from "ag-grid-community";
import { AllEnterpriseModule } from "ag-grid-enterprise";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([AllEnterpriseModule]);
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [theme]="theme"
    [defaultColDef]="defaultColDef"
    [sideBar]="true"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    {
      field: "athlete",
      minWidth: 170,
      enableRowGroup: true,
      enablePivot: true,
    },
    { field: "age", enableRowGroup: true, enablePivot: true },
    { field: "country", enableRowGroup: true, enablePivot: true },
    { field: "year", enableRowGroup: true, enablePivot: true },
    { field: "date" },
    { field: "sport", enableRowGroup: true, enablePivot: true },
    { field: "gold", enableValue: true },
    { field: "silver", enableValue: true },
    { field: "bronze", enableValue: true },
    { field: "total", enableValue: true },
  ];
  theme: Theme | "legacy" = myTheme;
  defaultColDef: ColDef = {
    editable: true,
    filter: true,
  };
  rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.http
      .get<
        IOlympicData[]
      >("https://www.ag-grid.com/example-assets/olympic-winners.json")
      .subscribe((data) => (this.rowData = data));
  }
}

const myTheme = themeQuartz.withParams({
  sideBarBackgroundColor: "#08f3",
  sideButtonBarBackgroundColor: "#fff6",
  sideButtonBarTopPadding: 20,
  sideButtonSelectedUnderlineColor: "orange",
  sideButtonTextColor: "#0009",
  sideButtonHoverBackgroundColor: "#fffa",
  sideButtonSelectedBackgroundColor: "#08f1",
  sideButtonHoverTextColor: "#000c",
  sideButtonSelectedTextColor: "#000e",
  sideButtonSelectedBorder: false,
});
```

[Live example: Tool Panel Area Styling](https://www.ag-grid.com/archive/36.2.0/examples/theming-tool-panels/tool-panel-tabs/angular/)

## Styling the Columns Tool Panel

The `--ag-column-select-indent-size` CSS Variable sets the indent of each column group within the columns tool panel. For further customisation, use CSS selectors.

This example demonstrates changing the child indent for grouped columns and the style of the column drop component in the Row Groups area:

```js
const myTheme = themeQuartz.withParams({
    columnSelectIndentSize: 40,
    columnDropCellBackgroundColor: 'purple',
    columnDropCellTextColor: 'white',
    columnDropCellDragHandleColor: 'white',
    columnDropCellBorder: { color: 'yellow', style: 'dashed', width: 2 },
});
```

```css
.ag-column-drop-cell {
    box-shadow: 0 0 4px purple;
}
/* The different sections within the columns tool panel use
   flex sizing to adapt to vertical space, use min-height
   and max-height to constrain their heights */
.ag-column-drop-vertical-rowgroup {
    min-height: 120px;
}
.ag-column-drop-vertical-aggregation {
    min-height: 90px;
}
```

#### Columns Tool Panel

```ts
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import "./styles.css";
import {
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  SideBarDef,
  Theme,
  enableDevValidations,
  themeQuartz,
} from "ag-grid-community";
import { AllEnterpriseModule } from "ag-grid-enterprise";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([AllEnterpriseModule]);
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [theme]="theme"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [sideBar]="sideBar"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  theme: Theme | "legacy" = myTheme;
  columnDefs: (ColDef | ColGroupDef)[] = [
    {
      headerName: "Athlete",
      children: [
        {
          field: "athlete",
          minWidth: 170,
          rowGroup: true,
          enableRowGroup: true,
          enablePivot: true,
        },
        {
          field: "age",
          rowGroup: true,
          enableRowGroup: true,
          enablePivot: true,
        },
        { field: "country", enableRowGroup: true, enablePivot: true },
      ],
    },
    {
      headerName: "Event",
      children: [
        { field: "year", enableRowGroup: true, enablePivot: true },
        { field: "date" },
        { field: "sport", enableRowGroup: true, enablePivot: true },
      ],
    },
    {
      headerName: "Medals",
      children: [
        { field: "gold", enableValue: true },
        { field: "silver", enableValue: true },
        { field: "bronze", enableValue: true },
        { field: "total", enableValue: true },
      ],
    },
  ];
  defaultColDef: ColDef = {
    editable: true,
    filter: true,
  };
  sideBar: SideBarDef | string | string[] | boolean | null = "columns";
  rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.http
      .get<
        IOlympicData[]
      >("https://www.ag-grid.com/example-assets/olympic-winners.json")
      .subscribe((data) => (this.rowData = data));
  }
}

const myTheme = themeQuartz.withParams({
  columnSelectIndentSize: 40,
  columnDropCellBackgroundColor: "purple",
  columnDropCellTextColor: "white",
  columnDropCellDragHandleColor: "white",
  columnDropCellBorder: { color: "yellow", style: "dashed", width: 2 },
});
```

[Live example: Columns Tool Panel](https://www.ag-grid.com/archive/36.2.0/examples/theming-tool-panels/column-tool-panel/angular/)