useColorSchemePreference.ts

import React from "react";

export type ColorScheme = "light" | "dark";

export default function useColorSchemePreference(
  defaultColorScheme: ColorScheme = "light"
) {
  let darkQuery = "(prefers-color-scheme: dark)";
  let [colorScheme, setColorScheme] = React.useState<ColorScheme>(
    typeof window === "object" && window.matchMedia
      ? window.matchMedia(darkQuery).matches
        ? "dark"
        : "light"
      : defaultColorScheme
  );

  React.useEffect(() => {
    function handleChange(event: MediaQueryListEvent) {
      setColorScheme(event.matches ? "dark" : "light");
    }

    if (window.matchMedia) {
      let mql = window.matchMedia(darkQuery);
      mql.addEventListener("change", handleChange);
      return () => {
        mql.removeEventListener("change", handleChange);
      };
    }
  }, []);

  return colorScheme;
}

// Use it like:
let colorScheme: ColorScheme = useColorSchemePreference();