Update index.html

[Abhishek-465]

Added a button to toggle between light and dark mode. Issue #635

[jmhobbs]

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)
  }
}

https://github.com/jmhobbs/velvetcache.org/blob/da5c44fe41712d90354b4cc72b03326c872b1fcb/src/_style/theme.scss#L68-L84

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') || '';

https://github.com/jmhobbs/velvetcache.org/blob/da5c44fe41712d90354b4cc72b03326c872b1fcb/src/_includes/_header.njk#L30

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']);
}));

https://github.com/jmhobbs/velvetcache.org/blob/da5c44fe41712d90354b4cc72b03326c872b1fcb/src/_includes/_footer.njk#L25-L29

[Abhishek-465]

Okay then i am correcting it.