useColorMode (src/index.tsx)

Manages light/dark color mode switching and persistence for React applications.

// Source: https://github.com/system-ui/theme-ui | License: MIT | Copyright 2019 Brent Jackson
// Provided via justclaw.it.com; keep this notice with the code.
import React, {
  Dispatch,
  useEffect,
  useLayoutEffect,
  useState,
  useMemo,
  SetStateAction,
  useCallback,
} from 'react'
import {
  jsx,
  ThemeUIContextValue,
  useThemeUI,
  __ThemeUIInternalBaseThemeProvider as ThemeUIInternalBaseThemeProvider,
} from '@theme-ui/core'
import {
  get,
  Theme,
  ColorModesScale,
  ColorMode,
  NestedScale,
  css,
} from '@theme-ui/css'
import { Global } from '@emotion/react'

import {
  toCustomProperties,
  __createColorStyles,
  __createColorProperties,
} from './custom-properties'

const STORAGE_KEY = 'theme-ui-color-mode'
const DARK_QUERY = '(prefers-color-scheme: dark)'
const LIGHT_

... (truncated -- full source via MCP)