PyCafe - Dash - Dash theme switch example

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
from dash import Dash, html, dcc, clientside_callback, Input, Output
import dash_bootstrap_components as dbc

content = """

## Necromancy for Data Scientists
This tutorial is a short introduction to necromancy using modern tools and practices for data scientists who are comfortable using Python but have never raised the dead before. All of the material is available under [open licenses](https://en.wikipedia.org/wiki/MIT_License), All contributors are required to respect our [Code of Conduct](https://www.contributor-covenant.org/).

### Learner Persona
Sabina, 28, has a master's degree in animal physiology and now works for a mid-sized veterinary pharmaceutical company.
She learned a bit of R in an undergraduate biostatistics course, then picked up Python in grad school. She spends several hours a week analyzing data with Pandas and visualizing it with Plotly Express, and is comfortable with basic Git commands.
Sabina recently became responsible for maintaining a pool of worker zombies in her lab. She believes a better understanding of how necromancy works in general will help her do this better.
Sabina has tried doing asynchronous online courses a couple of times, but strongly prefers learning in real time with other people.

### Technologies

| Package        | Purpose           |
| -------------- | ----------------- |
| Beautiful Soup | HTML manipulation |
| deno           | JavaScript        |
| FastAPI        | web server        |
| html5validator | validation        |
| htmx           | interaction       |
| httpx          | http              |
| Jinja2         | HTML templating   |
| Polars         | tabular data      |
| PyPika         | query builder     |
| pytest         | testing           |
| SQLite         | database          |

"""


color_mode_switch =  html.Span(
    [
        dbc.Label(className="fa fa-moon", html_for="switch"),
        dbc.Switch( id="switch", value=True, className="d-inline-block ms-1", persistence=True),
        dbc.Label(className="fa fa-sun", html_for="switch"),
    ],className=" text-end"
)

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

app.layout = dbc.Container([
    dbc.Row(color_mode_switch,),
    dcc.Markdown(content, className="table")
], className="mb-4")

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

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

necromancy-for-data-scientists-dash

Dash theme switch example
