Hook to switch the color scheme

useTheme.ts

import { useCallback } from 'react';
import useLocalStorage from 'use-local-storage';

enum ColorScheme {
  Dark = 'dark',
  Light = 'light',
}

const useTheme = (): [`${ColorScheme}`, () => void] => {
  const isUserDefaultThemeDark = window.matchMedia(
    `(prefers-color-scheme: ${ColorScheme.Dark})`,
  ).matches;
  const [theme, setTheme] = useLocalStorage<`${ColorScheme}`>(
    'theme',
    isUserDefaultThemeDark ? ColorScheme.Dark : ColorScheme.Light,
  );

  const switchTheme = useCallback(() => {
    const newTheme =
      theme === ColorScheme.Light ? ColorScheme.Dark : ColorScheme.Light;

    setTheme(newTheme);
  }, [setTheme, theme]);

  return [theme, switchTheme];
};

export default useTheme;