Function useCurrentColorScheme

packages/dev/docs/src/ThemeSwitcher.js:21–43

()

import {theme} from '@react-spectrum/theme-default';

function useCurrentColorScheme() {
  let mq = useMemo(() => window.matchMedia('(prefers-color-scheme: dark)'), []);
  let getCurrentColorScheme = useCallback(
    () => localStorage.theme || (mq.matches ? 'dark' : 'light'),
    [mq]
  );
  let [colorScheme, setColorScheme] = useState(() => getCurrentColorScheme());

  useEffect(() => {
    let onChange = () => {
      setColorScheme(getCurrentColorScheme());
    };

    mq.addListener(onChange);
    window.addEventListener('storage', onChange);
    return () => {
      mq.removeListener(onChange);
      window.removeEventListener('storage', onChange);
    };
  }, [getCurrentColorScheme, mq]);

  return colorScheme;
}

export function ThemeProvider({
  children,