Files
LaunchPad/apps/frontend/src/hooks/useTheme.ts

23 lines
751 B
TypeScript

import { useEffect, useState } from "react";
export type Theme = "light" | "dark";
export function useTheme(): [Theme, () => void] {
const [theme, setTheme] = useState<Theme>(() => {
if (typeof window === "undefined") return "dark";
const stored = window.localStorage.getItem("launchpad-theme");
if (stored === "light" || stored === "dark") return stored;
return window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light";
});
useEffect(() => {
document.documentElement.classList.toggle("dark", theme === "dark");
window.localStorage.setItem("launchpad-theme", theme);
}, [theme]);
const toggle = () => setTheme((t) => (t === "dark" ? "light" : "dark"));
return [theme, toggle];
}