Py.Cafe

maartenbreddels/

dash-styling

Styling dash using CSS file in the assets folder

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

app = Dash(__name__)
md = """
# Dash demo

See [The dash examples index](https://dash-example-index.herokuapp.com/) for more examples.
"""

app.layout = html.Div(
    children=[
        dcc.Markdown(children=md, link_target="_blank"),
        dcc.Dropdown(id="dropdown", options=["red", "green", "blue", "orange"]),
        # add a foo class, which is styled in assets/style.css
        dcc.Markdown(id="markdown", children=["## Hello World"], className="foo"),
    ]
)


@callback(
    Output("markdown", "style"),
    Input("dropdown", "value"),
)
def update_markdown_style(color):
    return {"color": color}
assets/style.css
1
Could not load content