useSystemThemePreference

useSystemThemePreference.ts

export const useSystemThemePreference = (): 'dark' | 'light' => {
  const systemPrefQuery = useMemo(
    () => window.matchMedia('(prefers-color-scheme: dark)'),
    []
  );
  const [systemThemePreference, setSystemThemePreference] = useState<
    'dark' | 'light'
  >(systemPrefQuery.matches ? 'dark' : 'light');
  const onSystemPreference = useCallback(() => {
    setSystemThemePreference(systemPrefQuery.matches ? 'dark' : 'light');
  }, [systemPrefQuery.matches]);
  useEffect(() => {
    systemPrefQuery.addEventListener('change', onSystemPreference);
    return () => {
      systemPrefQuery.removeEventListener('change', onSystemPreference);
    };
  }, [onSystemPreference, systemPrefQuery]);
  return systemThemePreference;
};