ThemeSwitchAIO questions

Dash Python
1

Is there a way to get the light or dark setting of a ThemeSwitchAIO so I can make other necessary dark/light styling adjustments to graphs, text, etc?

and why doesn’t ThemeSwitchAIO have persistence like ThemeChangerAIO?

2

HI @marketemp

You can find more information on how to use ThemeSwitchAIO in a callback to update figures in the Theme Change Components section.

I also updated this section to include an example of adding persitance to the ThemeSwitchAIO

ThemeSwitchAIO(aio_id="theme", themes=[dbc.themes.COSMO, dbc.themes.CYBORG], switch_props={"persistence":True})
2 Likes
3

Thanks @AnnMarieW and just noticed this weekend that you are the creator of all this new Bootstrap theme switching. It’s really needed. Thanks for the update on persistence within ThemeSwitchAIO and

Input(ThemeSwitchAIO.ids.switch("theme"), "value"),

was what I was looking for and didn’t jump out at me.

I now have my pages working with LITERA and SLATE using ThemeSwitchAIO. When you use a BootStrap light and dark theme in entirety, there are differences in fonts and sizing and other details so the conversion is not 100% the same. An improvement would be to just pick one font and then define dark/light color reversals so all of the other attributes of the theme stay the same. I know this probably isn’t easy.

thanks again

4

Hi @marketemp

Glad you got it working. My theme switch components only switch the stylesheets that are available in the Dash Bootstrap Components library. I didn’t design or update those themes.

If you would like more fine tuning of the style with a theme switch component, you might be interested in the Dash Mantine Components library. There you can control the fonts colors spacing etc when you switch themes:

2 Likes
5

Hi @AnnMarieW, how do I get the value of Input(ThemeSwitchAIO.ids.switch(“theme”), “value”) as a line of code. print(ThemeSwitchAIO.ids.switch("theme")) prints {'component': 'ThemeSwitchAIO', 'subcomponent': 'switch', 'aio_id': 'theme'}.

Can you tell me a little more about this data structure and where I can go to learn to use it properly?

6

You can try this

print(hasattr(ThemeSwitchAIO.ids.switch("theme"), "value"))

This is an AIO component. You can learn more about them here: All-in-One Components | Dash for Python Documentation | Plotly

You can check out examples and the reference section on this page of the Theme Explorer

And you can check out the code for the ThemeSwitchAIO component: dash-bootstrap-templates/aio_theme_switch.py at main · AnnMarieW/dash-bootstrap-templates · GitHub

1 Like