Access background color from dash_bootstrap_templates inside dash callback

Dash Python
5

@kiteme
You can upadate figures in a callback with the Bootstrap theme using dash-bootstrap-templates. More information on that here: Dash Bootstrap Templates

If you use dbc.Tabs, the theme color will update automatically for you. For dcc.Tabs, you can also use the stylesheet from dash-bootstrap-templates to automatically update dash core components with the theme. See more info here: Dash Bootstrap Theme Explorer. You can also set the color in dcc.Tabs with className propery ie `selected_className=“primary”

If it’s for some other reason, the clientside callback you showed works for dash-bootstrap-components <= V0.13.0 which uses Bootstrap 4.0. However, dbc version>=1.0.0 uses Bootstrap 5, and Bootstrap changed the propery names of the colors in V5.

Here’s an updated clientside callback:

from dash import Dash, dcc, html, Output, Input

import dash_bootstrap_components as dbc

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

app.layout = html.Div([dcc.Store(id="intermediate-store"), dcc.Store(id="color-store")])

app.clientside_callback(
    """
    function(val) {
        const bodyStyles = window.getComputedStyle(document.body);
        return {
            primary: bodyStyles.getPropertyValue("--bs-primary"),
            secondary: bodyStyles.getPropertyValue("--bs-secondary"),
            success: bodyStyles.getPropertyValue("--bs-success"),
        };
    }
    """,
    Output("intermediate-store", "data"),
    Input("intermediate-store", "data"),
)


@app.callback(
    Output("color-store", "data"),
    Input("intermediate-store", "data"),
)
def update_output_div(data):
    # data equals: {'primary': '#007bff', 'secondary': '#6c757d', 'success': '#28a745'}
    print(data)
    return data


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

Note an easy way to find all the color names is by inspecting the browser:

image
image581×898 69.4 KB