Create a Dark Mode Toggle with JavaScript: A Beginner’s Guide

Written by

learnmodernjavascript

in

In today’s digital landscape, user experience reigns supreme. One increasingly popular feature that significantly enhances user experience is dark mode. It’s not just a trend; it’s a valuable accessibility feature, especially for users who spend extended periods in front of screens. Dark mode reduces eye strain in low-light environments, conserves battery life on devices with OLED screens, and provides a visually appealing alternative to the standard light mode. This tutorial will guide you, step-by-step, through creating a dark mode toggle using JavaScript, HTML, and CSS. We’ll break down the concepts into easily digestible chunks, ensuring that even beginners can follow along and implement this feature on their websites.

Why Dark Mode Matters

Before diving into the code, let’s understand why dark mode is so important. Consider these points:

  • Improved Accessibility: Dark mode helps users with visual impairments by reducing the brightness of the screen and minimizing blue light exposure.
  • Reduced Eye Strain: In low-light environments, a bright screen can cause significant eye strain. Dark mode alleviates this issue.
  • Battery Conservation: On devices with OLED screens, dark mode can conserve battery life by turning off pixels that display black.
  • Enhanced Aesthetics: Dark mode provides a sleek and modern look that many users find appealing.

By implementing a dark mode toggle, you’re not just adding a cool feature; you’re making your website more user-friendly and inclusive.

Setting Up the Project

Let’s start by setting up our project. We’ll need three files: index.html, style.css, and script.js. Create these files in a new directory. This structure keeps your code organized and easy to manage.

index.html

This file will contain the HTML structure of our webpage, including the dark mode toggle button and the content we want to style. Here’s a basic structure:

<!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>
    <button id="darkModeToggle">Toggle Dark Mode</button>
    <div class="content">
        <h2>Welcome to My Website</h2>
        <p>This is some example content.  We'll see how it changes when we toggle dark mode.</p>
        <p>More content here...</p>
    </div>
    <script src="script.js"></script>
</body>
</html>

In this HTML, we have:

  • A basic HTML structure with a title and viewport meta tag.
  • A link to our style.css file.
  • A button with the ID darkModeToggle. This is what we’ll click to switch modes.
  • A div with the class content to hold our main content. This is the area we’ll style with dark mode.
  • A link to our script.js file, where we’ll write the JavaScript.

style.css

This file will contain the CSS styles for our website, including the light and dark mode styles. Initially, we’ll set up some basic styles and then add the dark mode styles later.


body {
    font-family: sans-serif;
    background-color: #f0f0f0; /* Light background */
    color: #333; /* Dark text */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
}

.content {
    padding: 20px;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    background-color: #4CAF50; /* Green */
    color: white;
    border-radius: 5px;
    margin-bottom: 20px;
}

In this CSS:

  • We set basic styles for the body, including a light background and dark text.
  • We style the content div with some padding.
  • We style the button.
  • We’ve added a transition property to the body. This will create a smooth animation when switching between light and dark modes.

script.js

This file will contain the JavaScript code that handles the dark mode toggle functionality. We’ll start by selecting the button and adding an event listener.


// Select the toggle button
const darkModeToggle = document.getElementById('darkModeToggle');

// Add an event listener to the button
darkModeToggle.addEventListener('click', () => {
    // Code to toggle dark mode will go here
});

In this JavaScript code:

  • We select the dark mode toggle button using its ID.
  • We add an event listener to the button. This means that when the button is clicked, the function inside the event listener will run.

Implementing the Dark Mode Toggle

Now, let’s implement the core functionality of the dark mode toggle. We’ll add a class to the body element to indicate whether dark mode is enabled or disabled. This class will be used in our CSS to apply the appropriate styles.

Inside the event listener in script.js, add the following code:


const darkModeToggle = document.getElementById('darkModeToggle');

darkModeToggle.addEventListener('click', () => {
    document.body.classList.toggle('dark-mode');
});

The toggle() method is key here. It checks if the body element already has the class dark-mode. If it does, it removes the class. If it doesn’t, it adds the class. This effectively toggles the class on each click.

Updating style.css for Dark Mode

Now, we need to add the dark mode styles to our style.css file. We’ll use the .dark-mode class to target the body element when dark mode is enabled.


/* Existing styles */
body {
    font-family: sans-serif;
    background-color: #f0f0f0; /* Light background */
    color: #333; /* Dark text */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
}

.content {
    padding: 20px;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    background-color: #4CAF50; /* Green */
    color: white;
    border-radius: 5px;
    margin-bottom: 20px;
}

/* Dark mode styles */
body.dark-mode {
    background-color: #333; /* Dark background */
    color: #f0f0f0; /* Light text */
}

In this CSS:

  • We’ve added a new rule that targets the body element when it has the dark-mode class.
  • We set the background color to dark gray and the text color to light gray.

Now, when you click the toggle button, the body element will gain or lose the dark-mode class, and the CSS styles will be applied accordingly, switching between light and dark mode.

Adding More Sophisticated Styling

