<ColorModeContextProvider>

<ColorModeContextProvider> provides a React.Context from which you can access and update the current color mode.

NOTE: Make sure to use the same values for defaultMode and storageKey on both <ColorModeScript> and <ColorModeContextProvider>, otherwise you may still see a color mode flash when loading the app.

Example

// pages/_app.js
import { ColorModeContextProvider } from 'react-color-mode'

export default function App({ Component, pageProps }) {
  return (
    <ColorModeContextProvider
      defaultMode="dark"
      storageKey="my-dark-mode-storage-key">
      <Component {...pageProps} />
    </ColorModeContextProvider>
  )
}

Previous<ColorModeScript>NextColorModeContext

Last updated 3 years ago