Part 25: Bringing Dark Mode to Life: Enhancing Your Website with Dynamic Themes

[Pages] Client-side Functionality

[Pages] Client-side Functionality

In our last update, we introduced a "Dark Mode" button to our website. While this was a great step towards interactivity, it only changed the button's text without affecting the page's appearance. In this post, we'll take it a step further by implementing styles that allow users to switch between light and dark modes effectively.

The Concept of Dark Mode

Dark mode is a popular feature that alters the color scheme of a website to reduce eye strain, especially in low-light environments. Typically, this involves changing the background to a dark color and the text to a lighter one.

Step-by-Step Implementation

Step 1: Update Global Styles

To enable dark mode, we'll start by updating our global styles in the globals.css file. This involves defining CSS variables for both light and dark themes.

/* styles/globals.css */

/* Light Theme */
:root {
  --background-color: white;
  --link-color: darkred;
  --text-color: black;
}

/* Dark Theme */
:root {
  --background-color: rgb(14, 14, 14);
  --link-color: rgb(234, 207, 3);
  --text-color: rgb(230, 230, 230);
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: var(--background-color);
  color: var(--text-color);
}

a {
  color: var(--link-color);
  text-decoration: none;
}

Using CSS Variables

CSS variables are a powerful tool that allow us to define and reuse values throughout our stylesheets. Here, we're defining variables for background, text, and link colors. The :root pseudo-element ensures these variables are globally available.

Step 2: Apply Variables in Styles

By using the var() function, we can apply these variables to style elements dynamically. This is particularly useful for switching themes:

• For the light theme, we use black text on a white background.

• For the dark theme, we invert these colors.

Step 3: Address Button Visibility

Our initial implementation had an issue where the "Dark Mode" button became invisible against the dark background. To fix this, we set the button's color to inherit the parent element's color, ensuring it remains visible in both themes.

// components/ThemeSwitch.js

function ThemeSwitch() {
  // Existing code...
  return (
    <>
      <button onClick={() => setDarkMode(!darkMode)}>
        {text}
      </button>
      <style jsx>{`
        button {
          background: none;
          border: none;
          color: inherit;
          cursor: pointer;
        }
      `}</style>
    </>
  );
}

Step 4: Fine-Tune Colors

While implementing dark mode, it's essential to ensure readability and aesthetics. We adjust colors for links and text to ensure they stand out against the background. For instance, using a softer yellow for links instead of a stark red enhances readability.

Conclusion

With these changes, our website can now effectively switch between light and dark themes, enhancing user experience and accessibility. We've laid the groundwork by using CSS variables, which make theme management efficient and scalable. In the next part, we'll explore how to dynamically toggle these themes when the user interacts with the "Dark Mode" button. Stay tuned for more interactive enhancements!