Toggle theme with `<html class="dark">`

This allows to: * Still default to `prefers-color-scheme`. * Set theme with a button when implemented. Script is inside `head` to avoid FOUC.
3 years ago · c530fffdc8
2 changed files with 8 additions and 1 deletions
--- a/src/www/css/vendor/tailwind.min.css
+++ b/src/www/css/vendor/tailwind.min.css
--- a/src/www/index.html
+++ b/src/www/index.html
@ -9,6 +9,13 @@
  <link rel="apple-touch-icon" href="./img/apple-touch-icon.png">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <script>
    if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  </script>
 </head>
 <style>