feat: build production-ready wtr weather PWA

components/ui/theme-toggle.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Moon, Sun, SunMoon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+export function ThemeToggle() {
+  const [mounted, setMounted] = useState(false);
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    const root = document.documentElement;
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    const syncSystemTheme = () => {
+      if (!window.localStorage.getItem("wtr:theme")) {
+        root.classList.toggle("dark", media.matches);
+        setIsDark(media.matches);
+      }
+    };
+    const animationFrame = window.requestAnimationFrame(() => {
+      setIsDark(root.classList.contains("dark"));
+      setMounted(true);
+    });
+    media.addEventListener("change", syncSystemTheme);
+    return () => {
+      window.cancelAnimationFrame(animationFrame);
+      media.removeEventListener("change", syncSystemTheme);
+    };
+  }, []);
+
+  const toggleTheme = () => {
+    const nextIsDark = !isDark;
+    document.documentElement.classList.toggle("dark", nextIsDark);
+    window.localStorage.setItem("wtr:theme", nextIsDark ? "dark" : "light");
+    setIsDark(nextIsDark);
+  };
+
+  return (
+    <Button
+      variant="icon"
+      type="button"
+      aria-label={!mounted ? "Zmień motyw" : isDark ? "Włącz jasny motyw" : "Włącz ciemny motyw"}
+      onClick={toggleTheme}
+    >
+      {!mounted ? <SunMoon className="size-4" /> : isDark ? <Sun className="size-4" /> : <Moon className="size-4" />}
+    </Button>
+  );
+}