add ColorSchemeToggle

[AnnMarieW]

closes #680

This ColorSchemeToggle uses the use-computed-color-scheme as recomended by Mantine. It sets the color scheme value in local storage so it's persistent.

It also has a read-only prop computedColorScheme that can be used to trigger a dash callback.

Here is a sample app:

import dash_mantine_components as dmc
from dash import Dash, Input, Output
from dash_iconify import DashIconify

app = Dash()

light=dmc.Tooltip(
    DashIconify(icon="radix-icons:sun", width=20,),
    label="Light Mode"
)

dark = dmc.Tooltip(
    DashIconify(icon="radix-icons:moon", width=20),
    label="Dark Mode"
)


component = dmc.ColorSchemeToggle(
    lightIcon=light,
    darkIcon=dark,
    variant="filled",
    color="yellow",
    size="lg",
    m="xl",
    id="color-scheme-toggle",
)

app.layout = dmc.MantineProvider(
    [component, dmc.Text(id="color-scheme-output")],
    defaultColorScheme="dark"
)


@app.callback(
    Output("color-scheme-output", "children"),
    Input("color-scheme-toggle", "computedColorScheme"),
)
def update(scheme):
    return f"Current color scheme: {scheme}"

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

[AnnMarieW]

Added a helper function to prevent the flash of the wrong color scheme when the app starts and/or when refreshing a page.

Uses Dash index hook based on #680

In the app above, you just need to add 1 line of code

dmc.initalize_color_scheme()

So cool! 😎

[github-actions]

Test Environment for snehilvj/dash-mantine-components-693
Updated on: 2026-01-27 19:12:04 UTC

[AnnMarieW]

Here's a sample app in this environment
https://py.cafe/amward/dash-color-scheme-toggle

[AnnMarieW]

Updated the docs to use this switch and added a page for ColorSchemeToggle component snehilvj/dmc-docs#283

[alexcjohnson]

Cool use of the index hook!