Adapting Mastodon widget to respond to dark mode toggle

[heather]

We have switched the Forwards website to Quarto and are using the Mastodon embed timeline widget: i.j / Mastodon embed timeline widget · GitLab. It has a dark mode, but I'm not sure how to adapt the Javascript to respond to the dark mode toggle. I think this is the relevant section of code:
forwards.github.io/mastodon-timeline.js at main · forwards/forwards.github.io · GitHub

Has anyone worked this out before, maybe for another widget? Any help appreciated! I have opened an issue on the website repo here: Adapt mastodon widget to use dark mode · Issue #5 · forwards/forwards.github.io · GitHub

[cderv]

This is obviously a workaround, but based on the code you shared, it seems to mean that you need to change the data-theme attribute at document level.

Try this in your browser console:

document.documentElement.setAttribute("data-theme", "dark");

Now, it means you need to think this when the switch toggle is activated,

I don't think we throw an event for that you can listen - maybe we should and this would be a good Feature request.

You may need to post process the onclick attributes of the toggle switch so that it call both function

window.quartoToggleColorScheme()
document.documentElement.setAttribute("data-theme", <value>);

Though it needs a bit of hack to determine the value based on the current state...

So this is ideas until something easier can be done.

Other ideas is mimicking the styling for the Mastodon in your quarto theme file

CSS values are here.

forwards/forwards.github.io/blob/f3b24462bd7478025b5bb551349b5f604e2ba63e/mastodon-timeline.css#L12-L29

Instead of setting those variable based on data-theme attributes, you could make them react to Quarto dark / light. Possibly providing a different version as dark and light value: Quarto - HTML Theming

Hope those ideas are clear

[cderv]

I opened to remember:

Provide a way to tell other JS tools about light / dark mode switch