📣 Dash Mantine Components 2.6.0 release: New ColorSchemeToggle and helper to fix theme flash on load

Dash Python
1

Dash Mantine Components 2.6.0 introduces a new ColorSchemeToggle component and a pre_render_color_scheme() helper. The toggle provides a persistent light/dark switch with no callback required, and the helper sets the theme before Dash renders. Together they ensure the correct theme loads instantly and eliminate the common flash of the wrong theme.

image
image602×280 11.9 KB

See it live in the DMC docs

The DMC documentation now uses ColorSchemeToggle together with pre_render_color_scheme().

Give it a try! Toggle the theme in the header, then refresh the page. The correct theme loads immediately with no flash.

See the new ColorSchemeToggle documentation page for more details. You can also see examples on the Dash AG Grid page and the figure template page showing how to update non-DMC components like AG Grid and Plotly figures based on the Mantine theme.

ColorSchemeToggle component

ColorSchemeToggle is a theme switch that toggles between light and dark mode — no callback required. It saves the user’s choice in localStorage so the setting persists. It is built on ActionIcon, so it supports standard style props such as size, color, variant and more.

import dash_mantine_components as dmc
from dash import Dash
from dash_iconify import DashIconify

app = Dash()

app.layout = dmc.MantineProvider(
    dmc.ColorSchemeToggle(
        lightIcon=DashIconify(icon="radix-icons:sun", width=20),
        darkIcon=DashIconify(icon="radix-icons:moon", width=20),
        color="yellow",
        size="lg",
    )
)

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

pre_render_color_scheme()

The pre_render_color_scheme() helper prevents the flash of the wrong theme on page load and refresh.

When using ColorSchemeToggle, the selected theme is stored in localStorage under the key mantine-color-scheme-value. The new helper uses Dash hooks.index to read that value and set the correct background color before the app renders.

Call it once at the very top of your app:

import dash_mantine_components as dmc

dmc.pre_render_color_scheme()

Requirements:

  • dash 3.0 or higher (uses Dash Hooks)
  • Use ColorSchemeToggle so the value is stored

Custom theme switches

If you are using DMC versions earlier than 2.6.0, or you want to build a switch with a different component such as Switch, SegmentedControl, or Button, you can still use a clientside callback. The new component is the recommended approach for most apps.

Other notable updates

  • Mantine patch update to 8.3.14
  • Fixed prop types in Grid and SimpleGrid
  • Fixed incorrect clamping in NumberInput when min or max was set to None
  • Docs: Updated Dash AG Grid theming examples for versions ≥ 33

Special thanks to:

  • @BSd3v for the pre_render_color_scheme() helper to fix the flash
  • @alexcjohnson for helpful feedback during code reviews
3 Likes
2

I was just wondering if the flash effect could be fixed! Great update! Thanks!

1 Like