Function useSystemColorMode

packages/react/src/ThemeProvider.tsx:158–197

()

}

function useSystemColorMode() {
  const [systemColorMode, setSystemColorMode] = React.useState(getSystemColorMode)

  React.useEffect(() => {
    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
    const media = window?.matchMedia?.('(prefers-color-scheme: dark)')

    function matchesMediaToColorMode(matches: boolean) {
      return matches ? 'night' : 'day'
    }

    function handleChange(event: MediaQueryListEvent) {
      const isNight = event.matches
      setSystemColorMode(matchesMediaToColorMode(isNight))
    }

    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
    if (media) {
      // just in case the preference changed before the event listener was attached
      const isNight = media.matches
      setSystemColorMode(matchesMediaToColorMode(isNight))
      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
      if (media.addEventListener !== undefined) {
        media.addEventListener('change', handleChange)
        return function cleanup() {
          media.removeEventListener('change', handleChange)
        }
      }
      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
      else if (media.addListener !== undefined) {
        media.addListener(handleChange)
        return function cleanup() {
          media.removeListener(handleChange)
        }
      }
    }
  }, [])

  return systemColorMode
}

function getSystemColorMode(): ColorMode {
  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition