Something went wrong. Try again.
This repository has no description
Something went wrong. Try again.
1.2 kB · 29 lines
TypeScript
123456789101112131415161718192021222324252627282930import { useEffect } from "react";import { useStore } from "../stores/useStore";import { applyResolvedTheme, resolveTheme } from "../theme";
// Owns applying the active theme to <html>. Mount once (in App). Resolves the stored// preference to a concrete theme name, writes `data-theme`, mirrors it into the store// (so consumers like the terminal can react), and — while the preference follows the// system — re-resolves live when the OS appearance changes.export function useThemeController() { const themePreference = useStore((s) => s.themePreference); const setResolvedTheme = useStore((s) => s.setResolvedTheme);
useEffect(() => { const mql = window.matchMedia?.("(prefers-color-scheme: dark)");
const apply = () => { const name = resolveTheme(themePreference, mql?.matches ?? false); applyResolvedTheme(name); setResolvedTheme(name); };
apply();
// Only the system-following preference cares about OS appearance changes. if (themePreference.mode !== "system" || !mql) return; mql.addEventListener("change", apply); return () => mql.removeEventListener("change", apply); }, [themePreference, setResolvedTheme]);}