I have developed an app with 20+ plotly graphs, rendered in a Bootstrap theme. During development, I made the conscious decision to go with the Python version of Plotly and not the JS version, as the first supports templating.
Now, Bootstrap 5.3 introduces color modes, which I use with the default JS implementation. This changes the data-bs-theme property on html and changes all Boostrap CSS values accordingly.
My goal was to have my Plotly graphs also respond to the change in data-bs-theme, however I haven’t found a way to to so.
My question: what’s the best/easiest way to have Plotly.py graphs to toggle between different color modes? (note: no Dash!).
The only way I have figured out how to do this is to make figure templates with a Bootstrap theme. These are designed to use with the dash-bootstrap-components library. I know you said no Dash, but you actually don’t need to use Dash in to use these plotly figure templates.
With Dash it’s necessary to use a callback to update the figure template for the figure when the color mode changes. If anyone knows a way to do this without a callback, I’d love to know about it too.
For people using Dash, you can see how to change the figure when the color mode changes with a theme switch here:
Thank you for your detailed answer. I think I’m using these templates as a starting point, but I guess we both have the same fundamental question: how to apply a new theme, when you’re not using Dash, to react to a user switching to a different color mode?