Themes

Customise your app by choosing from different Bootstrap and Bootswatch themes.

dash-bootstrap-components doesn't come with CSS included. This is to give you the freedom to use any Bootstrap v5 stylesheet of your choice, so you can achieve the look you want in your app.

You can link to a stylesheet served over a CDN, or serve CSS locally depending on your needs.

Packaged CDN links

dash-bootstrap-components contains links to Bootstrap and Bootswatch stylesheets hosted on JSDelivr so you can conveniently link to one of them in your app. The easiest way to do so is to use the external_stylesheets argument when instantiating your app.

Links are available in the dash_bootstrap_components.themes submodule.

import dash
import dash_bootstrap_components as dbc

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

This will link the standard Bootstrap stylesheet. To link one of the Bootswatch styles, such as Cyborg you would just change this to

import dash
import dash_bootstrap_components as dbc

app = dash.Dash(external_stylesheets=[dbc.themes.CYBORG])

See the available themes for more.

Manually linking to a CDN

Each theme such as is simply a BootstrapCDN URL stored as a string, so using the themes module is really equivalent to doing something like the following.

BS = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
app = dash.Dash(external_stylesheets=[BS])

You can change this URL to anything you like, for example if you prefer to use a mirror or a different CDN to supply the stylesheet.

Linking local CSS

You can download a stylesheet and serve it locally if you prefer. This might be desirable if you are restricted by a firewall or if you want to modify the stylesheet or even compile your own. There are tools online to help with this, we recommend Bootstrap Build.

The easiest way to link a local stylesheet is to place it in a folder named assets/ in the root of the app directory. See the Dash documentation for more details on this.

Available themes

There are numerous free to use Bootstrap stylesheets available on the web. The dash_bootstrap_components.themes module contains CDN links for Bootstrap and all of the Bootswatch themes. Bootstrap also maintains its own [themes website][bootstrap-themes] which lists a number of free and premium themes that you could incorporate into your apps.

To start with, we recommend experimenting with some of the Bootswatch themes available in the dash_bootstrap_components.themes module. The full list of available themes is CERULEAN, COSMO, CYBORG, DARKLY, FLATLY, JOURNAL, LITERA, LUMEN, LUX, MATERIA, MINTY, MORPH, PULSE, QUARTZ, SANDSTONE, SIMPLEX, SKETCHY, SLATE, SOLAR, SPACELAB, SUPERHERO, UNITED, VAPOR, YETI, ZEPHYR.

Check out the theme explorer for a live demo of dash-bootstrap-components using all of the different available themes. You may also like to check out the dash-bootstrap-css project which contains Bootstrap stylesheets that apply consistent styling to various components from dash-core-components.

Light and Dark Color Modes

Available in dash-bootstrap-components>=1.5.0

To toggle between a light and dark mode in your app, create a component to switch the theme. For example, add a component like this to the layout:

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.icons.FONT_AWESOME])

color_mode_switch =  html.Span(
    [
        dbc.Label(className="fa fa-moon", html_for="switch"),
        dbc.Switch( id="switch", value=True, className="d-inline-block ms-1", persistence=True),
        dbc.Label(className="fa fa-sun", html_for="switch"),
    ]
)

Here's a callback to change the theme:

clientside_callback(
    " " "
    (switchOn) => {
       document.documentElement.setAttribute("data-bs-theme", switchOn ? "light" : "dark"); 
       return window.dash_clientside.no_update
    }
    " " ",
    Output("switch", "id"),
    Input("switch", "value"),
)

See this example live in the Dash Bootstrap Theme Explorer See more information in the Bootstrap Docs