forwards / forwards.github.io

Source repository for http://forwards.github.io/, published with GitHub Pages
http://forwards.github.io/
5 stars 3 forks source link

Adapt mastodon widget to use dark mode #5

Open hturner opened 10 months ago

hturner commented 10 months ago

The maston widget (defined here https://github.com/forwards/forwards.github.io/blob/main/mastodon-timeline.js) has a dark mode, but we need to work out how to activate it with 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.

I will ask on Posit Community in case any one there can help.

idotj commented 8 months ago

Hi, I'm working on the Mastodon embed timeline and I found this Issue https://community.rstudio.com/t/adapting-mastodon-widget-to-respond-to-dark-mode-toggle/178353/3 related with the theme color. I have not been able to reply on that page because the comments are closed.

At least I would like to give you some hints and future solutions.

In the current version (v3), you can change the color of the theme by editing the value default_theme in line 20. By default it's set in "auto", but checking your website, I will suggest to leave it as "light" because will fit better with your current design.

At the moment I'm improving all this on the next version (v4). I have to be honest that more users have proposed to change the way themes are managed. So, if your issue is not urgent, I can recommend you to wait a bit and move to version 4 in the future, where you can change the colors by simply calling a public function (from any JS file).

hturner commented 8 months ago

Thanks for taking a look at this @idotj! It looks like we could get somewhere with your suggestions and those of @cderv, but it will probably be worth holding on till v4 is available as this is not an urgent issue.

idotj commented 8 months ago

@hturner the last version of Mastodon Timeline was released:
https://gitlab.com/idotj/mastodon-embed-timeline

I added a folder with some examples, one of them will do the job for your needs (switching the theme color).
Any feedback is welcome!