search

AnnMarieW / dash-bootstrap-templates

A collection of 52 Plotly figure templates with a Bootstrap theme. Two theme switch components. Stylesheet to apply Bootstrap themes to Plotly Dash components.
https://hellodash.pythonanywhere.com/
MIT License
135 stars 25 forks source link

How to make ThemeSwitchAIO change the css class? #12

Closed RemDelaporteMathurin closed 1 year ago

RemDelaporteMathurin commented 2 years ago

Hi @AnnMarieW

thanks for these useful templates! I am kinda new to all this 😄

I would like to add a dark mode to my web app.

I added a ThemeSwitchAIO component to the layout (without changing the graph template yet).

It changes the default settings (background, primary colour, etc.) as expected. However, some of my components have custom css where the background colour is set to white. Also the dcc.Tabs component seems unaffected. See screenshots below.

surely there is something I'm not doing right.

Do you have any idea?

Thanks in advance for your support!

Remi

light mode image

"dark" mode image

AnnMarieW commented 2 years ago

Hi @RemDelaporteMathurin

I'm glad you like the templates! Sure, I can help you with this, but since this is a "how to" question and not a bug, it would be better to post this on the Dash community forum. I'll answer it there - and it's also a great way to show off your cool app :sunglasses:

In the meantime, please check out my Dash Bootstrap Theme Explorer site. It has lots of info on how to style your app with a Bootstrap theme. To style dcc components see this section: https://hellodash.pythonanywhere.com/adding-themes/dcc-components