Dark Mode in Next.js

Posted in Javascript

Dark mode has become a popular and essential feature in modern web applications. It not only provides a visually appealing alternative but also contributes to reducing eye strain, especially during nighttime browsing. In this tutorial, we’ll explore how to implement a dark mode feature in your Next.js applications.

Getting Started

To get started, let’s create a new Next.js project or use an existing one. Open your project in your preferred code editor and follow these steps:

1. Install Dependencies

We’ll need a library to manage the dark mode state. For this tutorial, we’ll use the popular use-dark-mode library. Install it using npm or yarn:

npm install use-dark-mode

or

yarn add use-dark-mode

2. Implement Dark Mode Toggle

Now, let’s implement a simple dark mode toggle button. Create a component, perhaps named DarkModeToggle.js:

// DarkModeToggle.js
import React from 'react';
import useDarkMode from 'use-dark-mode';

const DarkModeToggle = () => {
  const darkMode = useDarkMode(false);

  return (
    <div>
      <button type="button" onClick={darkMode.toggle}>
        {darkMode.value ? 'Light Mode' : 'Dark Mode'}
      </button>
    </div>
  );
};

export default DarkModeToggle;

3. Integrate the Toggle in Your Layout

Now, integrate the DarkModeToggle component into your application layout. This could be in a header, footer, or a dedicated settings section.

// YourLayoutComponent.js
import React from 'react';
import DarkModeToggle from './DarkModeToggle';

const YourLayoutComponent = () => {
  return (
    <div>
      {/* Your existing layout components */}
      <DarkModeToggle />
    </div>
  );
};

export default YourLayoutComponent;

Styling for Dark Mode

To enhance the dark mode experience, you may want to adjust your styles accordingly. You can use CSS variables to manage colors more efficiently.

/* styles.css */
body {
  background-color: var(--background-color);
  color: var(--text-color);
}

.dark-mode {
  --background-color: #121212;
  --text-color: #ffffff;
}

.light-mode {
  --background-color: #ffffff;
  --text-color: #000000;
}

Then, dynamically apply the dark or light mode class to your body element based on the state:

// YourLayoutComponent.js
import React from 'react';
import DarkModeToggle from './DarkModeToggle';
import useDarkMode from 'use-dark-mode';

const YourLayoutComponent = () => {
  const darkMode = useDarkMode(false);

  return (
    <div className={darkMode.value ? 'dark-mode' : 'light-mode'}>
      {/* Your existing layout components */}
      <DarkModeToggle />
    </div>
  );
};

export default YourLayoutComponent;

Now, your Next.js application should have a functional dark mode feature. Users can toggle between light and dark modes seamlessly, providing a personalized and comfortable browsing experience.

Implementing dark mode not only adds a touch of sophistication to your Next.js project but also demonstrates your commitment to user experience. Experiment with styling, transitions, and other customization options to make your dark mode truly unique.