useSystemTheme.ts

useSystemTheme.ts

import * as React from "react";

function getMediaQuery(): MediaQueryList {
  const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
  return mediaQuery;
}

function subscribe(onStoreChange: () => void): () => void {
  const mediaQuery = getMediaQuery();
  mediaQuery.addEventListener("change", onStoreChange);
  return () => {
    mediaQuery.removeEventListener("change", onStoreChange);
  };
}

function getSnapshot(): boolean {
  const mediaQuery = getMediaQuery();
  return mediaQuery.matches;
}

export function useSystemTheme(): "dark" | "light" {
  return React.useSyncExternalStore(subscribe, getSnapshot) ? "dark" : "light";
}