The Future of Web Dev

Lightweight Dark Mode Management – Nextjs Darkmode

Integrate dark mode in your Next.js app with Nextjs Darkmode. Simple setup, no unthemed flash, supports user/system preferences.

Nextjs Darkmode is a library for handling dark mode in Next.js applications.

It supports user and system preferences through the prefers-color-scheme media query.

Live Demo

GitHub Repo

Key Features

🔨 Simple API for dark/light mode toggle.

💧 Custom transitions and theme manipulation via hooks

👁️ No flash on load (supports SSG, SSR, ISG, and Server Components)

⚙️ Compatible with Tailwind CSS, StyledComponents, emotion, and Material UI

🗝️ Full TypeScript support

🔑 Uses React 18+ Server components

Basic Usage

1. Installation:

   pnpm add nextjs-darkmode
   # or
   npm install nextjs-darkmode
   # or
   yarn add nextjs-darkmode

2. Import Styles:

   /* globals.css */
   @import "nextjs-darkmode/css";

3. Implementation:

   import { Core } from "nextjs-darkmode"; 
   import { Switch } from "nextjs-darkmode/switch";
   function MyApp({ Component, pageProps }) {
     return (
       <>
         <Core />
         <header>
           <Switch />
         </header>
         <Component {...pageProps} />
       </>
     );
   }
   export default MyApp;