Next.js

PreviousGetting Started Next<ColorModeScript>

Last updated 4 years ago

Was this helpful?

Next.js

This library was originally designed to work with Next.js, so integrating it is beautifully simple.

Install the script

react-color-mode provides a <script> tag that needs to be injected as high as possible into your document (preferably in the <head>). This script allows us to setup the color mode before the rest of the page is loaded, preventing the page from flickering on page load. It needs to be installed in your (Learn more about custom documents at ):

// pages/_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document'
import { ColorModeScript } from 'react-color-mode'

export default class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <ColorModeScript />
        </Head>

        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

Install the Context Provider

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

export default function App({ Component, pageProps }) {
  return (
    <ColorModeContextProvider>
      <Component {...pageProps} />
    </ColorModeContextProvider>
  )
}

Use and update the color mode

// pages/index.js
import { useColorMode } from 'react-color-mode'

export default function HomePage() {
  const {
    colorMode,
    updateColorMode,
  } = useColorMode()

  const isDarkMode = colorMode === 'dark'

  return (
    <div style={{
      backgroundColor: isDarkMode ? 'black' : 'white',
      color: isDarkMode ? 'white' : 'black',
    }}>
      <p>Hello!</p>

      <button onClick={() => updateColorMode('dark')}>
        Dark mode
      </button>
      <button onClick={() => updateColorMode('light')}>
        Light mode
      </button>
      <button onClick={() => updateColorMode('system')}>
        System mode
      </button>
    </div>
  )
}