Themes

Theming allows you to configure the design elements of your grids to align with the design of your app.
Through theming you can customize colors, borders, spacing, and other design elements.

AG Grid 33 introduced a new Theming API that is now the default theming method. In dash-ag-grid, themes are applied using the theme property in dashGridOptions. See the Migration Guide for details on migrating from legacy theming.

Built-in Themes

The grid comes with four built-in themes.

Theme	Description
`themeQuartz`	High contrast and generous padding (default theme).
`themeAlpine`	Clean, professional theme.
`themeBalham`	A traditional theme modelled after a spreadsheet application.
`themeMaterial`	A theme designed according to Google’s Material Design system.

Applying a Theme

The default theme is Quartz. To use a different theme, set the theme property in dashGridOptions:

dag.AgGrid(
    columnDefs=columnDefs,
    rowData=rowData,
    dashGridOptions={"theme": "themeAlpine"},
)

Customizing Themes with Parameters

Theme parameters can be used to customize a built-in theme. Use withParams() on a base theme to set the parameters you want to change. Pass the theme with params as a string to dashGridOptions.themes.function:

dashGridOptions={
    "theme": {"function": "themeBalham.withParams({ accentColor: 'red' })"}
}

Some available color parameters are:
- backgroundColor - Background color of the grid.
- foregroundColor - Default color for neutral UI elements. Most text, borders and backgrounds are defined as semi-transparent versions of this color, resulting in a blend between the background and foreground colors.
- accentColor - The ‘brand color’ for the grid, used wherever a non-neutral color is required. Selections, focus outlines and checkboxes use the accent color by default.
- headerTextColor - Color of text in the header.
- headerBackgroundColor - Background color for header.
- oddRowBackgroundColor - Alternative background color applied to every other row.

Here’s an example using multiple parameters:

dashGridOptions={
    "theme": {
        "function": "themeQuartz.withParams({backgroundColor: 'rgb(249, 245, 227)', foregroundColor: 'rgb(126, 46, 132)', headerTextColor: 'rgb(204, 245, 172)', headerBackgroundColor: 'rgb(209, 64, 129)', oddRowBackgroundColor: 'rgb(0, 0, 0, 0.03)', headerColumnResizeHandleColor: 'rgb(126, 46, 132)'})"
    }
}

For more on theme parameters, see Theme Parameters and Theming Colors in the AG Grid docs. You can also explore available parameters in the AG Grid Theme Builder.

Using the AG Grid Theme Builder

The AG Grid Theme Builder lets you visually customize a theme and generates code for it. However, the generated code uses JavaScript imports that don’t work directly in Dash. Here’s how to translate Theme Builder output to Dash AG Grid.

If the Theme Builder generates code with withParams() like this:

import { themeQuartz } from 'ag-grid-community';

const myTheme = themeQuartz.withParams({ accentColor: 'red', headerTextColor: 'white' });

Translate it to Dash AG Grid by using dashGridOptions.theme.function directly:

dashGridOptions={
    "theme": {"function": "themeQuartz.withParams({ accentColor: 'red', headerTextColor: 'white' })"}
}

If the generated code includes withPart(), you need to define a JavaScript function in dashAgGridFunctions.js. Anything the Theme Builder tells you to import (like iconSetQuartzBold) should be accessed via the agGrid argument (e.g., agGrid.iconSetQuartzBold).

import { themeQuartz, iconSetQuartzBold } from 'ag-grid-community';

const myTheme = themeQuartz.withPart(iconSetQuartzBold);

Becomes:

var dagfuncs = (window.dashAgGridFunctions = window.dashAgGridFunctions || {});

dagfuncs.myTheme = (theme, agGrid) => {
    return theme.withPart(agGrid.createPart(agGrid.iconSetQuartzBold));
}

Then reference it in Python:

dashGridOptions={
    "theme": {"function": "myTheme(themeQuartz, agGrid)"}
}

You can also chain withParams() and withPart() together:

dagfuncs.myTheme = (theme, agGrid) => {
    return theme
        .withParams({ accentColor: 'red', headerTextColor: 'white' })
        .withPart(agGrid.createPart(agGrid.iconSetQuartzBold));
}

Customizing Themes Using Theme Parts

Theme parts allow you to mix and match parts from different themes.

Configuring Theme Parts

To use theme parts in Dash AG Grid:

Define a JavaScript function in dashAgGridFunctions.js that accepts theme and agGrid as parameters. Within the function, use agGrid.createPart() to convert each part into the type that withPart() expects and return the new theme:
```javascript
var dagfuncs = (window.dashAgGridFunctions = window.dashAgGridFunctions || {});

dagfuncs.myTheme = (theme, agGrid) => {
return theme
.withPart(agGrid.createPart(agGrid.iconSetQuartzBold))
.withPart(agGrid.createPart(agGrid.colorSchemeLight));
}
```
In dashGridOptions.theme.function, pass a string that calls the function with the base theme and agGrid as parameters:
python dashGridOptions={ "theme": {"function": "myTheme(themeQuartz, agGrid)"} }

