FRAMER

Teaser

The new social experience for you and your friends. Sign up to learn more.

import { useEffect } from "react" export function useSystemTheme() { useEffect(() => { const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches; const htmlEl = document.documentElement; if (prefersDark) { htmlEl.classList.add("dark"); htmlEl.classList.remove("light"); } else { htmlEl.classList.add("light"); htmlEl.classList.remove("dark"); } // Optional: Listen for changes to theme preference const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)"); const handleChange = (e: MediaQueryListEvent) => { if (e.matches) { htmlEl.classList.add("dark"); htmlEl.classList.remove("light"); } else { htmlEl.classList.add("light"); htmlEl.classList.remove("dark"); } }; mediaQuery.addEventListener("change", handleChange); return () => { mediaQuery.removeEventListener("change", handleChange); }; }, []); }