Recent searches
Search options
Administered by:
Tried to build a darkmode button in JavaScript, and it Works! 
But only once
You'll have to refresh the page to switch back. And really don't know how to resolve this.
Maybe its because I have two buttons?
@rulesbyrosita
It really depends on the way you did it, hard to say without seeing the source code.
BTW think about storing visitor's setting in sessionStorage, or simply do it completely without JS in plain CSS and check for user's browser settings via https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
@amarok Thanks for your tip!
I have prefers- colorscheme in my css. But I would like to give the user the option to switch to light or dark as well.
This is my JS code, starting on line 43.
https://github.com/Rosita311/RulesbyRosita-theme/blob/darkmode/script.js
I also found this article
https://dev.to/whitep4nth3r/the-best-lightdark-mode-theme-toggle-in-javascript-368f
@rulesbyrosita
I don't have a suggestion for your problem but have a different suggestion. Instead of changing the button name based on its state, give it a name like "Dark mode" and the attribute `aria-pressed="false"`. When dark mode is enabled, toggle the attribute to "true"; this will be more reliable and clear way to convert the state for screen reader users.
@amarok
@cwilcox808 @amarok It works! I deployed it on the darkmode branch. I still need to take a look to aria-pressed = false and focus and inert. But it works (for now)
@rulesbyrosita @amarok I contributor a dark mode switch to a documentation website before, you can find my logic here, and hope it helps you debug your issue.
https://github.com/heybran/timber-docs/blob/light-mode-support/assets/js/themeSwitcher.js
And this is the website: https://timber.github.io/docs/v2/
Thanks for the tip! It works! I deployed it on the darkmode branch. I still need to take a look to aria-pressed = false and focus and inert. But it works (for now)
@rulesbyrosita @amarok Looking great.