useColorScheme.js

import { useState, useEffect, useRef, useMemo } from 'react';

const COLOR_SCHEMES = ['no-preference', 'dark', 'light'];
const DEFAULT_TARGET_COLOR_SCHEME = 'light';

function resolveTargetColorScheme(scheme) {
  if (!(
    COLOR_SCHEMES.includes(scheme = String(scheme).toLowerCase()) ||
    scheme === 'no-preference'
  )) scheme = DEFAULT_TARGET_COLOR_SCHEME;

  return scheme;
}

function getCurrentColorScheme() {
  const QUERIES = {};

  return (getCurrentColorScheme = function() {
    for (let scheme of COLOR_SCHEMES) {
      const query = QUERIES.hasOwnProperty(scheme)
        ? QUERIES[scheme]
        : (QUERIES[scheme] = matchMedia(`(prefers-color-scheme: ${scheme})`));

      if (query.matches) return { query, scheme };
    }
  })();
}

// Define and export the `useColorScheme` hook
export default function useColorScheme() {}