---
title: "Legacy Themes: Customising Selections"
framework: vue
version: "36.1.0"
---

# Legacy Themes: Customising Selections

Control how selected rows and cells appear.

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

## Row Selections

When [row selection](https://www.ag-grid.com/vue-data-grid/row-selection/) is enabled, you can set the color of selected rows using `--ag-selected-row-background-color`. If your grid uses alternating row colours we recommend setting this to a semi-transparent colour so that the alternating row colours are visible below it.

```css
.ag-theme-quartz {
    /* bright green, 10% opacity */
    --ag-selected-row-background-color: rgb(0, 255, 0, 0.1);
}
```

#### Custom Row Selection Colour

```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,
  RowSelectionModule,
  RowSelectionOptions,
  TextEditorModule,
  TextFilterModule,
  Theme,
  enableDevValidations,
} from "ag-grid-community";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  NumberEditorModule,
  TextEditorModule,
  TextFilterModule,
  NumberFilterModule,
  RowSelectionModule,
  ClientSideRowModelModule,
]);

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"
      :rowSelection="rowSelection"
      :defaultColDef="defaultColDef"
      :rowData="rowData"></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 rowSelection = ref<RowSelectionOptions | "single" | "multiple">({
      mode: "multiRow",
    });
    const defaultColDef = ref<ColDef>({
      editable: true,
      filter: 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,
      rowSelection,
      defaultColDef,
      rowData,
      onGridReady,
    };
  },
});

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

[Live example: Custom Row Selection Colour](https://www.ag-grid.com/examples/theming-v32-customisation-selections/custom-row-selection-color/vue3)

## Cell Selections

[Cell selections](https://www.ag-grid.com/vue-data-grid/cell-selection/) can be created by clicking and dragging on the grid. Multiple overlapping range selections can be made by holding `^ Ctrl` while creating a new range outside the existing range. Copying from a selection will briefly highlight the range of cells (`^ Ctrl`+`C`). There are several variables to control the selection and highlight style:

```css
.ag-theme-quartz {
    --ag-range-selection-border-color: rgb(193, 0, 97);
    --ag-range-selection-border-style: dashed;
    --ag-range-selection-background-color: rgb(255, 0, 128, 0.1);
    /* these next 3 variables control the background colour when 2, 3 or 4+ ranges overlap,
       and should have progressively greater opacity to look realistic - see the docs below
       for the correct formulas to use */
    --ag-range-selection-background-color-2: rgb(255, 0, 128, 0.19);
    --ag-range-selection-background-color-3: rgb(255, 0, 128, 0.27);
    --ag-range-selection-background-color-4: rgb(255, 0, 128, 0.34);

    --ag-range-selection-highlight-color: rgb(60, 188, 0, 0.3);
}
```

#### Custom Range Selection Style

```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 {
  CellSelectionOptions,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  Theme,
  enableDevValidations,
} from "ag-grid-community";
import {
  CellSelectionModule,
  ClipboardModule,
  ColumnMenuModule,
  ContextMenuModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  ClipboardModule,
  ColumnMenuModule,
  ContextMenuModule,
  CellSelectionModule,
]);

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"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :cellSelection="true"
      :rowData="rowData"></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[]>([
      { field: "athlete", minWidth: 150 },
      { field: "age", maxWidth: 90 },
      { field: "country", minWidth: 150 },
      { field: "year", maxWidth: 90 },
      { field: "date", minWidth: 150 },
      { field: "sport", minWidth: 150 },
      { field: "gold" },
      { field: "silver" },
      { field: "bronze" },
      { field: "total" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
    });
    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,
      columnDefs,
      defaultColDef,
      rowData,
      onGridReady,
    };
  },
});

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

[Live example: Custom Range Selection Style](https://www.ag-grid.com/examples/theming-v32-customisation-selections/custom-range-selection-style/vue3)

### Cell Selection CSS Variables

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `--ag-range-selection-border-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Colour to draw around selected cell ranges |
| `--ag-range-selection-border-style` | `a CSS border style (e.g. `dotted`, `solid` or `none`)` |  |  | Border style for range selections, e.g. `solid` or `dashed`. Do not set to `none`, if you need to hide the border set the color to transparent |
| `--ag-range-selection-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Background colour of selected cell ranges. |
| `--ag-range-selection-background-color-2` | `CSS color (e.g. `red` or `#fff`)` |  |  | Background-color when 2 selected ranges overlap. Hint: for a realistic appearance of multiple semi-transparent colours overlaying, set the opacity to 1-((1-X)^2) where X is the opacity of --ag-range-selection-background-color |
| `--ag-range-selection-background-color-3` | `CSS color (e.g. `red` or `#fff`)` |  |  | Background-color when 3 selected ranges overlap. Hint: for a realistic appearance of multiple semi-transparent colours overlaying, set the opacity to 1-((1-X)^3) where X is the opacity of --ag-range-selection-background-color |
| `--ag-range-selection-background-color-4` | `CSS color (e.g. `red` or `#fff`)` |  |  | Background-color when 4 or more selected ranges overlap. Hint: for a realistic appearance of multiple semi-transparent colours overlaying, set the opacity to 1-((1-X)^4) where X is the opacity of --ag-range-selection-background-color |
| `--ag-range-selection-highlight-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Background colour to briefly apply to a cell range when it is copied from or pasted into |
| `--ag-range-selection-chart-category-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Background colour for cells that provide categories to the current range chart |
| `--ag-range-selection-chart-background-color` | `CSS color (e.g. `red` or `#fff`)` |  |  | Background colour for cells that provide data to the current range chart |