Ssr-dark-mode NPM

`next-dark-mode`

🌓 Theme your Next.js apps with a Dark Mode

Features

Auto mode

next-dark-mode supports an auto mode which automatically switches the user's theme based on the color mode selected on their operating system.

Windows and macOS both support setting the dark or light mode based on the time of the day.

It is achieved via prefers-color-scheme media query.

No page load glitch

next-dark-mode uses configurable cookies to persist the state of the current theme, one for the auto mode and the other for the dark mode.

This prevents the common page load glitch with the local storage approach where the app loads on the client and then the state of the user's theme is fetched.

You can see it in this implementation by Pantaley Stoyanov.

NOTE: This library is not compatible with Next.js 9's Auto Partial Static Export feature as it has to read the cookies in getInitialProps function, which makes all pages incompatible with Automatic Partial Static Export feature.

Requirements

To use next-dark-mode, you must use react@16.8.0 or greater which includes Hooks.

Installation

$ yarn add next-dark-mode

or

$ npm install next-dark-mode

Usage

Wrap your _app.js component (located in /pages) with the HOC withDarkMode

// _app.js
import App from 'next/app'
import withDarkMode from 'next-dark-mode'

export default withDarkMode(App)

2) You can now use the useDarkMode hook

import { useDarkMode } from 'next-dark-mode'

const MyComponent = props => {
  const {
    autoModeActive,
    autoModeSupported,
    darkModeActive,
    switchToAutoMode,
    switchToDarkMode,
    switchToLightMode,
  } = useDarkMode()

 ...
}

Configuration

The withDarkMode function accepts a config object as its second argument. Every key is optional with default values mentioned:

autoModeCookieName: string - Name of the cookie used to determine whether the auto preset is enabled. Defaults to 'autoMode'.
darkModeCookieName: string - Name of the cookie used to determine whether the dark preset is enabled. Defaults to 'darkMode'.
defaultMode: string - Determines the default color mode when there's no cookie set on the client. This usually happens on the first ever page load. It can either be 'dark' or 'light' and it defaults to 'light'.
provider: boolean - By default the main App is wrapped in a DarkModeContext.Provider to utilize the useDarkMode hook. If you want to use the library with a CSS-in-JS solution like emotion or styled-components, you can disable the default provider. Defaults to true.