Theme Switch Examples

[AnnMarieW]

Here's a minimal example of updating a figure template when switching between light and dark modes.

It uses

• a clientside callback to set the light/dark theme.
• Patch to update the figure template efficiently
• a dmc.Switch for the theme switch component using persistence

import dash_mantine_components as dmc
from dash import Dash, dcc, Input, Output,  callback, Patch, clientside_callback, _dash_renderer
from dash_iconify import DashIconify
import plotly.express as px
import plotly.io as pio
_dash_renderer._set_react_version("18.2.0")

dmc.add_figure_templates(default="mantine_light")

df = px.data.gapminder()

dff = df[df.year == 2007]
avg_lifeExp = (dff["lifeExp"] * dff["pop"]).sum() / dff["pop"].sum()
map_fig = px.choropleth(
    dff,
    locations="iso_alpha",
    color="lifeExp",
    title="%.0f World Average Life Expectancy was %.1f years" % (2007, avg_lifeExp),
)

app = Dash(external_stylesheets=dmc.styles.ALL)


theme_toggle = dmc.Switch(
    offLabel=DashIconify(icon="radix-icons:sun", width=15, color=dmc.DEFAULT_THEME["colors"]["yellow"][8]),
    onLabel=DashIconify(icon="radix-icons:moon", width=15, color=dmc.DEFAULT_THEME["colors"]["yellow"][6]),
    id="color-scheme-switch",
    persistence=True,
    color="grey",
)

app.layout = dmc.MantineProvider(
    dmc.Box([ theme_toggle,  dcc.Graph(figure=map_fig, id="map")]),    
)

@callback(
    Output("map", "figure"),
    Input("color-scheme-switch", "checked"),
)
def update_figure(switch_on):
    # template must be template object rather than just the template string name
    template = pio.templates["mantine_dark"] if switch_on  else pio.templates["mantine_light"]
    patched_figure = Patch()
    patched_figure["layout"]["template"] = template

    return patched_figure




clientside_callback(
    """ 
    (switchOn) => {
       document.documentElement.setAttribute('data-mantine-color-scheme', switchOn ? 'dark' : 'light');  
       return window.dash_clientside.no_update
    }
    """,
    Output("color-scheme-switch", "id"),
    Input("color-scheme-switch", "checked"),
)

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