Search code examples
pythontwitter-bootstrapplotly-dash

Style dash components with dark-theme bootstrap css

I have below a working example of a plotly dash app which displays a dropdown on a tab, and then displays an alert as a result of selecting an item in the dropdown.

#!/usr/bin/env python3
import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

app = dash.Dash('Example', external_stylesheets=[dbc.themes.DARKLY])
app.title = 'Example'
app.layout = dbc.Tabs([
    dbc.Tab(
        dbc.Card([
            dcc.Dropdown(id='dropdown',
                         options=[
                             { 'label': 'Item 1', 'value': 'foo' },
                             { 'label': 'Item 2', 'value': 'bar' },
                         ],
            ),
            html.Br(),
            html.Div(id='item-display'),
        ], body=True), label='Tab 1')
])

@app.callback(
    Output('item-display', 'children'),
    [Input('dropdown', 'value')]
)
def display_item(v):
    return dbc.Alert(f'You selected Item {value}', color='primary') if v else ''

if __name__ == '__main__':
    app.run_server(debug=True)

I'm using the bootswatch darkly theme.

The problem I'm having is I don't know how to style the dash_core_components.Dropdown with the bootstrap style.

As can be seen in the below images, the dash_bootstrap_components elements are all styled according to the bootstrap style, but the Dropdown is not, and in fact the text when dropped down is almost impossible to read as it is white text on a very light background.

enter image description here enter image description here

In the darkly samples, the dropdown looks like this:

enter image description here

When hovering over an option, the background is the bootstrap "primary" color:

enter image description here

How can I style the dcc.Dropdown according to the bootstrap style?

Solution

  • As explained here you can solve this issue by adding the following stylesheet to your app.

    dbc_css = "https://cdn.jsdelivr.net/gh/AnnMarieW/dash-bootstrap-templates/dbc.min.css"
app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP, dbc_css])

    Then place all the components that should be styled according to your chosen theme in a html.Div with className="dbc". See this example for a dropdown:

     with_theme = html.Div(
    [
        dcc.Dropdown(["Apple", "Carrots", "Chips", "Cookies"], "Cookies"),
    ],
    className="dbc",
)