Closed Abhishek-465 closed 2 weeks ago
Thanks!
Looks like it needs a bit more work though. The toggle seems to be jumping around/changing states, and it doesn't seem to be aware of prefers-color-scheme
It does make the CSS more complicated, to support prefers-color-scheme
but it's worth it to respect users system settings.
body {
@include scheme($light_scheme)
}
body[data-scheme=dark] {
@include scheme($dark_scheme)
}
@media (prefers-color-scheme: dark) {
body {
@include scheme($dark_scheme)
}
body[data-scheme=light] {
@include scheme($light_scheme)
}
}
Also, it would be nice to store the value in local storage too when it is toggled, if possible.
I handle that on my blog like this:
document.body.dataset['scheme'] = window.localStorage.getItem('scheme') || '';
document.querySelectorAll('a.scheme-switcher').forEach(a => a.addEventListener('click', (e) => {
e.preventDefault();
document.body.dataset['scheme'] = e.target.dataset['scheme'];
window.localStorage.setItem('scheme', e.target.dataset['scheme']);
}));
Okay then i am correcting it.
Added a button to toggle between light and dark mode. Issue #635