---
title: "Legacy Themes: Customising Tool Panels"
framework: vue
version: "36.1.0"
---

# Legacy Themes: Customising Tool Panels

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

> **Note**
>
> This page describes the grid's legacy theming system that was the default in 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](https://www.ag-grid.com/vue-data-grid/theming-tool-panels/) or check out the [migration guide](https://www.ag-grid.com/vue-data-grid/theming-migration/).

## Styling the Tool Panel Area

The Tool Panel is a tabbed container. It exposes CSS variables:

```css
.ag-theme-quartz {
    --ag-control-panel-background-color: #cc222244;
    --ag-side-button-selected-background-color: #cc222244;

    --ag-selected-tab-underline-color: deeppink;
    --ag-selected-tab-underline-width: 2px;
    --ag-selected-tab-underline-transition-speed: 0.5s;

    --ag-side-bar-panel-width: 300px;
}
```

#### Tool Panel Area Styling

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-quartz.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberEditorModule,
  NumberFilterModule,
  SideBarDef,
  TextEditorModule,
  Theme,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  FiltersToolPanelModule,
  PivotModule,
  SetFilterModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  NumberEditorModule,
  TextEditorModule,
  NumberFilterModule,
  ClientSideRowModelModule,
  ColumnsToolPanelModule,
  FiltersToolPanelModule,
  ColumnMenuModule,
  ContextMenuModule,
  PivotModule,
  SetFilterModule,
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      class="ag-theme-quartz"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :theme="theme"
      :rowData="rowData"
      :defaultColDef="defaultColDef"
      :sideBar="true"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "athlete", minWidth: 170 },
      { field: "age" },
      { field: "country" },
      { field: "year" },
      { field: "date" },
      { field: "sport" },
      { field: "gold" },
      { field: "silver" },
      { field: "bronze" },
      { field: "total" },
    ]);
    const theme = ref<Theme | "legacy">("legacy");
    const defaultColDef = ref<ColDef>({
      editable: true,
      filter: true,
      enableRowGroup: true,
      enablePivot: true,
      enableValue: true,
    });
    const rowData = ref<IOlympicData[]>(null);

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => (rowData.value = data);

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      theme,
      rowData,
      defaultColDef,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

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

## 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 column indent and the style of the column drop component in the Row Groups area:

```css
.ag-theme-quartz {
    --ag-column-select-indent-size: 40px
}

.ag-theme-quartz .ag-column-drop-cell {
    background-color: purple;
}

.ag-theme-quartz .ag-column-drop-cell .ag-icon {
    color: white;
}

.ag-theme-quartz .ag-column-drop-cell-text {
    color: white;
    font-weight: bold;
}
```

#### Columns Tool Panel

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-quartz.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberEditorModule,
  NumberFilterModule,
  SideBarDef,
  TextEditorModule,
  Theme,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  PivotModule,
  SetFilterModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  NumberEditorModule,
  TextEditorModule,
  NumberFilterModule,
  ClientSideRowModelModule,
  ColumnsToolPanelModule,
  ColumnMenuModule,
  ContextMenuModule,
  PivotModule,
  SetFilterModule,
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      class="ag-theme-quartz"
      @grid-ready="onGridReady"
      :theme="theme"
      :rowData="rowData"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :sideBar="sideBar"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const theme = ref<Theme | "legacy">("legacy");
    const columnDefs = ref<(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 },
        ],
      },
    ]);
    const defaultColDef = ref<ColDef>({
      editable: true,
      filter: true,
    });
    const sideBar = ref<SideBarDef | string | string[] | boolean | null>(
      "columns",
    );
    const rowData = ref<IOlympicData[]>(null);

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => (rowData.value = data);

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      theme,
      rowData,
      columnDefs,
      defaultColDef,
      sideBar,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

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