While the basic implementation works, we can enhance the user experience by styling more elements and adding more features. Let’s look at a few examples.

Styling the Button

Let’s change the button’s appearance to indicate the current mode. We can change the button’s text to “Light Mode” when dark mode is enabled, and back to “Dark Mode” when dark mode is disabled. Add the following code inside the event listener in script.js:


const darkModeToggle = document.getElementById('darkModeToggle');

darkModeToggle.addEventListener('click', () => {
    document.body.classList.toggle('dark-mode');

    // Change button text
    if (document.body.classList.contains('dark-mode')) {
        darkModeToggle.textContent = 'Light Mode';
    } else {
        darkModeToggle.textContent = 'Dark Mode';
    }
});

In this code:

  • We check if the body element has the dark-mode class after toggling it.
  • If it does, we change the button’s text to “Light Mode”.
  • If it doesn’t, we change the button’s text to “Dark Mode”.

Styling Other Elements

To make the dark mode more comprehensive, we need to style other elements on our page. Let’s say we have a heading (<h2>) and some paragraphs (<p>) inside our .content div. We can style these elements in our style.css file to change their colors when dark mode is enabled.


/* Existing styles */
body {
    font-family: sans-serif;
    background-color: #f0f0f0; /* Light background */
    color: #333; /* Dark text */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
}

.content {
    padding: 20px;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    background-color: #4CAF50; /* Green */
    color: white;
    border-radius: 5px;
    margin-bottom: 20px;
}

/* Dark mode styles */
body.dark-mode {
    background-color: #333; /* Dark background */
    color: #f0f0f0; /* Light text */
}

body.dark-mode h2, body.dark-mode p {
    color: #ccc; /* Lighter text for headings and paragraphs */
}

In this CSS:

  • We’ve added a new rule that targets the <h2> and <p> elements when the body has the dark-mode class.
  • We set their text color to a lighter gray.

Example: Styling Links

Similarly, we can style links (<a>) to change their color in dark mode. Add the following to your style.css:


body.dark-mode a {
    color: #90caf9; /* Light blue links in dark mode */
}

Now, links will be styled in a light blue color when dark mode is enabled, providing better contrast.

Persistent Dark Mode with Local Storage

The current implementation resets to light mode whenever the user refreshes the page. To provide a better user experience, we can use local storage to persist the user’s preferred mode. Local storage allows us to store small amounts of data in the user’s browser, so we can retrieve the user’s preference when the page loads.

Saving the Preference

First, we’ll modify the JavaScript code to save the dark mode preference to local storage whenever the toggle button is clicked. Add the following code inside the event listener in script.js:


const darkModeToggle = document.getElementById('darkModeToggle');

darkModeToggle.addEventListener('click', () => {
    document.body.classList.toggle('dark-mode');

    // Save the preference to local storage
    const isDarkMode = document.body.classList.contains('dark-mode');
    localStorage.setItem('darkMode', isDarkMode);

    // Change button text
    if (isDarkMode) {
        darkModeToggle.textContent = 'Light Mode';
    } else {
        darkModeToggle.textContent = 'Dark Mode';
    }
});

In this code:

  • We get the current dark mode status using document.body.classList.contains('dark-mode').
  • We use localStorage.setItem('darkMode', isDarkMode) to store the boolean value (true or false) in local storage, using the key “darkMode”.

Loading the Preference

Next, we need to load the user’s preference when the page loads. We’ll add some code to check the local storage and apply dark mode accordingly. Add the following code at the beginning of your script.js file, before the event listener:


// Check local storage for dark mode preference
const isDarkMode = localStorage.getItem('darkMode') === 'true';

// Apply dark mode if the preference is set
if (isDarkMode) {
    document.body.classList.add('dark-mode');
    darkModeToggle.textContent = 'Light Mode';
}

In this code:

  • We use localStorage.getItem('darkMode') to retrieve the value from local storage.
  • We check if the retrieved value is equal to the string “true” (because local storage stores everything as strings).
  • If it is, we add the dark-mode class to the body and change the button text.

Now, when the page loads, the JavaScript code will check local storage. If a dark mode preference exists, it will apply dark mode immediately. This ensures that the user’s preferred mode is maintained across page refreshes and visits.

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

1. Incorrect File Paths

Problem: The CSS or JavaScript files are not linked correctly in your HTML. The browser can’t find the files.

Solution: Double-check the href and src attributes in your <link> and <script> tags in your index.html file. Ensure the file paths are correct relative to your HTML file. For example:

<link rel="stylesheet" href="style.css">
<script src="script.js"></script>

2. Typos in Class Names or IDs

Problem: The JavaScript code doesn’t work because the element IDs or class names are misspelled. For example, you might have darkmodeToggle instead of darkModeToggle.

Solution: Carefully check your HTML, CSS, and JavaScript code for typos. Make sure the IDs and class names match exactly. Case sensitivity matters.

3. CSS Specificity Issues

Problem: Your dark mode styles are not being applied because other CSS rules are overriding them. This is often due to CSS specificity.

