Dash AG Grid Dark Mode Not Working

Dash Python
1

Hello,

I am having issues getting Dash AG Grid to dark mode. I am following the instructions from Introduction to Theming | Dash for Python Documentation | Plotly

Here is my code:

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

app = Dash(__name__, external_stylesheets=[dbc.themes.SPACELAB, dbc.icons.FONT_AWESOME])

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

app.layout = html.Div(
    [
        dag.AgGrid(
            id="grid",
            dashGridOptions={
                "theme": {"function": "myDarkBalham(themeBalham, agGrid)"}
            },
            columnDefs=[{"field": i} for i in df.columns],
            rowData=df.to_dict("records"),
            columnSize="autoSize",
        )
    ],
)


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

and the javascript:

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

defined_themes.myDarkBalham = (theme, agGrid) => {
    return theme.withPart(agGrid.colorSchemeDarkWarm);
};

The resulting table:

image
image1433×413 54 KB

Sadly it is not in dark mode, as I had hoped…

Any help is much appreciated !

2

Hi @j4m

What version of dash-ag-grid are you using? Your code worked for me using the latest v33.3.3

3

Hey @AnnMarieW

I am also using version 33.3.3, very strange…

I have my plotlydash.py file in a folder and I have the “assets” folder in that same directory.
In the assets folder there is the file dashAgGridFunctions.js, is this the correct way to do it?

Also my dashboard is nested in a much larger project, could that somehow be an issue?

Thank you for your help !

EDIT:

I found the issue, I had other theme definitions in my .js, namely

// Create dark warm theme using themeQuartz with colorSchemeDarkWarm
defined_themes.myDarkTheme = agGrid.themeQuartz.withPart(agGrid.colorSchemeDarkWarm);

// Create light theme (just themeQuartz)
defined_themes.myLightTheme = agGrid.themeQuartz;

I had them left over from when I was doing testing and I think they are somehow wrong although I am not completely sure.

Would be great if there could be some kind of error for these situations instead of just failing silently.

Thanks again !

1 Like