---
title: "Theme Parts"
framework: react
version: "36.1.0"
---

# Theme Parts

Parts contain the CSS styles for a single feature like icons or text inputs.

Using parts you can, for example, select a text input style that matches you application, or disable our provided text input styles so that you can write your own.

## Configuring Theme Parts

To add a part to a theme, call the `theme.withPart(...)` method which returns a new theme using that part. A theme can only have one part for a given feature, so for example because all colour scheme parts have `feature: "colorScheme"`, adding a new colour scheme to a theme will remove any existing part.

```js
import { themeQuartz, colorSchemeDark, iconSetMaterial } from 'ag-grid-community';

// withPart() returns a new theme and calls can be chained
const myTheme = themeQuartz
    .withPart(iconSetMaterial)
    .withPart(colorSchemeDark);
```

This example demonstrates mixing and matching any built-in theme, icon set, and colour scheme:

#### Configuring Theme Parts

```tsx
'use client';
import React, { StrictMode, useMemo, useState } from "react";
import { createRoot } from "react-dom/client";

import {
  colorSchemeDark,
  colorSchemeDarkBlue,
  colorSchemeDarkWarm,
  colorSchemeLight,
  colorSchemeLightCold,
  colorSchemeLightWarm,
  colorSchemeVariable,
  iconSetAlpine,
  iconSetMaterial,
  iconSetQuartzBold,
  iconSetQuartzLight,
  iconSetQuartzRegular,
  themeAlpine,
  themeBalham,
  themeMaterial,
  themeQuartz,
} from "ag-grid-community";
import { AllEnterpriseModule } from "ag-grid-enterprise";
import { AgGridProvider, AgGridReact } from "ag-grid-react";

const baseThemes = [
  { id: "themeQuartz", value: themeQuartz },
  { id: "themeBalham", value: themeBalham },
  { id: "themeAlpine", value: themeAlpine },
  { id: "themeMaterial", value: themeMaterial },
];

const colorSchemes = [
  { id: "(unchanged)", value: null },
  { id: "colorSchemeLight", value: colorSchemeLight },
  { id: "colorSchemeLightCold", value: colorSchemeLightCold },
  { id: "colorSchemeLightWarm", value: colorSchemeLightWarm },
  { id: "colorSchemeDark", value: colorSchemeDark },
  { id: "colorSchemeDarkWarm", value: colorSchemeDarkWarm },
  { id: "colorSchemeDarkBlue", value: colorSchemeDarkBlue },
  { id: "colorSchemeVariable", value: colorSchemeVariable },
];

const iconSets = [
  { id: "(unchanged)", value: null },
  { id: "iconSetQuartzLight", value: iconSetQuartzLight },
  { id: "iconSetQuartzRegular", value: iconSetQuartzRegular },
  { id: "iconSetQuartzBold", value: iconSetQuartzBold },
  { id: "iconSetAlpine", value: iconSetAlpine },
  { id: "iconSetMaterial", value: iconSetMaterial },
];

const GridExample = () => {
  const [baseTheme, setBaseTheme] = useState(baseThemes[0]);
  const [colorScheme, setColorScheme] = useState(colorSchemes[0]);
  const [iconSet, setIconSet] = useState(iconSets[0]);

  const theme = useMemo(() => {
    let theme = baseTheme.value;
    if (colorScheme.value) {
      theme = theme.withPart(colorScheme.value);
    }
    if (iconSet.value) {
      theme = theme.withPart(iconSet.value);
    }
    return theme;
  }, [baseTheme, colorScheme, iconSet]);

  return (
    <AgGridProvider modules={[AllEnterpriseModule]}>
      <div style={{ height: "100%", display: "flex", flexDirection: "column" }}>
        <p style={{ flex: 0 }}>
          Theme:{" "}
          <PartSelector
            options={baseThemes}
            value={baseTheme}
            setValue={setBaseTheme}
          />
          Icons:{" "}
          <PartSelector
            options={iconSets}
            value={iconSet}
            setValue={setIconSet}
          />
          Color scheme:{" "}
          <PartSelector
            options={colorSchemes}
            value={colorScheme}
            setValue={setColorScheme}
          />
        </p>
        <div style={{ flex: 1 }}>
          <AgGridReact
            theme={theme}
            columnDefs={columnDefs}
            rowData={rowData}
            defaultColDef={defaultColDef}
            sideBar
          />
        </div>
      </div>
    </AgGridProvider>
  );
};

type PartSelectorProps<T extends { id: string } | null> = {
  options: T[];
  value: T;
  setValue: (value: T) => void;
};

const PartSelector = <T extends { id: string }>({
  options,
  value,
  setValue,
}: PartSelectorProps<T>) => (
  <select
    onChange={(e) =>
      setValue(options.find((t) => t?.id === e.currentTarget.value)! || null)
    }
    style={{ marginRight: 16 }}
    value={value?.id}
  >
    {options.map((option, i) => (
      <option key={i}>{option.id}</option>
    ))}
  </select>
);

const rowData: any[] = (() => {
  const rowData: any[] = [];
  for (let i = 0; i < 10; i++) {
    rowData.push({ make: "Toyota", model: "Celica", price: 35000 + i * 1000 });
    rowData.push({ make: "Ford", model: "Mondeo", price: 32000 + i * 1000 });
    rowData.push({
      make: "Porsche",
      model: "Boxster",
      price: 72000 + i * 1000,
    });
  }
  return rowData;
})();

const columnDefs = [{ field: "make" }, { field: "model" }, { field: "price" }];

const defaultColDef = {
  editable: true,
  flex: 1,
  minWidth: 100,
  filter: true,
};

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <GridExample />
  </StrictMode>,
);
```

