Themes

The grid is styled with CSS, and a theme is simply a CSS class that applies styles to the grid. Most users choose a
provided theme and then customize it to meet their needs. It is also possible to create your own themes.

Provided Themes

The grid comes with several provided themes which act as a great starting point for any application-specific
customizations.

See a live demo of each theme in the AG Grid documentation.

The ‘auto’ versions of each theme use the prefers-color-scheme CSS media feature to switch between dark and light variants depending on whether the user has enabled dark mode on their operating system.

Quartz

• ag-theme-quartz
• ag-theme-quartz-dark
• ag-theme-quartz-auto-dark

Modern looking themes with high contrast, and generous padding.

Recommendation: This theme was added in AG Grid V 31. It is the recommended grid theme and an excellent choice
for most applications.

To apply this theme, add the theme name to the className prop:

dag.AgGrid(           
    columnDefs=columnDefs,
    rowData=rowData,
    className="ag-theme-quartz",    
)

Alpine

• ag-theme-alpine
• ag-theme-alpine-dark
• ag-theme-alpine-auto-dark

Recommendation: Alpine was the default theme before Quartz was released. Alpine is the default theme in Dash AG Grid. If
you don’t specify a theme in the className prop, the grid will have the ag-theme-alpine theme applied.

Balham

• ag-theme-balham
• ag-theme-balham-dark
• ag-theme-balham-auto-dark

Themes for professional data-heavy applications

Recommendation: Balham was the recommended theme before Alpine was developed. It is still an excellent choice for
applications that need to fit more data onto each page.

Material

• ag-theme-material

A theme designed according to the Google Material Language Specs.

Recommendation: This theme looks great for simple applications with lots of white space, and is the obvious choice
if the rest of your application follows the Google Material Design spec. However, the Material spec doesn’t cater for
advanced grid features such as grouped columns and tool panels. If your application uses these features, consider using
ag-theme-alpine instead.

Applying a Theme to an App

All the themes are loaded for you by the dash-ag-grid component. To use a theme, add the theme to the className
prop in the component or a html.Div or other element that contains your grid. The following is an example of using the
Alpine dark theme:

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

Note that in Dash, the default is className="ag-theme-alpine", so it’s not necessary to set this every time. For
example:

dag.AgGrid(
    # No need to set the className since this is the default:
    # className="ag-theme-alpine",
    # other props
)

However, if you add other class names, it’s necessary to include the theme, even when you use the default theme.
And remember to include the theme if you update the className prop in a callback too!

dag.AgGrid(
    # always include the theme when adding other classes:
    className="ag-theme-alpine m-4",
    # other props
)

The grid must always have a theme class set on its container, whether this is a provided theme or your own. The
default is className="ag-theme-alpine"

Loading CSS Files

For the CSS to work as expected, the stylesheets need to be added in the correct order. However, Dash loads
the stylesheets in a certain way. Here’s the order:

1. Files included as external stylesheets in the app constructor app=Dash(__name__, external_stylesheets=[])

2. .css files in the /assets folder, in alphanumerical order by filename

3. The grid’s stylesheets when you import dash_ag_grid

It’s important to keep this in mind when modifying or creating your own themes for dash-ag-grid. For more information,
on adding .css and .js files with Dash, see Adding CSS & JS.

Customizing the Theme

You can modify the theme by making global changes or creating a class and combining it with the theme.

Global Changes

To change the theme globally, you can make changes to the theme like the snippet below.
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;
}

/* change the font style of a single UI component */
.ag-theme-alpine .ag-header-cell-label {
    font-style: italic !important;
}

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. Since with Dash, your custom theme is loaded 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
)

Creating Your Own Theme

The majority of users select a provided theme and make customizations using CSS. If your chosen provided theme has
elements that you don’t want, you will need to add CSS rules to remove them. If your desired look and feel is very
different from the provided theme, at some point it becomes easier to start from scratch. To do this, you can define
your own theme.

A theme is simply a CSS class name matching the pattern ag-theme-*, along with CSS rules that target this class name.

Ensure that grid .css is file is located in the /assets folder and/or is loaded as an external_stylesheet. Choose
a theme name and apply it to the grid:

className = "ag-theme-custom-theme"

That’s it! You’ve created a theme. You haven’t added any styles to it so what you will see is a nearly blank slate -
basic customizable borders and padding but no opinionated design elements. You can then add customizations using CSS:

.ag-theme-custom-theme {
    /* customise with CSS variables */
    --ag-grid-size: 8px;
    --ag-border-color: red;
}

.ag-theme-custom-theme .ag-header {
    /* or with CSS selectors targeting grid DOM elements */
    font-style: italic;
}

CSS Variable Reference

• CSS variables
  in the AG Grid docs.

• Tips on using custom CSS with the grid in
  the Advanced CSS
  section of the AG Grid docs.

• Details of the CSS Variables, go to the link as described below:

<a href="https://cdn.jsdelivr.net/npm/ag-grid-community@&lt;ag&gt;/styles/ag-grid.css"">https://cdn.jsdelivr.net/npm/ag-grid-community@&lt;ag&gt;/styles/ag-grid.css"</a>

For example, if you are using dash-ag-grid==31.0.0, it uses ag-grid 31.0.3
<a href="https://cdn.jsdelivr.net/npm/ag-grid-community@31.0.3/styles/ag-grid.css">https://cdn.jsdelivr.net/npm/ag-grid-community@31.0.3/styles/ag-grid.css</a>

Custom Alpine Theme

The following example shows a customized version of the Alpine theme. To use it, add the following to a .css file in
your app’s assets folder:

.ag-theme-alpine.ag-theme-busybee {
    --ag-odd-row-background-color: #F7CE87;
    --ag-header-background-color: silver;
    --ag-header-cell-hover-background-color: #c7c4bf;
}


.ag-theme-alpine.ag-theme-busybee .ag-pinned-left-cols-container, .ag-theme-busybee .ag-pinned-right-cols-container {
    --ag-odd-row-background-color: rgb(215, 215, 215);
    --ag-background-color: rgb(230, 230, 230);
}

Custom Bootstrap Theme

The Bootstrap theme that was available className="ag-theme-bootstrap" was deprecated and removed as of dash-ag-grid V31.
If you are using dash-bootstrap-components, you can create a custom theme that will style the grid based on your Bootstrap stylesheet.

This one is based on the Alpine theme and styles the grid with fonts and accent colors based on your selected theme.