agGrid grants you access to objects from the AG Grid community library, making it easier to create custom themes and configurations.

Here’s the full Python app code:

import dash_ag_grid as dag
from dash import Dash, html
import pandas as pd

app = Dash()

df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv"
)

columnDefs = [
    {"field": "athlete", "filter": True},
    {"field": "country"},
    {"field": "sport"},
    {"field": "year"},
]

app.layout = html.Div(
    dag.AgGrid(
        id="theme-color-scheme",
        rowData=df.to_dict("records"),
        columnDefs=columnDefs,
        columnSize="sizeToFit",
        dashGridOptions={
            "theme": {"function": "myTheme(themeQuartz, agGrid)"}
        },
    )
)

if __name__ == "__main__":
    app.run(debug=True)

For more parts and options, see Theming Parts and Theming Colors in the AG Grid docs.

Note: In the AG Grid (React/JavaScript) docs, theme parts are added using theme.withPart(part) with imported modules. In Dash AG Grid, use agGrid.createPart() as shown above since you can’t import JavaScript modules directly.

Using Legacy Themes

Prior to v33, grids were themed by applying a CSS class to them, and AG Grid included default themes that could be easily applied. dash_ag_grid v33 includes these legacy themes, if you don’t want to use the new Themes API. To use them, add them to your app’s external stylesheets:

...
import dash_ag_grid as dag

app = Dash(external_stylesheets=[dag.themes.BASE, dag.themes.ALPINE])
...

And then set the theme parameter on dashGridOptions on the grid to "legacy":

...
dag.AgGrid(
    columnDefs=[
        {
            "field": x,
        }
        for x in df.columns
    ],
    rowData=df.to_dict("records"),
    # Sets theme to use legacy themes
    dashGridOptions={"theme": "legacy"},
    # Defines the theme to use
    className="ag-theme-alpine-dark",
)
...

Here’s a complete example:

from dash import Dash, html
import dash_ag_grid as dag
import plotly.express as px

app = Dash(external_stylesheets=[dag.themes.BASE, dag.themes.ALPINE])

df = px.data.gapminder()
df = df[["country", "continent", "year", "pop"]]

app.layout = html.Div(
    [
        dag.AgGrid(
            id="legacy-themes-example",
            columnDefs=[
                {
                    "field": x,
                }
                for x in df.columns
            ],
            rowData=df.to_dict("records"),
            columnSize="sizeToFit",
            dashGridOptions={"theme": "legacy"},
            className="ag-theme-alpine-dark",
        )
    ]
)

if __name__ == "__main__":
    app.run(debug=True, port=8051)

Included Legacy Themes

Legacy theming includes the following stylesheets:

dag.themes.ALPINE - Alpine theme
dag.themes.QUARTZ - Quartz theme
dag.themes.BALHAM - Balham theme
dag.themes.MATERIAL - Material theme
dag.themes.BASE - Base theme required for all themes

To use a theme, load the required stylesheets in the Dash app constructor:

app = Dash(external_stylesheets=[dag.themes.BASE, dag.themes.BALHAM])

And then on the grid, set className to the theme or version of the theme you want. Some themes support a light and dark version:

className="ag-theme-balham"

Available options for className:

Quartz:
- ag-theme-quartz
- ag-theme-quartz-dark

Alpine:
- ag-theme-alpine
- ag-theme-alpine-dark

Balham:
- ag-theme-balham
- ag-theme-balham-dark

Material:
- ag-theme-material

Customizing Legacy Themes with CSS Variables

Customize legacy themes with CSS variables. Add the following to a .css file in your app’s assets folder to customize the background color of the grid. Note that it’s necessary to use !important because the .css files in the /assets folder are loaded before the grid’s theme:

/* set the background color of many elements across the grid */
.ag-theme-alpine {
    --ag-background-color: #ddd !important;
}

--ag-background-color is one of many variables accepted by the grid. For a complete list, see Global Style Customisation in the AG Grid docs.

Note: See Adding CSS & JS for details on how Dash loads assets.

Creating a Class to Use with a Theme

To create a reusable set of design customizations that can be shared between projects, you can use a CSS class that is applied in addition to the theme you’re modifying.

The grid wrapper element should specify both the class name of the theme you’re modifying and the name of the custom theme. Because Dash loads your custom theme before the base theme, it’s necessary to define it the following way in the .css file in the /assets folder:

.ag-theme-alpine.ag-theme-acmecorp {
    --ag-odd-row-background-color: #aaa;
}

Then to use it in the app:

dag.AgGrid(
    className="ag-theme-alpine ag-theme-acmecorp",
    # other props
)