Part 24: Enhancing User Interaction: Adding a Theme Switcher to Your Next.js Blog

[Pages] Client-side Functionality

[Pages] Client-side Functionality

In our previous work on building a blog with Next.js, we've focused on creating static content that users can read and navigate through. However, a truly engaging website often includes interactive elements that enhance user experience. In this post, we'll add a simple yet effective feature: a theme switcher that allows users to toggle between dark and light modes.

Why Add Interactivity?

Currently, our blog is static in both its content and its interaction capabilities. While users can navigate between pages, there is little else they can do. Introducing interactivity, like a theme switcher, not only makes the site more engaging but also allows users to personalize their experience.

Implementing a Theme Switcher

Step 1: Create the ThemeSwitch Component

We'll start by creating a new React component called ThemeSwitch. This component will include a button that toggles between dark and light modes.

// components/ThemeSwitch.js

import { useState } from 'react';

function ThemeSwitch() {
  const [darkMode, setDarkMode] = useState(false);

  console.log('[ThemeSwitch] darkMode:', darkMode);
  const text = darkMode ? 'Light Mode' : 'Dark Mode';

  return (
    <>
      <button onClick={() => setDarkMode(!darkMode)}>
        {text}
      </button>
      <style jsx>{`
        button {
          background: none;
          border: none;
          cursor: pointer;
        }
      `}</style>
    </>
  );
}

export default ThemeSwitch;

Step 2: Integrate ThemeSwitch into the NavBar

Next, we'll incorporate the ThemeSwitch component into our NavBar, positioning the button alongside our navigation links.

// components/NavBar.js

import Link from 'next/link';
import ThemeSwitch from './ThemeSwitch';

function NavBar() {
  return (
    <nav>
      <ul>
        <li>
          <Link href="/">
            <a>Home</a>
          </Link>
        </li>
        <li>
          <Link href="/about">
            <a>About</a>
          </Link>
        </li>
      </ul>
      <ThemeSwitch />
      <style jsx>{`
        nav {
          display: flex;
          justify-content: space-between;
        }
        ul {
          list-style-type: none;
          padding: 0;
        }
      `}</style>
    </nav>
  );
}

export default NavBar;

Step 3: Styling the ThemeSwitch Button

To make the button visually appealing and intuitive as a clickable element, we'll apply some basic styles.

• Remove default background and border.

• Change the cursor to a pointer on hover.

Step 4: Toggle Functionality with useState

Using React's useState hook, we maintain a darkMode state that determines the current theme. The button text changes based on this state:

• When darkMode is false, the button shows "Dark Mode".

• When darkMode is true, it switches to "Light Mode".

The onClick handler toggles this state, effectively switching themes.

Example of the State Toggle

Upon clicking the button, the darkMode state toggles between true and false, and the button text updates accordingly. Here's a simple explanation of how this works:

• Initial State: darkMode is false, button text is "Dark Mode".

• Click Button: darkMode becomes true, text changes to "Light Mode".

• Click Again: darkMode returns to false, and text reverts to "Dark Mode".

Conclusion

With just a few lines of code, we've added a functional and interactive theme switcher to our blog. This feature enhances the user experience by allowing visitors to personalize their viewing mode. While we've kept the styling simple, you can further refine it to match your site's aesthetic. In upcoming posts, we'll explore how to apply these theme changes to the entire page, completing the dark mode functionality. Stay tuned!