Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

next-dark-mode

Package Overview
Dependencies
Maintainers
1
Versions
28
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

next-dark-mode

Enable dark mode for Next.js

  • 3.0.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

next-dark-mode

🌓 Theme your Next.js apps with a Dark Mode

license npm bundle size npm version

Contents:

Features

Auto mode

next-dark-mode optionally supports auto mode which automatically switches the user's theme as per 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

  1. 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,    // boolean - whether the auto mode is active or not
        autoModeSupported, // boolean - whether the auto mode is supported on this browser
        darkModeActive,    // boolean - whether the dark mode is active or not
        switchToAutoMode,  // function - toggles the auto mode on
        switchToDarkMode,  // function - toggles the dark mode on
        switchToLightMode, // function - toggles the light mode on
      } = useDarkMode()
    
     ...
    }
    

With CSS-in-JS libraries (like emotion or styled-components)

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

    // _app.js
    import withDarkMode from 'next-dark-mode'
    
    function MyApp(props) {
      const {
        autoModeActive,
        autoModeSupported,
        darkModeActive,
        switchToAutoMode,
        switchToDarkMode,
        switchToLightMode,
      } = props.darkMode
    
      ...
    }
    
    export default withDarkMode(MyApp)
    
  2. You can now pass these values to the ThemeProvider so that you can use it in your components

    // _app.js
    import { ThemeProvider } from '@emotion/react' // or styled-components
    import withDarkMode from 'next-dark-mode'
    
    function MyApp({ Component, darkMode, pageProps }) {
      const {
        autoModeActive,
        autoModeSupported,
        darkModeActive,
        switchToAutoMode,
        switchToDarkMode,
        switchToLightMode,
      } = darkMode
    
      return (
        <ThemeProvider theme={{ darkMode: darkModeActive, ... }}>
          <Component {...pageProps} />
        </ThemeProvider>
      )
    }
    
    export default withDarkMode(MyApp)
    

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'.
  • cookieOptions: object - Configuration options for the cookies that gets set on the client. Defaults to { sameSite: 'lax' }.
  • 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'.

Resources

FAQs

Package last updated on 13 Mar 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc