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

ColorModeContext

Previous<ColorModeContextProvider>NextuseColorMode

Last updated 4 years ago

Was this helpful?

ColorModeContext provides access to all of the data made available by <ColorModeContextProvider>. This is mostly exposed for use in class components; if you're using function components, use instead.

NOTE: <ColorModeContextProvider> must be available in a higher scope* for this to be used.

Example

import { ColorModeContext } from 'react-color-mode'

export class DarkModeComponent extends React.Component {
  static contextType = ThemeContext

  render() {
    const isDarkMode = this.context.colorMode === 'dark'

    return (
      <div style={{
        backgroundColor: isDarkMode ? 'black' : 'white',
        color: isDarkMode ? 'white' : 'black',
      }} />
    )
  }
}
useColorMode