Style dash components with dark-theme bootstrap css

Dash Python
1

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?

2

Hey @skebanga

This is something you need to override with some custom CSS. I answered a similar question here, and have been working on some general stylesheets for bootstrap and bootswatch that will style dash-core-components consistently, but I haven’t had time to finish them. If I remember I’ll comment on this thread again when I’ve made some progress with that. In the meantime the linked post above will hopefully help a bit.

EDIT - I’m not 100% sure if the code linked above will work perfectly with the latest version of dash-core-components. I know that the styling of the DatePicker components changed, I can’t remember if the same happened for Dropdown which might mean you need to tweak the CSS classes.

2 Likes
3

Thanks for the reply, and the link - I’m sure it will be very useful! Definitely interested to be updated on your progress if you do remember! Thanks again!

1 Like
4

I was just wondering if there was any easier way yet of applying bootstrap themes to dash elements (for example, a drop-down menu, and a graph) now?

I’ve just tried applying a bootstrap theme to a simple line graph, but it didn’t look very good as the graph itself was a white block. I was able to fix it by setting the background colour, but then the title colour looked off, so it seems as if every individual element needs to be manually set, which isn’t very convenient.

5

For styling dash-core-components like Dropdown and DatePickerSingle you could try this.

Styling graphs is a little bit more painful, I’m not aware of a good way to override defaults in Plotly graphs, so I think you do have to essentially set everything manually :confused:. If anyone knows of an alternative I’d be super interested to know myself!

6

Hmmm that is unfortunate. Anyway I tried but I couldn’t get the method in that link to work, am I doing something wrong?

Relevant snippet of code:

app = dash.Dash(__name__, external_stylesheets=darkly, url_base_pathname='/_tunnel_/8050/')


app.layout = html.Div(
                children=[
                    html.Div(children='''
                        Symbol to graph:
                    '''),
                    dcc.Input(id='input', value='', type='text'),
                    html.Div(id='output-graph'),   
                    dcc.Dropdown(
                        options=[
                            {'label': 'New York City', 'value': 'NYC'},
                            {'label': 'Montréal', 'value': 'MTL'},
                            {'label': 'San Francisco', 'value': 'SF'}
                        ],
                        value='MTL'
                    )  
                    ], className="dash-bootstrap"
                )

The background is black so I know that the theme is being applied - but neither dcc.Input or dcc.Dropdown are being themed.

7

external_stylesheets=darkly <- that doesn’t look quite right to me? I don’t know what’s in the darkly variable, but if you’ve downloaded one of those stylesheets from the repository I’ve linked to you just need to place it in your assets/ folder.

You should use dbc.Input for a Bootstrap styled input, or add className='form-control' to dcc.Input (note that in the latter case you can’t make use of Bootstrap’s form validation styles)

1 Like