@uiw/react-use-colorscheme/esm/index.js

useColorScheme() provides access to the devices color scheme.

import { useSyncExternalStore } from 'react';
export var ColorScheme = /*#__PURE__*/function (ColorScheme) {
  ColorScheme["Dark"] = "dark";
  ColorScheme["Light"] = "light";
  ColorScheme["NoPreference"] = "no-preference";
  return ColorScheme;
}({});
function getSnapshot() {
  var matcher = window.matchMedia('(prefers-color-scheme: dark)').matches;
  return matcher ? ColorScheme.Dark : ColorScheme.Light;
}
function getServerSnapshot() {
  return ColorScheme.NoPreference;
}
function subscribe(callback) {
  var matcher = window.matchMedia('(prefers-color-scheme: dark)');
  matcher.addEventListener('change', callback);
  return () => {
    if (matcher) {
      matcher.removeEventListener('change', callback);
    }
  };
}
export function useColorScheme() {
  var colorscheme = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
  return colorscheme;
}