feat(confidence-engine): add dark mode

components/theme-toggle.jsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import {
+  readThemePreference,
+  resolveTheme,
+  saveThemePreference,
+  toggleTheme,
+} from "@/lib/theme-preference.js";
+
+function applyTheme(theme) {
+  document.documentElement.dataset.theme = theme;
+  document.documentElement.style.colorScheme = theme;
+}
+
+export default function ThemeToggle() {
+  const [theme, setTheme] = useState("light");
+
+  useEffect(() => {
+    const nextTheme = resolveTheme({
+      savedTheme: readThemePreference(window.localStorage),
+      systemPrefersDark: window.matchMedia?.("(prefers-color-scheme: dark)").matches,
+    });
+    setTheme(nextTheme);
+    applyTheme(nextTheme);
+  }, []);
+
+  const switchTheme = () => {
+    const nextTheme = toggleTheme(theme);
+    setTheme(nextTheme);
+    saveThemePreference(nextTheme, window.localStorage);
+    applyTheme(nextTheme);
+  };
+
+  const isDark = theme === "dark";
+  return (
+    <button
+      type="button"
+      onClick={switchTheme}
+      aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
+      className="theme-toggle rounded-lg border px-3 py-2 text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-500 focus-visible:ring-offset-2"
+    >
+      <span aria-hidden="true" className="mr-1.5">{isDark ? "☀" : "☾"}</span>
+      {isDark ? "Light mode" : "Dark mode"}
+    </button>
+  );
+}