Feature/automatic dark mode

[edsonboldrini]

Closes #73

It uses the prefers-color-scheme config to determine what will be the first theme to save in the localStorage when there is no config. After saving it for the first time, it will always use the localStorage setting.

Needed to delete the previous package-lock because it doesn't work in my machine, too many postCSS errors. After deleting and reinstalling it worked.

Sorry for formatting the HTML.

Don't know why/if the script code at index.html which handles thheme is required, anyway, didn't remove it even not necessary in my dev environment. This one:

  <script>
    const localStorageTheme = localStorage.getItem("theme")
    const isBrowserDark = window && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
    const isDarkMode = !!localStorageTheme ? localStorageTheme === 'dark' : isBrowserDark

    if (isDarkMode) {
      document.documentElement.classList.add("dark");
      localStorage.setItem("theme", "dark");
      return;
    }
    document.documentElement.classList.remove("dark");
    localStorage.setItem("theme", "light");
    return;
  </script>

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
phived	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 7, 2024 11:06am

[LukeberryPi]

lgtm

[LukeberryPi]

script code is to avoid FOUC (flash of unstyled content), so i never mess with it.

your PR is great and solves the issue, merged!