46 lines
1.6 KiB
TypeScript
46 lines
1.6 KiB
TypeScript
// Copyright (c) 2026 Probo Inc <hello@probo.com>.
|
|
//
|
|
// Permission to use, copy, modify, and/or distribute this software for any
|
|
// purpose with or without fee is hereby granted, provided that the above
|
|
// copyright notice and this permission notice appear in all copies.
|
|
//
|
|
// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
// AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
// LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
// PERFORMANCE OF THIS SOFTWARE.
|
|
|
|
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;
|
|
};
|