---
product: "AG Grid"
title: "Legacy Themes: Customising Colours & Fonts"
description: "Change the overall colour scheme and appearance of data."
framework: angular
version: "36.2.0"
llms: "https://www.ag-grid.com/archive/36.2.0/llms.txt"
---

# Legacy Themes: Customising Colours & Fonts

Change the overall colour scheme and appearance of data.

> **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/archive/36.2.0/angular-data-grid/theming-colors/) or check out the [migration guide](https://www.ag-grid.com/archive/36.2.0/angular-data-grid/theming-migration/).

The grid exposes many CSS `--ag-*-color` variables that affect the colour of elements. `--ag-font-size` and `--ag-font-family` control the default font for the grid.

## Example

```css
.ag-theme-quartz {
    --ag-foreground-color: rgb(126, 46, 132);
    --ag-background-color: rgb(249, 245, 227);
    --ag-header-foreground-color: rgb(204, 245, 172);
    --ag-header-background-color: rgb(209, 64, 129);
    --ag-odd-row-background-color: rgb(0, 0, 0, 0.03);
    --ag-header-column-resize-handle-color: rgb(126, 46, 132);

    --ag-font-size: 17px;
    --ag-font-family: monospace;
}
```

The above code produces these results:

#### Colour Customisation

```ts
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
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,
  TextEditorModule,
  TextFilterModule,
  Theme,
  enableDevValidations,
} from "ag-grid-community";

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

ModuleRegistry.registerModules([
  NumberEditorModule,
  TextEditorModule,
  TextFilterModule,
  NumberFilterModule,
  ClientSideRowModelModule,
]);
import { IOlympicData } from "./interfaces";

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

[Live example: Colour Customisation](https://www.ag-grid.com/archive/36.2.0/examples/theming-v32-customisation-colours/colour-customisation/angular/)

## Key colour variables

Some of the most important colour variables are listed below. For the full list check the full [CSS variables reference](https://www.ag-grid.com/archive/36.2.0/angular-data-grid/theming-v32-customisation-variables/) - every colour variable ends with `-color`.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `--ag-active-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-alpine-active-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-balham-active-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-material-primary-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-material-accent-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-foreground-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-secondary-foreground-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-data-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-header-foreground-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-header-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-disabled-foreground-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-odd-row-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-row-hover-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-border-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |
| `--ag-row-border-color` | `CSS color (e.g. `red` or `#fff`)` |  |  |  |

> **Note**
>
> There are a lot of colour variables - the easiest way to find the variable that colours a specific element is often to inspect the element in your browser's developer tools and check the value of its `color` or `background-color` properties.

## Colour blending

The Quartz theme automatically generates semi-transparent versions of colour variables based on the ones that you define. For example if you set `--ag-active-color` to `red` then `--ag-range-selection-background-color` will default to a 20% opaque red.

If you're on a theme other than Quartz, you can achieve this effect yourself using the CSS [color-mix()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix) function. Here is how you would set the range selection background to a 20% opaque red when using the Alpine theme:

```css
.ag-theme-alpine {
    --ag-range-selection-background-color: color-mix(in srgb, transparent, red 20%);
}
```