search

ubik23 / charactercreator

A frontend interface for creating characters in SVG.
Other
306 stars 78 forks source link

Light/Dark mode not working by default #133

Open ubik23 opened 4 years ago

ubik23 commented 4 years ago

If I set my theme to dark mode in Firefox like so:

https://geekermag.com/firefox-dark-theme/

And I open the Character Creator, it still shows light mode by default.

Perhaps the solution can be found here:

https://css-tricks.com/dark-modes-with-css/

Tbenito commented 4 years ago

The code contained in this file ( src/sass/_style.scss ) is supposed to fix this problem. But it doesn't work.

The good news is that it works fine with the dark mode of the OS (windows), automatically. It's cool.

Tbenito commented 4 years ago

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { console.log('the dark mode'); }else { console.log('the light mode'); }

the above code should detect the current browser theme, it doesn't work.

But it still detects the OS theme, that's a good point.

ubik23 commented 4 years ago

It looks like it isn't available yet :-/

"The current browser support is very limited, and it’s not available in any of the stable releases of any vendor."

https://www.freecodecamp.org/news/how-to-detect-a-users-preferred-color-scheme-in-javascript-ec8ee514f1ef/

is there a way to remember a user's preference? If we use the checkbox hack, Firefox will remember the state of the checkbox. Any ideas?

millette commented 4 years ago

Cookie. See also https://github.com/GoogleChromeLabs/dark-mode-toggle