Plotly Dash change primary color of all components

Question

This question seems to simple but I don't seem to find a proper solution. I have a Dash app which is styled with bootstrap like this

from dash import Dash
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Container([dbc.Button("Test"),
                            dbc.RadioItems(["Test1", "Test2"], "Test1")])

if __name__ == '__main__':
    app.run_server(debug=True)

Which gives

But I'd like to change the primary blue color to something else. I'm sure there must be a way to simply change this for all possible components at once but I can't find how. I've found ways to do this by changing the css of each component but not for all components at once. This question comes somewhat close but doesn't really solve the issue and has the additional constraint that no additional css file can be used.

Answer 1

For DBC components, you could try using the CSS wildcard selector [class*="primary"]

Note: Radio items are a sort of exception when it comes to components and have to be handled specially (see CSS below).

Create a file named custom.css and store it in a directory named "assets" located locally to the main dash app.py file, like so:

.
├── app.py
└── assets
    └── custom.css

2 directories, 2 files

where, for example, the app.py file could contain:

import dash_bootstrap_components as dbc

from dash import Dash, dcc, html


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

badge = dbc.Button(
    ["Notifications", dbc.Badge("4", color="primary")], color="primary",
)
dropdown = dbc.DropdownMenu(
    label="Menu",
    children=[
        dbc.DropdownMenuItem("Item 1"),
        dbc.DropdownMenuItem("Item 2"),
        dbc.DropdownMenuItem("Item 3"),
    ],
    color="primary",
)

app.layout = dbc.Container(
    [
        html.H2("Dash App"),
        html.H3("Change Primary Color of Components"),
        dbc.Button("Test", color="primary"),
        dcc.RadioItems(["Test1", "Test2"], id="Test1"),
        badge,
        dbc.Alert("This is a primary alert", color="primary"),
        dbc.Spinner(color="primary"),
        dropdown,
    ],
    style={"textAlign": "center"},
    id="container",
)

if __name__ == "__main__":
    app.run_server(debug=True)

and the custom.css file contain:

[class*="primary"], input[type='radio'] {
    color: #fff;
    background-color: red!important;
    accent-color: red;
    border-color: orange!important;
    margin: 0.2rem;
}
[class*="primary"]:hover {
    background-color: maroon!important;
}
.spinner-border {
    border-right-color: transparent!important;
}

which will result in: