Announcing Dash Bio 1.0.0 🎉 : a one-stop-shop for bioinformatics and drug development visualizations.

Different dbc.themes within multi-page app

What’s the simplest way to use dash_bootstrap_components.themes and enable different themes for different pages within a multi-page app?

Looks like all the functionality I would need to download a stylesheet and serve it dynamically might be there in Adding CSS & JS and Overriding the Page-Load Template | Dash for Python Documentation | Plotly but I’m wondering if there’s a one-liner solution I’m missing.



Hi @chubukov

There is no one-liner solution that I know of (unless you create an All-in-One component to do this), but you can change the stylesheet with a clientside callback.

This one is triggered by a radio button to switch themes, but it could be modified so that it’s triggered by switching app pages. Note - this is for dash-boostrap-components >=v1.0.0

    # Use 2 style sheet in the app to reduce the flicker when the theme changes
    # example:  app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.themes.CYBORG])
        function(url) {            
            var stylesheets = document.querySelectorAll('link[rel=stylesheet][href^="https://cdn.jsdelivr"]')                  
            stylesheets[stylesheets.length - 1].href = url           
        Output(ids.dummy_div(MATCH), "children"),
        Input(, "value"),


Thanks @AnnMarieW. This could be great fit for your pages functionality in Dash 2.1 – I imagine this would be a commonly desired feature, and even this seemingly simple clientside callback will take me a few tries to get right.

I agree, and that’s a great suggestion. I’ll add that to the list of feature requests. The multi page app plug-in will be published in dash-labs in the next few days so watch for the announcement :slight_smile:

Hi @chubukov

This is an example of how to specify different themes for pages in a multi-page app.

See more about multi-page apps in dash-labs

You can specify a different theme for an app in pages/'by supplying the theme like this:

dash.register_page(__name__, theme=dbc.themes.CYBORG)

Now the theme prop can be used to update the theme in a callback. This demo uses the ThemeChangerAIO component from the dash-bootstrap-templates library to change the theme.

See the code for this example here: HelloDash/gallery/multi_page_example at main · AnnMarieW/HelloDash · GitHub

It also includes Bootstrap-themed figure templates and the dbc class to style Dash Core Components and the DataTable with a Bootstrap theme. See more info and a live demo of those features here:

Note: requires dash-labs>=1.01 dash-bootstrap-components>=1.0 dash-bootstrap-templates>=1.04


1 Like

Beautiful. This will be the final incentive to switch to the new pages functionality :slight_smile:

Thank you!

1 Like