Py.Cafe

amward/

dash-color-scheme-toggle

Color Scheme Toggle with Dash Mantine

DocsPricing
  • app.py
  • requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import dash_mantine_components as dmc
from dash import Dash, Input, Output
from dash_iconify import DashIconify

app = Dash()

dmc.pre_render_color_scheme()

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)
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import dash_mantine_components as dmc
from dash import Dash, Input, Output
from dash_iconify import DashIconify

app = Dash()

dmc.pre_render_color_scheme()

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)