useColorScheme.ts

// only works on react 18

import { useSyncExternalStore } from "react";

export const useColorScheme = () => {
  const scheme = useSyncExternalStore(
    subscribe,
    getSnapshot,
    getServerSnapshot
  );

  return scheme;
};

function getServerSnapshot() {
  return "no-preference";
}

function getSnapshot() {
  if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
    return "dark";
  }
  if (window.matchMedia("(prefers-color-scheme: light)").matches) {
    return "light";
  }

  return "no-preference";
}

function subscribe(callback: (callback: MediaQueryListEvent) => unknown) {
  const isDark = window.matchMedia("(prefers-color-scheme: dark)");
  const isLight = window.matchMedia("(prefers-color-scheme: light)");

  isDark.addEventListener("change", callback);
  isLight.addEventListener("change", callback);
  return () => {
    isDark.removeEventListener("change", callback);
    isLight.removeEventListener("change", callback);
  };
}