useColorMode

import { useColorMode } from 'theme-ui'

function useColorMode<T extends string = string>(): [
  T,
  Dispatch<SetStateAction<T>>
]

import { useColorMode } from 'theme-ui'

function ColorModeToggle() {
  const [colorMode, setColorMode] = useColorMode()

  return (
    <button
      onClick={() => {
        setColorMode(colorMode === 'light' ? 'dark' : 'light')
      }}
    >
      {colorMode === 'light' ? 'Dark' : 'Light'}
    </button>
  )
}

type ColorMode = 'light' | 'dark' | 'sepia'

function ColorModeToggle() {
  const [colorMode, setColorMode] = useColorMode<ColorMode>()

  return (
    <select
      value={colorMode}
      onChange={(e) => setColorMode(e.target.value as ColorMode)}
    >
      <option value="light">Light</option>
      <option value="dark">Dark</option>
      <option value="sepia">Sepia</option>
    </select>
  )
}

function toggleColorMode() {
  const [colorMode, setColorMode] = useColorMode()

  const toggle = () => {
    setColorMode((prevMode) => {
      if (prevMode === 'light') return 'dark'
      if (prevMode === 'dark') return 'sepia'
      return 'light'
    })
  }

  return <button onClick={toggle}>Toggle</button>
}

export default {
  config: {
    // Set the initial color mode (default)
    initialColorModeName: 'light',
    
    // Enable/disable localStorage persistence
    useLocalStorage: true,
    
    // Use system color scheme preference
    // false: disabled
    // true: only on initial load
    // 'system': always follow system preference
    useColorSchemeMediaQuery: true,
  },
  colors: {
    text: '#000',
    background: '#fff',
    modes: {
      dark: {
        text: '#fff',
        background: '#000',
      },
    },
  },
}

// ❌ This will throw an error
function App() {
  const [colorMode, setColorMode] = useColorMode() // Error!
  return <div>...</div>
}

// ✅ This works
import { ThemeProvider } from 'theme-ui'
import theme from './theme'

function App() {
  return (
    <ThemeProvider theme={theme}>
      <MyComponent />
    </ThemeProvider>
  )
}

function MyComponent() {
  const [colorMode, setColorMode] = useColorMode() // Works!
  return <div>...</div>
}