Adds a theme toggle component (#21)

* adds accessible theme toggle component

Author: soupaJ

components/header.tsx

@@ -1,6 +1,7 @@
 import constants from "../constants";
 import { Link } from "./link";
 import Logo from "./logo";
+import ThemeToggle from "./theme-toggle/theme-toggle";
 
 interface HeaderProps {
   variant?: "minimal";
@@ -37,6 +38,7 @@ export default function Header({ variant }: HeaderProps) {
               </li>
             </>
           ) : null}
+          <ThemeToggle />
         </ol>
       </nav>
     </header>

components/theme-toggle/moon.tsx

@@ -0,0 +1,10 @@
+export default function Moon(props) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...props}>
+      <path
+        d="M32 256c0-123.8 100.3-224 223.8-224c11.36 0 29.7 1.668 40.9 3.746c9.616 1.777 11.75 14.63 3.279 19.44C245 86.5 211.2 144.6 211.2 207.8c0 109.7 99.71 193 208.3 172.3c9.561-1.805 16.28 9.324 10.11 16.95C387.9 448.6 324.8 480 255.8 480C132.1 480 32 379.6 32 256z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

components/theme-toggle/sun.tsx

@@ -0,0 +1,22 @@
+export default function Sun(props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      strokeLinecap="round"
+      {...props}
+    >
+      <circle cx="12" cy="12" r="6" fill="currentColor" />
+      <g stroke="currentColor" strokeWidth="2">
+        <line x1="12" y1="1" x2="12" y2="3" />
+        <line x1="12" y1="21" x2="12" y2="23" />
+        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+        <line x1="1" y1="12" x2="3" y2="12" />
+        <line x1="21" y1="12" x2="23" y2="12" />
+        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+      </g>
+    </svg>
+  );
+}

components/theme-toggle/theme-toggle.tsx

@@ -0,0 +1,90 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import Moon from "./moon";
+import Sun from "./sun";
+
+const resolveColorScheme = (isDark) => (isDark ? "dark" : "light");
+
+export default function ThemeToggle() {
+  // This is required to prevent the animation from playing on
+  // initial mount as well as update the aria-label.
+  const changedRef = useRef(false);
+  const [colorScheme, setColorScheme] = useState(null);
+  const handleChange = useCallback(
+    (ev) => {
+      const colorScheme = resolveColorScheme(ev.target.checked);
+      if (!changedRef.current) {
+        changedRef.current = true;
+      }
+      setColorScheme(colorScheme);
+      // Notify the document so it will update the theme.
+      // Refer to _document.js for implementation.
+      window.dispatchEvent(
+        new CustomEvent("colorSchemeChange", {
+          detail: { colorScheme, persist: true },
+        })
+      );
+    },
+    [setColorScheme]
+  );
+
+  useEffect(() => {
+    const query = window.matchMedia("(prefers-color-scheme: dark)");
+    const listener = ({ matches }) => {
+      setColorScheme(resolveColorScheme(matches));
+    };
+
+    query.addEventListener("change", listener);
+
+    // Sets the initial color scheme based on user's preference.
+    // Doing this here so that it's ran on client side only.
+    setColorScheme(
+      resolveColorScheme(document.documentElement.classList.contains("dark"))
+    );
+
+    return () => {
+      query.removeEventListener("change", listener);
+    };
+  }, [setColorScheme]);
+  const hasThemeChanged = changedRef.current;
+
+  return (
+    <div>
+      <input
+        type="checkbox"
+        title="Toggle between light & dark modes"
+        // Screen readers should announce changes to aria-label
+        // It's set to auto for the first time since the user didn't
+        // actually change it and we set the theme automatically based
+        // on preference.
+        aria-label={hasThemeChanged ? colorScheme : "auto"}
+        aria-live="polite"
+        id="theme-toggle"
+        className={`sr-only peer`}
+        onChange={handleChange}
+        data-changed={hasThemeChanged}
+        checked={colorScheme === "dark"}
+      />
+      <div
+        className={
+          "overflow-hidden rounded-full w-8 h-8 border-2 isolate " +
+          "dark:border-gray-200 border-slate-300 bg-gray-50/10 " +
+          "peer-focus-visible:outline-2 peer-focus-visible:outline-white " +
+          "peer-focus-visible:outline peer-focus-visible:border-sky-600"
+        }
+      >
+        <label
+          htmlFor="theme-toggle"
+          className={
+            '[[aria-label="light"]~*_&]:motion-safe:animate-rotate-0-180 ' +
+            '[[aria-label="dark"]~*_&]:motion-safe:animate-rotate-180-360 ' +
+            "block h-full w-[200%] whitespace-nowrap rotate-180 origin-center " +
+            "select-none dark:rotate-0"
+          }
+        >
+          <Moon className="h-full p-1.5 inline-block" aria-hidden="true" />
+          <Sun className="h-full p-1.5 inline-block" aria-hidden="true" />
+        </label>
+      </div>
+    </div>
+  );
+}