Dash AG Grid with Mantine Theme

[AnnMarieW]

How to style dash-ag-grid with a Mantine Theme

1. See Dash AG Grid docs theme section

• Set className="ag-theme-alpine" (the default) for Mantine light theme
• Set className="ag-theme-alpine-dark" for Mantine dark theme

2. Use Mantine CSS variables to style the grid with Mantine theme colors. For example:

cellStyle = {'backgroundColor': "var(--mantine-color-yellow-filled)" }

3. Set different colors based on the theme using the light-dark function. This app uses this feature to set different grey colors in the first column.

light-dark accepts two arguments: first argument is rule that will be applied in light color scheme, second argument is rule that will be applied in dark color scheme. For example {'color': 'light-dark(red, blue)'}

Live Demo on PyCafe

---

---