PyCafe - Dash - Color Mode Switcher with Dash

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
import dash
from dash import Dash, html, dcc, Input, Output, callback, clientside_callback, ctx
import dash_bootstrap_components as dbc

app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.icons.BOOTSTRAP])


sun = html.I(className="bi bi-sun me-1")
moon = html.I(className="bi bi-moon-stars me-1")
auto = html.I(className="bi bi-circle-half me-1")

colormode_switch = dbc.DropdownMenu(
    id="dd-color-mode",
    label=sun,
    children=[
        dbc.DropdownMenuItem([sun, "Light"], id="light", n_clicks=0),
        dbc.DropdownMenuItem([moon, "Dark"], id="dark", n_clicks=0),
        dbc.DropdownMenuItem([auto, "Auto"], id="auto", n_clicks=0),
    ],
    color="link",
    className="ms-auto"
)

accordion = html.Div(
    dbc.Accordion(
        [
            dbc.AccordionItem(
                [
                    html.P("This is the content of the first section"),
                    dbc.Button("Click here"),
                ],
                title=html.Div([html.I(className="bi bi-info-circle-fill me-2"), "Item 1" ])
            ),
            dbc.AccordionItem(
                [
                    html.P("This is the content of the second section"),
                    dbc.Button("Don't click me!", color="danger"),
                ],
                title=html.Div([html.I(className="bi bi-check-circle-fill me-2"), "Item 2" ])
            ),
            dbc.AccordionItem(
                "This is the content of the third section",
                title=html.Div([html.I(className="bi bi-exclamation-triangle-fill me-2"), "Item 3" ])
            ),
        ],
    )
)

app.layout = dbc.Container(
    [
        dcc.Store(id="store-color-mode", data="light"),
        dbc.Stack(["Color Mode Demo ", colormode_switch],direction="horizontal", className="h4"),
        html.Div("Example of 3-position color mode switch - light, dark and auto", className="mb-4"),
        accordion,    
    ],
)

@callback(
    Output("dd-color-mode", "label"),
    Output("store-color-mode", "data"),
    Input("light", "n_clicks"),
    Input("dark", "n_clicks"),
    Input("auto", "n_clicks")
)
def update_colormode_label(*_):
    if ctx.triggered_id == "auto":
        return auto, "auto"
    if ctx.triggered_id == "dark":
        return moon, "dark"
    return sun, "light"
    


clientside_callback(
    """
    (mode) => {
      if (mode === 'auto') {
        mode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'    
      } 
       document.documentElement.setAttribute('data-bs-theme', mode);  
       return window.dash_clientside.no_update
    }
    """,
    Output("store-color-mode", "id"),
    Input("store-color-mode", "data"),
)


app.run(debug=True)
Py.Cafe

dash-color-mode-switcher

Color Mode Switcher with Dash - light, dark, auto modes
