Py.Cafe

huong-li-nguyen/

bootstrap-light-dark-theme

Bootstrap Light Dark Theme Demo

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
# check out https://dash.plotly.com/ for documentation
# And check out https://py.cafe/maartenbreddels for more examples
from dash import Dash, html
import dash_bootstrap_components as dbc

vizro_bootstrap = "https://cdn.jsdelivr.net/gh/mckinsey/vizro@0.1.33/vizro-core/src/vizro/static/css/vizro-bootstrap.min.css"

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

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

app.layout = dbc.Container(
    [
        html.H3(["Bootstrap Light Dark Color Modes Demo"], className="bg-primary p-2"),
        color_mode_switch,
    ]
)

app.run_server(debug=True)