Style dash components with dark-theme bootstrap css

Question

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.

In the darkly samples, the dropdown looks like this:

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

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

Antimony

Some of the Dash components make it really tough to work with the inner bits. You'll probably need to use the browser's dev console to view the structure of the dropdown and create custom CSS to style each part the way you need. – Counterglow

Answer 1

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",
)

Callum

Answer 2

I noticed that you put the question on the Plotly forums as well and that in particular, the answer linked in one of the answers probably contains a useful starting point. What I did myself was a slight modification of this answer: Add a assets/dropdown.css with the following contents:

.Select-control {
    background-color: #222 !important;
}

.Select.is-focused > .Select-control {
    background-color: #222;
}

#school-input {
    color: white;
}

.Select-value-label {
    color: white;
}

.Select--single > .Select-control .Select-value, .Select-placeholder {
    border: 1px solid grey;
    border-radius: 4px;
}

.VirtualizedSelectOption {
    background-color: #222;
    color: white;
 }

.VirtualizedSelectFocusedOption {
    background-color: #222;
    opacity: .7;
}

.Select.is-focused:not(.is-open) > .Select-control {
    background-color: #222;
    border-color: var(--primary); 
    box-shadow: none;
}

The result looks as follows:

Lindstrom

how do I embed this .css file within the dash code? – Farra

@Ben: Put it in an assets folder; see dash.plotly.com/external-resources – Lindstrom

Thank you, that was too simple :) – Farra

Could you please tell me which exact option changes the color of the selected option? – Farra

@Farra I believe you are looking for this: .has-value.Select--single > .Select-control .Select-value .Select-value-label, .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label { color: white; } – Jenette