Hook ColorScheme, is dark mode etc

useColorScheme.ts

import { useState, useEffect } from 'react'

export enum ColorScheme {
  Dark = 'dark',
  Light = 'light',
  NoPreference = 'no-preference',
}

export const useIsColorScheme = (colorScheme: ColorScheme) => {
  const [isColorScheme, setIsColorScheme] = useState<boolean>(false)

  const onChange = (ev: MediaQueryListEvent) => {
    setIsColorScheme(ev.matches)
  }

  useEffect(() => {
    const matcher = window.matchMedia(`(prefers-color-scheme: ${colorScheme})`)
    matcher.addEventListener('change', onChange)
    setIsColorScheme(matcher.matches)

    return () => {
      matcher.removeEventListener('change', onChange)
    }
  }, [colorScheme])

  return isColorScheme
}

export const useColorScheme = (initialValue: ColorScheme = ColorScheme.NoPreference): ColorScheme => {
  const [colorScheme, setColorScheme] = useState<ColorScheme>(initialValue)

  const isColorScheme: Record<ColorScheme, boolean> = {
    [ColorScheme.Dark]: useIsColorScheme(ColorScheme.Dark),
    [ColorScheme.Light]: useIsColorScheme(ColorScheme.Light),
    [ColorScheme.NoPreference]: useIsColorScheme(ColorScheme.NoPreference),
  }

  useEffect(() => {
    const [color] = entries(isColorScheme).find(([_k, isActive]) => isActive) ?? [initialValue, true]
    setColorScheme(color)
  }, [isColorScheme, initialValue])

  return colorScheme
}
    
const entries = <K extends string | number | symbol, V>(o: Record<K, V>): Array<[K, V]> => {
  return Object.entries(o) as Array<[K, V]>
}