[Live example: Configuring Theme Parts](https://www.ag-grid.com/examples/theming-parts/configuring-theme-parts/reactFunctionalTs)

## Parts Reference

The following parts are available:

- `colorScheme` feature:
  - `colorSchemeVariable` - the default colour scheme for all our [built-in themes](https://www.ag-grid.com/react-data-grid/themes/#built-in-themes). By default it appears light, but can be adjusted using [theme modes](https://www.ag-grid.com/react-data-grid/theming-colors/#theme-modes).
  - `colorSchemeLight` - neutral light scheme
  - `colorSchemeLightCold` - light scheme with subtle cold tint
  - `colorSchemeLightWarm` - light scheme with subtle warm tint
  - `colorSchemeDark` - neutral dark scheme
  - `colorSchemeDarkBlue` - our preferred dark scheme used on this website
  - `colorSchemeDarkWarm` - dark scheme with subtle warm tint
- `iconSet` feature:
  - `iconSetQuartz` - our default icon set
    - `iconSetQuartz({strokeWidth: number})` you can call iconSetQuartz as a function to provide a custom stroke width in pixels (the default is 1.5)
    - `iconSetQuartzLight` and `iconSetQuartzBold` preset lighter and bolder versions of the Quartz icons with 1px and 2px stroke widths respectively.
  - `iconSetMaterial` - the Material Design icon set
  - `iconSetAlpine` - the icon set used by the Alpine theme
  - `iconSetBalham` - the icon set used by the Balham theme
- `buttonStyle` feature:
  - `buttonStyleBase` - unstyled buttons with many parameters to configure their appearance
  - `buttonStyleQuartz` - buttons styled as per the Quartz theme
  - `buttonStyleAlpine` - buttons styled as per the Alpine theme
  - `buttonStyleBalham` - buttons styled as per the Balham theme
- `columnDropStyle` feature - controls the styling of column drop zone in the [columns tool panel](https://www.ag-grid.com/react-data-grid/tool-panel-columns/):
  - `columnDropStylePlain` - undecorated drop zone as used by Balham and Material themes
  - `columnDropStyleBordered` - drop zone with a dashed border around it as used by the Quartz and Alpine themes.
- `checkboxStyle` feature:
  - `checkboxStyleDefault` - checkbox style used by our themes. There is only one style provided which is configurable through parameters. It being a part allows you to replace it with your own checkbox styles if desired.
- `inputStyle` feature:
  - `inputStyleBase` - unstyled inputs with many parameters to configure their appearance
  - `inputStyleBordered` - inputs with a border around them
  - `inputStyleUnderlined` - inputs with a line underneath them as used in Material Design
- `tabStyle` feature:
  - `tabStyleBase` - unstyled tabs with many parameters to configure their appearance
  - `tabStyleQuartz` - tabs styled as per the Quartz theme
  - `tabStyleMaterial` - tabs styled as per the Material theme
  - `tabStyleAlpine` - tabs styled as per the Alpine theme
  - `tabStyleRolodex` - tabs designed to imitate paper cards, as used by the Balham theme
- `styleMaterial` feature (used by the Material theme):
  - `styleMaterial` - Adds the `primaryColor` parameter defined by [Material Design v2](https://m2.material.io/) and uses this colour instead of the `accentColor` for most coloured elements. `accentColor` is still used for checked checkboxes and to highlight active filters. This part also applies some adjustments to appearance of elements to match the Material Design specification, e.g. making all button text uppercase.

## Removing a Part

To remove a part from a theme, call `theme.withoutPart(featureName)`, which returns a new theme without the specified part:

```js
const myCustomTheme = themeQuartz.withoutPart('checkboxStyle');
```

After removing the built-in part, this example uses CSS in a separate style sheet to style the checkboxes:

#### Configuring Theme Parts

```tsx
"use client";

import React, {
  useCallback,
  useMemo,
  useRef,
  useState,
  StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact, AgGridProvider } from "ag-grid-react";
import "./style.css";
import "./style.css";
import {
  ColDef,
  ColGroupDef,
  GridOptions,
  GridState,
  ModuleRegistry,
  RowSelectionOptions,
  Theme,
  enableDevValidations,
  themeQuartz,
} from "ag-grid-community";
import { AllEnterpriseModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

const modules = [AllEnterpriseModule];

const myCustomTheme = themeQuartz.withoutPart("checkboxStyle");

const GridExample = () => {
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState<IOlympicData[]>(
    (() => {
      const rowData: any[] = [];
      for (let i = 0; i < 10; i++) {
        rowData.push({
          make: "Toyota",
          model: "Celica",
          price: 35000 + i * 1000,
        });
        rowData.push({
          make: "Ford",
          model: "Mondeo",
          price: 32000 + i * 1000,
        });
        rowData.push({
          make: "Porsche",
          model: "Boxster",
          price: 72000 + i * 1000,
        });
      }
      return rowData;
    })(),
  );
  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    { field: "make" },
    { field: "model" },
    { field: "price" },
  ]);
  const theme = useMemo<Theme | "legacy">(() => {
    return myCustomTheme;
  }, []);
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      editable: true,
      flex: 1,
      minWidth: 100,
      filter: true,
    };
  }, []);
  const initialState = useMemo<GridState>(() => {
    return {
      rowSelection: ["1", "2", "3"],
    };
  }, []);
  const rowSelection = useMemo<
    RowSelectionOptions | "single" | "multiple"
  >(() => {
    return { mode: "multiRow", checkboxes: true };
  }, []);

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div style={gridStyle}>
          <AgGridReact<IOlympicData>
            rowData={rowData}
            columnDefs={columnDefs}
            theme={theme}
            defaultColDef={defaultColDef}
            initialState={initialState}
            rowSelection={rowSelection}
          />
        </div>
      </div>
    </AgGridProvider>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <GridExample />
  </StrictMode>,
);
```

[Live example: Configuring Theme Parts](https://www.ag-grid.com/examples/theming-parts/removing-parts/reactFunctionalTs)

The above example uses `theme.withoutPart("checkboxStyle")` to disable the default checkbox styles and adds its own checkbox styles in the application style sheet. This is the simplest way of changing the appearance of the grid when you are working on a single application.

## Creating Your Own Parts

You can create your own theme parts to use in your application. This is useful for organisations with multiple apps that share common styles or a design system, see [Distributing Shared Themes & Parts](https://www.ag-grid.com/react-data-grid/theming-distribution/#creating-your-own-parts).