import { useEffect, useState } from "react"; /** * Returns `true` when the user's system prefers a dark color scheme. * Reactive: updates when the media query changes. */export function useIsDark(): boolean { const [dark, setDark] = useState<boolean>(() => { if (typeof window === "undefined") return false; return window.matchMedia("(prefers-color-scheme: dark)").matches; }); useEffect(() => { if (typeof window === "undefined") return; const mql = window.matchMedia("(prefers-color-scheme: dark)"); const handler = (event: MediaQueryListEvent) => setDark(event.matches); mql.addEventListener("change", handler); return () => mql.removeEventListener("change", handler); }, []); return dark;}
import { useEffect, useState } from "react";
/**
* Returns `true` when the user's system prefers a dark color scheme.
* Reactive: updates when the media query changes.
*/
export function useIsDark(): boolean {
const [dark, setDark] = useState<boolean>(() => {
if (typeof window === "undefined") return false;
return window.matchMedia("(prefers-color-scheme: dark)").matches;
});
useEffect(() => {
if (typeof window === "undefined") return;
const mql = window.matchMedia("(prefers-color-scheme: dark)");
const handler = (event: MediaQueryListEvent) => setDark(event.matches);
mql.addEventListener("change", handler);
return () => mql.removeEventListener("change", handler);
}, []);
return dark;
}