Dynamic sync of dark mode with plotly plots

[Alexboiboi]

Hi there,

Thank you for the really nice work done here. This theme looks great ;)

Since the new darkmode feature has become really common among sphinx themes, it would be nice if there would be possible to sync the page theme with the plotly plot template. This is what plotly is doing on their on page, this looks so nice^^

• Originally posted by @nicolaskruchten in Plotly's themes page displays graph templates incorrectly when in dark mode plotly/graphing-library-docs#226 (comment) :

The dark-mode toggle fires off some simple javascript which crawls the page looking for divs that look like they were produced with Plotly.js and then calls Plotly.react() on those divs to change some basic template parameters: https://github.com/plotly/graphing-library-docs/blob/master/all_static/javascripts/improve.js

• As @drammock mentioned in Add github buttons as icon links #1236 (comment) :

the .js you linked to has ~340 lines of styling and IMO it doesn't make sense for us to duplicate that and try to keep it in sync with changes to plotly). But there might be a way to incorporate that .js file directly (probably with some minimal changes).

As I am not versed in javascript at all, I am not able to adapt this to another theme and I rely on the community to help out here!

Sincerely, Alex -

[12rambau]

That would be nice if we were able to do the same directly in the lib so if you come up with a solution please open a PR, I'll be happy to make a review. Unfortunatelly I think for maintainers that's very low priority compared to other JS devs that needs to be done (refactor colors, search as you type, etc...) So I think you'll need to dive in.

In short what you are looking for is a trigger. In our theme everything can be done listening to the html tag data-mode and data-theme attrributes.

Some examples can be found here:

pydata-sphinx-theme/src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js

Line 35 in 7853951

// get the theme

[drammock]

As I am not versed in javascript at all, I am not able to adapt this to another theme and I rely on the community to help out here!

you might actually have better luck asking on one of the plotly forums: https://community.plotly.com/, some variant of "how can I get light/dark theming like on plotly.com when the plots are embedded in my own site?"