Change background color of active tab

Dash Python
1

Hi All,

Excited to start my Plotly Dash journey.

I started out with dash bootstrap components to build a tabbed dashboard. I wanted to have the background color of the active tab.

I referred to the active styles properties in the link below. However, it doesn’t color the background blue. I can get the font to be blue, bold, italics etc. but not the background color.

https://dash-bootstrap-components.opensource.faculty.ai/docs/components/tabs/

Do I need to define some callbacks? I would like to stick to Dash Bootstrap Components as I have already invested some time in building rest of the dashboard.

Your help is greatly appreciated and thank you for your time.

My minimal reproducible example is shown below.

import dash
from dash import dcc, html
import dash_bootstrap_components as dbc

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

tab1_content = dbc.Card(
    dbc.CardBody(
        [
            html.P("This is tab 1!", className="card-text"),
            dbc.Button("Click Here", color="success"),
        ]
    ),
    className="mt-3",
)

tab2_content = dbc.Card(
    dbc.CardBody(
        [
            html.P("This is tab 2!", className="card-text"),
            dbc.Button("Don't Click Here", color="danger"),
        ]
    ),
    className="mt-3",
)

app.layout = dbc.Container([
    dbc.Tabs([
            dbc.Tab(tab1_content, label="Tab1", tab_id="tab-1", active_tab_style={"color":"#0d6efd"}),
            dbc.Tab(tab2_content, label="Tab2", tab_id="tab-2", active_tab_style={"color":"#0d6efd"})
        ],
        id="app_tabs",
        active_tab="tab-1"
    )
])

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

Hi @pads1987

It looks like you might have found a bug. It should work to do something like this but I verified that it does not set the background color correctly:
active_tab_style={"color":"#0d6efd", "backgroundColor": "red"}

It would be good to post this as an issue in the dbc GitHub

In the meantime, you can use the active_tab_class_name prop like this :

active_label_class_name="bg-primary text-white"

Using the Bootstrap class names makes it easy to style your app with colors consistent with your selected Bootstrap theme. For more information on the bootstrap class names, check out:

https://dashcheatsheet.pythonanywhere.com/

3 Likes
3

Thank you @AnnMarieW for the alternative.

I have posted an issue on GitHub as well.