react-color-mode
main
main
  • Introduction
  • Getting Started
  • Recipes
    • Next.js
  • API
    • <ColorModeScript>
    • <ColorModeContextProvider>
    • ColorModeContext
    • useColorMode
  • Other Important Stuff
    • Code of Conduct
Powered by GitBook
On this page

Was this helpful?

  1. API

<ColorModeContextProvider>

Previous<ColorModeScript>NextColorModeContext

Last updated 4 years ago

Was this helpful?

<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 and <ColorModeContextProvider>, otherwise you may still see a color mode flash when loading the app.

Prop

Default

Description

defaultMode

system

default color mode is used if one hasn't been explicitly set by your app; can be system, light, or dark

storageKey

react-color-mode

this is the key that will be set on the <html> element, as well as in localStorage

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>
  )
}
<ColorModeScript>