Next Dark Mode

Overview

next-dark-mode is a theme for Next.js apps that allows users to switch between a dark and light mode. It also includes an auto mode feature that automatically adjusts the theme based on the user’s operating system preferences. The theme uses configurable cookies to persist the theme state, preventing any page load glitches.

Features

• Auto mode: Supports automatic theme switching based on the user’s operating system preferences.
• No page load glitch: Uses configurable cookies to persist the theme state, avoiding common page load glitches.
• Compatibility: Requires react@16.8.0 or higher, which includes Hooks.

Installation

To install next-dark-mode, follow these steps:

1. Make sure you have react@16.8.0 or higher installed.
2. Install next-dark-mode using npm: npm install next-dark-mode

Usage

To use next-dark-mode in your Next.js app, follow these steps:

1. Wrap your _app.js component located in /pages with the HOC withDarkMode.
2. Use the useDarkMode hook in your app to access the current theme.

If you are using CSS-in-JS libraries like emotion or styled-components, follow these additional steps:

1. Wrap your _app.js component located in /pages with the HOC withDarkMode.
2. Pass the theme values to the ThemeProvider so that you can use it in your components.

Summary

next-dark-mode is a theme for Next.js apps that provides support for dark and light modes, as well as an auto mode that adjusts the theme based on the user’s operating system preferences. It uses configurable cookies to persist the theme state and avoids any page load glitches. To use next-dark-mode, ensure that you have react@16.8.0 or higher installed and wrap your app component with the provided HOC.