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?

Answer 1

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: