Creating a Dark Mode Toggle Without Libraries

QBlog

 

Creating a Dark Mode Toggle Without Libraries: A Complete Guide

In recent years, Dark Mode has become one of the most requested features in modern websites and applications. From social media platforms to productivity tools, users enjoy switching between light and dark themes depending on the time of day, their environment, or personal preference.

The good news is, you don’t need any external libraries or frameworks to implement this feature. With just a few lines of HTML, CSS, and JavaScript, you can create a smooth, reliable, and user-friendly dark mode toggle.

In this guide, we’ll walk through multiple ways to implement a Dark Mode toggle—starting from the basics and then improving it with persistence and system preferences.



Why Dark Mode Matters

Before diving into the implementation, let’s quickly understand why Dark Mode is so widely used:

  • Reduces eye strain in low-light environments.

  • Saves battery on OLED and AMOLED devices, since darker pixels consume less power.

  • Gives websites a modern, sleek look that many users prefer.

  • Provides personalization, allowing visitors to control their browsing experience.

Adding this feature shows attention to detail and makes your website more welcoming to a broader audience.

Step 1: Setting Up the Basic HTML

We’ll start with a minimal HTML structure containing a heading and a toggle button.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dark Mode Toggle</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is a simple example of implementing dark mode.</p>
  <button id="toggleBtn">Toggle Dark Mode</button>
  <script src="script.js"></script>
</body>
</html>

This sets the stage for our dark mode implementation.

Step 2: Adding Light and Dark Themes with CSS

We’ll define two themes: the default light mode and the optional dark mode.

/* style.css */

body {
  font-family: Arial, sans-serif;
  background-color: #ffffff;
  color: #000000;
  transition: background 0.3s ease, color 0.3s ease;
}

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

button {
  padding: 10px 20px;
  margin-top: 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

Here, .dark-mode is a class we’ll add or remove from <body> using JavaScript.

Step 3: JavaScript Toggle Functionality

Now we’ll use JavaScript to toggle the theme when the button is clicked.

// script.js

const toggleBtn = document.getElementById("toggleBtn");
const body = document.body;

toggleBtn.addEventListener("click", () => {
  body.classList.toggle("dark-mode");
});

At this stage, clicking the button instantly switches between light and dark mode.

Step 4: Remembering User Preference with Local Storage

A common problem is that the theme resets every time the page reloads. To fix this, we’ll use localStorage to remember the user’s choice.

// script.js

const toggleBtn = document.getElementById("toggleBtn");
const body = document.body;

// Load saved theme from localStorage
if (localStorage.getItem("theme") === "dark") {
  body.classList.add("dark-mode");
}

// Toggle dark mode and save preference
toggleBtn.addEventListener("click", () => {
  body.classList.toggle("dark-mode");
  
  if (body.classList.contains("dark-mode")) {
    localStorage.setItem("theme", "dark");
  } else {
    localStorage.setItem("theme", "light");
  }
});

Now the site remembers the theme even after the user leaves and returns.

Step 5: Respecting System Preferences

Modern browsers let you detect whether the user prefers dark or light mode at the operating system level using the prefers-color-scheme media query.

@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #f5f5f5;
  }
}

You can combine this with the JavaScript toggle to ensure your website defaults to the user’s system preference, while still allowing them to override it.

Step 6: Using CSS Variables for Flexible Themes

Instead of hardcoding colors, you can use CSS variables to make theming easier and more maintainable.

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

.dark-mode {
  --bg-color: #121212;
  --text-color: #f5f5f5;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background 0.3s, color 0.3s;
}

This approach allows you to quickly update your theme or even add more themes in the future.

Best Practices for Dark Mode

When implementing dark mode, keep these points in mind:

  1. Use dark gray instead of pure black – Pure black can create too much contrast. A dark gray background is easier on the eyes.

  2. Maintain accessibility – Ensure sufficient contrast between text and background.

  3. Handle images carefully – Avoid inverting images globally, as they may look unnatural. Provide alternative assets if needed.

  4. Smooth transitions – Add CSS transitions for a polished user experience.

  5. Test thoroughly – Check the feature on different devices and screens to ensure consistency.

Common Mistakes to Avoid

Even though building dark mode is simple, many developers run into these mistakes:

  • Forgetting to apply styles to forms, modals, and popups.

  • Using inline styles that break theming consistency.

  • Not saving user preferences, forcing them to reset on every visit.

  • Overusing !important, which makes styles harder to manage.

Conclusion

Creating a Dark Mode toggle doesn’t require heavy frameworks or third-party libraries. With a small amount of HTML, CSS, and JavaScript, you can build a feature that greatly improves user experience and gives your website a modern touch.

Whether you keep it simple with a toggle button or expand it with CSS variables and system preferences, this is a valuable feature to add to almost any project.

FAQs

Q1: Can I add Dark Mode without JavaScript?
Yes, you can detect system preferences with CSS only, but you won’t have a manual toggle without JavaScript.

Q2: How do I make Dark Mode default?
Set the body class to dark-mode by default, or use the prefers-color-scheme media query.

Q3: Can I create multiple themes?
Yes, by using CSS variables, you can add more than just light and dark modes.

Q4: Does Dark Mode affect performance?
No, it’s lightweight and has minimal performance impact when implemented with CSS classes and variables.

Q5: Do I need frameworks like React for Dark Mode?
No. Pure HTML, CSS, and JavaScript are more than enough.

QBlog

Posted by QBlog

Post a Comment

0 Comments