Solution: Make sure your dark mode styles are specific enough to override other styles. You can use more specific selectors (e.g., body.dark-mode h2 instead of just h2) or use the !important declaration (use sparingly, as it can make your CSS harder to manage).


body.dark-mode h2 {
    color: #ccc !important;
}

4. JavaScript Errors

Problem: JavaScript errors prevent the dark mode toggle from working. These errors can be caused by typos, incorrect syntax, or logical errors in your code.

Solution: Use your browser’s developer tools (usually accessed by pressing F12) to check the console for JavaScript errors. The console will show the error messages and the line numbers where the errors occur. Fix the errors based on the error messages.

5. Caching Issues

Problem: The browser might be caching an older version of your CSS or JavaScript files, so your changes aren’t reflected.

Solution: Hard refresh your browser (Ctrl+Shift+R or Cmd+Shift+R) to clear the cache. You can also disable caching in your browser’s developer tools during development.

Summary: Key Takeaways

  • HTML Structure: Create an HTML structure with a toggle button and content elements.
  • CSS Styling: Write CSS to define the light and dark mode styles. Use a class (e.g., .dark-mode) to apply dark mode styles.
  • JavaScript Logic: Use JavaScript to toggle a class on the body element when the button is clicked.
  • Local Storage: Use local storage to persist the user’s dark mode preference across sessions.
  • Accessibility: Consider accessibility best practices to make your website more user-friendly.

FAQ

Here are some frequently asked questions about creating a dark mode toggle:

1. How do I add a dark mode toggle to my WordPress website?

You can add this code to your WordPress website in a few ways:

  • Theme Files: Edit your theme’s header.php (for the button) and style.css (for the CSS) files. Add the JavaScript to your theme’s functions.php file using wp_enqueue_scripts.
  • Custom Plugin: Create a custom plugin to encapsulate the code. This is a good practice for more complex features.
  • Page Builders: Some page builders (e.g., Elementor, Divi) may have built-in options or allow you to add custom HTML, CSS, and JavaScript.

2. Can I use a library or framework for dark mode?

Yes, there are many libraries and frameworks that can simplify dark mode implementation, such as:

  • Prefers-color-scheme: Use CSS media queries to automatically switch between light and dark modes based on the user’s operating system settings.
  • Dark Mode Switcher (JavaScript Library): A lightweight JavaScript library specifically designed for dark mode toggles.
  • React, Vue, or Angular Components: If you are using a JavaScript framework, you can create reusable components for dark mode toggles.

3. How can I make the dark mode toggle more visually appealing?

You can enhance the appearance of your dark mode toggle by:

  • Using Icons: Replace the text with a sun/moon icon to visually represent the toggle state.
  • Adding Animations: Use CSS transitions or animations to make the switch between light and dark modes smoother.
  • Customizing Button Styles: Design a button that fits your website’s overall design.

4. How do I handle images in dark mode?

There are a few ways to handle images in dark mode:

  • CSS Filters: Use CSS filters (e.g., filter: invert(1)) to invert the colors of images in dark mode. This can work well for some images, but it might not be ideal for all.
  • Dark Mode Images: Provide different image versions for light and dark modes. You can use the <picture> element or JavaScript to switch between images based on the current mode.
  • Image Optimization: Ensure that your images are optimized for both light and dark modes to maintain good performance.

SEO Best Practices

To ensure your tutorial ranks well in search engines like Google and Bing, consider these SEO best practices:

  • Keyword Research: Identify relevant keywords (e.g., “dark mode toggle JavaScript”, “create dark mode”, “JavaScript dark mode tutorial”) and use them naturally throughout your content.
  • Title Tag: Write a compelling title tag that includes your primary keyword (e.g., “Create a Dark Mode Toggle with JavaScript: A Beginner’s Guide”).
  • Meta Description: Write a concise meta description (under 160 characters) that summarizes your tutorial and includes relevant keywords (e.g., “Learn how to create a dark mode toggle with JavaScript in this beginner-friendly tutorial. Includes step-by-step instructions and code examples.”).
  • Heading Tags: Use heading tags (<h2>, <h3>, <h4>) to structure your content and make it easy to read.
  • Image Optimization: Use descriptive alt text for your images, including relevant keywords. Optimize image file sizes to improve page load speed.
  • Internal Linking: Link to other relevant pages on your website to improve site navigation and SEO.
  • Mobile Optimization: Ensure your website is responsive and mobile-friendly, as mobile-first indexing is used by search engines.
  • Content Quality: Provide high-quality, original content that is informative, well-written, and easy to understand.

By following these SEO best practices, you can improve your tutorial’s visibility in search results and attract more readers.

Creating a dark mode toggle with JavaScript is a fantastic way to enhance user experience on your website. This tutorial has provided a comprehensive guide from start to finish, from the initial setup to the final implementation, and beyond. By understanding the core concepts and following the step-by-step instructions, you can easily add this feature to your own projects. Remember to consider accessibility and SEO best practices to make your website more user-friendly and discoverable. Embrace the power of dark mode to create a more engaging and accessible online experience for your users.

More posts