Introduction

Dark mode has increasingly become a popular feature in web applications for enhanced user experience and accessibility. This tutorial provides a step-by-step guide to implementing a dark and light mode toggle switch using JavaScript, HTML, and CSS.

HTML Structure

The HTML structure consists of a main container div, a button for toggling dark/light mode, and a section containing a title, a description, and another button.

<div class="container">
    <button id="theme-toggle">Toggle Dark/Light Mode</button>
    <section class="section">
        <h1 class="section-title">Section Title</h1>
        <p class="section-description">This is a description for the section.</p>
        <button class="section-button">Click Me</button>
    </section>
</div>

CSS Styling

The styling employs CSS custom properties, also known as variables, to define color schemes for both light and dark modes.

:root {
    --primary-bg-color: #ffffff;
    --secondary-bg-color: #f2f2f2;
    /* ...other variables... */
}

body[data-theme='dark'] {
    --primary-bg-color: #121212;
    --secondary-bg-color: #1c1c1c;
    /* ...other variables... */
}

The :root selector defines default colors for light mode, while the body[data-theme='dark'] selector changes these values for dark mode.

Applying Styles Using Variables

The variables are then used throughout the rest of the CSS code, making it easy to switch between dark and light modes.

body {
    background-color: var(--primary-bg-color);
    color: var(--primary-text-color);
}

JavaScript Logic

JavaScript is used to toggle between the modes when the button is clicked. A custom data-theme attribute on the body tag keeps track of the current theme.

// Wait for the HTML document to be completely loaded before running the script
document.addEventListener('DOMContentLoaded', () => {

  // Retrieve the button element with ID 'theme-toggle' from the HTML document
  const themeToggleButton = document.getElementById('theme-toggle');

  // Initialize the button text based on the current theme
  // Calls the updateButtonText function defined below
  updateButtonText();

  // Add an event listener to the theme toggle button to listen for 'click' events
  themeToggleButton.addEventListener('click', () => {
    
    // Retrieve the current theme attribute ('data-theme') from the <body> element
    const currentTheme = document.body.getAttribute('data-theme');
    
    // Toggle the theme based on its current value
    if (currentTheme === 'dark') {
      // If the current theme is 'dark', switch it to 'light'
      document.body.setAttribute('data-theme', 'light');
    } else {
      // Otherwise, switch it to 'dark'
      document.body.setAttribute('data-theme', 'dark');
    }

    // Update the text on the theme toggle button based on the new theme
    // Calls the updateButtonText function defined below
    updateButtonText();
  });

  // Function to update the button text based on the current theme
  function updateButtonText() {
    
    // Retrieve the current theme attribute ('data-theme') from the <body> element
    const currentTheme = document.body.getAttribute('data-theme');
    
    // Update the button text based on the current theme
    if (currentTheme === 'dark') {
      // If the current theme is 'dark', set the button text to 'Light'
      themeToggleButton.textContent = 'Light';
    } else {
      // Otherwise, set the button text to 'Dark'
      themeToggleButton.textContent = 'Dark';
    }
  }
});

Conclusion

This comprehensive guide elucidates the efficient implementation of a dark and light mode switch using standard web technologies. By utilizing CSS variables and JavaScript, this tutorial provides a scalable and maintainable approach to toggle between different themes.

You can access the full code: Pure CSS Dark/Light Mode