Consider using dbc components to enable dbc.themes

[huong-li-nguyen]

What's the problem this feature will solve?

Following up on: #205 (comment)

Currently, the dashboard looks off if people try to add their dbc.themes as external stylesheets as our components are not only based on dbc components.

Available vizro stylesheets are currently accessible via dashboard.theme but the process for the user to add their own themes is not as straight-forward as dbc-themes. This issue opens several questions:

• Shall we apply dbc throughout the entire code basis?
• When is dbc preferable over dcc?
• How does it align with using components from other libraries (e.g. dash mantine, dash dcc, dash html etc.)?
• How do we want to simplify the process for the user to create their own themes?

Describe the solution you'd like

Alternative Solutions

Additional context

Code of Conduct

• I agree to follow the Code of Conduct.

[AnnMarieW]

@huong-li-nguyen
I think there are 2 issues here:

1. Since Vizro uses the dbc library, people familiar with Dash may assume that Vizro is compatible with a Bootstrap stylesheet. It would be helpful to include in the documentation that all components, including Dash Bootstrap components are styled with the Vizro custom CSS. A Bootstrap stylesheet should not be added as an external stylesheet or in the assets folder. It would also be good to mention in the section on creating entirely new components that it may be necessary to add custom CSS to make new dbc components functional and consistent with the Vizro theme.

2. Add more themes in Vizro. (Lower priority)

In some cases the Bootstrap theme is over-ridding the Vizro theme. Like here for example:

In other cases, the Vizro style does not include some of the selectors that are included in the Bootstrap stylesheet.

[huong-li-nguyen]

Hey @AnnMarieW - yes, you are absolutely right!

It's not compatible with dbc.themes at all. It's also not a feature we have been focusing on.
At the moment, the users are limited to two default themes: vizro_dark and vizro_light which need to be provided to dashboard.theme. This was the minimal version we wanted to provide in the initial release. Customization is currently only possible by overwriting the CSS variables, which is not straightforward for a user as just providing dbc.themes.

I think we need to solve several questions first - one is a general plan of how we want to simplify the process of providing other themes, which I need to discuss with @Joseph-Perkins and @antonymilne to see how it fits into our overall strategy/possible path forward. I would love to hear your thoughts about that as well when it comes to that point!

@AnnMarieW - Is dbc.themes the standard way of applying themes for dash users? Or have you seen other ways of doing so as well? Did I understand correctly that the entire app needs to be built with dbc components, so using other components such as dcc or dash_mantine_components would be incompatible if one wants to apply dbc.themes?

Thanks again for your valuable input! 🙏

[AnnMarieW]

When using the Dash Bootstrap Components library in a Dash app, it's necessary to add a Bootstrap stylesheet. The most common way is with an external stylesheet like this:

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

Check out this example app from the dbc.Accordion docs. Try running it with and without the stylesheet.

I'm just concerned that people who are familiar with Dash, may think it's either necessary, (or acceptable) to include Bootstrap stylesheet with Vizro.

import dash_bootstrap_components as dbc
from dash import Dash, html

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

# Example with no Bootstrap Stylesheet
app=Dash(__name__)

accordion = html.Div(
    dbc.Accordion(
        [
            dbc.AccordionItem(
                [
                    html.P("This is the content of the first section"),
                    dbc.Button("Click here"),
                ],
                title="Item 1",
            ),
            dbc.AccordionItem(
                [
                    html.P("This is the content of the second section"),
                    dbc.Button("Don't click me!", color="danger"),
                ],
                title="Item 2",
            ),
            dbc.AccordionItem(
                "This is the content of the third section",
                title="Item 3",
            ),
        ],
    )
)
app.layout=dbc.Container(accordion, fluid=True)

app.run(debug=True)

1. No stylesheet

---

2. With Bootstrap stylesheet

---

You can see which stylesheet is used in the app like this:

print(dbc.themes.SPACELAB)

https://cdn.jsdelivr.net/npm/bootswatch@5.3.1/dist/spacelab/bootstrap.min.css

Many people put this .css file in the assets folder so it's possible to work off-line, and so the app works if the cdn goes down for any reason.

So far the main issue I've seen when using both Dash Mantine Components and Dash Bootstrap Components in the same app is the style of the components is different.