32 lines
881 B
TypeScript
32 lines
881 B
TypeScript
import { useEffect, useState } from "react";
|
|
|
|
export function useSystemTheme(): "light" | "dark" {
|
|
const getSystemTheme = () => {
|
|
if (typeof window !== "undefined" && window.matchMedia) {
|
|
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" as const;
|
|
}
|
|
return "light" as const;
|
|
};
|
|
|
|
const [theme, setTheme] = useState<"light" | "dark">(getSystemTheme());
|
|
|
|
useEffect(() => {
|
|
if (typeof window === "undefined" || !window.matchMedia) {
|
|
return;
|
|
}
|
|
|
|
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
|
const handleChange = (event: MediaQueryListEvent) => {
|
|
setTheme(event.matches ? "dark" : "light");
|
|
};
|
|
|
|
mediaQuery.addEventListener("change", handleChange);
|
|
|
|
return () => {
|
|
mediaQuery.removeEventListener("change", handleChange);
|
|
};
|
|
}, []);
|
|
|
|
return theme;
|
|
};
|