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
8

I have recently start with dash, and one of the initial challenges I encountered was implementing the dark theme. There should be a more straightforward approach to applying the dark theme to all the components and charts. In my app I have 3 main components: line chart, tabs and dropdown.

  1. For the line chart I created a custom function:

def apply_dark_theme(fig):
fig.update_layout(
plot_bgcolor=ā€˜rgba(17, 17, 17, 1)ā€™,
paper_bgcolor=ā€˜rgba(17, 17, 17, 1)ā€™,
font_color=ā€˜whiteā€™,
xaxis=dict(
gridcolor=ā€˜rgba(68, 68, 68, 1)ā€™
),
yaxis=dict(
gridcolor=ā€˜rgba(68, 68, 68, 1)ā€™
)
)
return fig

  1. For the tabs i use bootstrap classes:

dcc.Tabs(id=ā€˜tabsā€™, value=ā€˜tab-1ā€™, className=ā€˜nav nav-pills bg-darkā€™, children=[
dcc.Tab(label=ā€˜Running Backs (RB)ā€™, value=ā€˜tab-1ā€™, className=ā€˜nav-item text-light bg-darkā€™, children=[

  1. But for dropdowns non of these approaches works, the only way is to apply custom css but it would be better if this could be accomplish using bootstrap classes or python code.
9

Hi @Alfredo49

You can try adding this stylesheet to your app - it minimally styles dash core components with the bootstrap themes available in the dbc library

Hereā€™s an easy way to style the figures using the dash-bootstrap-templates library:

10

Hi @AnnMarieW,

Thank you for the help!,

So for styling the charts i can use figure templates and for style dash components (like tabs and dropdowns) i can use the style sheet?

These are great solutions but it would be great if there is a way to style all components and charts with a single solution.