Function useThemeSync

webapp/_webapp/src/hooks/useThemeSync.ts:26–46

()

}

export function useThemeSync(): void {
  const themeMode = useSettingStore((s) => s.themeMode);

  useEffect(() => {
    if (themeMode === "light") {
      applyTheme(false);
      return;
    }
    if (themeMode === "dark") {
      applyTheme(true);
      return;
    }

    // themeMode === "auto": follow system
    const media = window.matchMedia("(prefers-color-scheme: dark)");
    const update = () => applyTheme(media.matches);
    update();
    media.addEventListener("change", update);
    return () => media.removeEventListener("change", update);
  }, [themeMode]);
}