byarielm.fyi
ATlast — you'll never need to find your favorites on another platform again. Find your favs in the ATmosphere.
atproto
1import { useState, useEffect } from "react";
2
3export function useTheme() {
4 const [isDark, setIsDark] = useState(() => {
5 // Check localStorage first, then system preference
6 const stored = localStorage.getItem("theme");
7 if (stored) return stored === "dark";
8 return window.matchMedia("(prefers-color-scheme: dark)").matches;
9 });
10
11 const [reducedMotion, setReducedMotion] = useState(() => {
12 return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
13 });
14
15 useEffect(() => {
16 // Apply theme to document
17 if (isDark) {
18 document.documentElement.classList.add("dark");
19 } else {
20 document.documentElement.classList.remove("dark");
21 }
22 localStorage.setItem("theme", isDark ? "dark" : "light");
23 }, [isDark]);
24
25 useEffect(() => {
26 // Listen for system motion preference changes
27 const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
28 const handler = (e: MediaQueryListEvent) => setReducedMotion(e.matches);
29 mediaQuery.addEventListener("change", handler);
30 return () => mediaQuery.removeEventListener("change", handler);
31 }, []);
32
33 const toggleTheme = () => setIsDark(!isDark);
34 const toggleMotion = () => setReducedMotion(!reducedMotion);
35
36 return { isDark, reducedMotion, toggleTheme, toggleMotion };
37}