get theme toggle working

Author: raygesualdo

src/components/ThemeToggle.astro

@@ -0,0 +1,32 @@
+<button data-theme-toggler class="text-sky-600 underline">Toggle theme</button>
+
+<script is:inline>
+  const htmlEl = document.querySelector('html')
+  const theme = (() => {
+    if (localStorage?.getItem('theme')) {
+      return localStorage.getItem('theme')
+    }
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      return 'dark'
+    }
+    return 'light'
+  })()
+
+  if (theme === 'light') {
+    htmlEl.classList.remove('dark')
+  } else {
+    htmlEl.classList.add('dark')
+  }
+
+  localStorage?.setItem('theme', theme)
+
+  const handleToggleClick = () => {
+    const element = htmlEl
+    element.classList.toggle('dark')
+
+    const isDark = element.classList.contains('dark')
+    localStorage?.setItem('theme', isDark ? 'dark' : 'light')
+  }
+
+  document.querySelector('[data-theme-toggler]').addEventListener('click', handleToggleClick)
+</script>

src/layouts/Layout.astro

@@ -2,6 +2,7 @@
 import Link from '../components/Link.astro'
 import IconGitHub from '../components/IconGitHub.astro'
 import IconTwitter from '../components/IconTwitter.astro'
+import ThemeToggle from '../components/ThemeToggle.astro'
 
 interface Props {
   title?: string
@@ -71,7 +72,7 @@ const { title } = Astro.props
         View source code
       </Link>{' '}
        |{' '}
-      <button class="text-sky-600 underline"> Toggle theme</button>
+      <ThemeToggle />
     </footer>
   </body>
 </html>