Adapting Mastodon widget to respond to dark mode toggle

We have switched the Forwards website to Quarto and are using the Mastodon embed timeline widget: i.j / Mastodon timeline feed 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:
https://github.com/forwards/forwards.github.io/blob/main/mastodon-timeline.js#L256-L275

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

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, :thinking:

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.

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 :sweat_smile:

1 Like

I opened to remember:

This topic was automatically closed 21 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.