Dark mode toggle with JavaScript in Tailwind - Mini Project: Build & Apply

Dark mode toggle with JavaScript

📖 Scenario: You want to add a button on your website that lets visitors switch between light and dark themes. This helps people who prefer dark backgrounds to feel comfortable while browsing.

🎯 Goal: Build a simple webpage with a button that toggles dark mode on and off using JavaScript and Tailwind CSS classes.

📋 What You'll Learn

Create a basic HTML structure with a heading and a toggle button

Use Tailwind CSS classes for styling light and dark modes

Add a JavaScript variable to track the dark mode state

Write JavaScript code to toggle the dark mode class on the html element when the button is clicked

💡 Why This Matters

🌍 Real World

Many websites offer dark mode to reduce eye strain and improve user experience in low light. This project shows how to add a simple toggle for that feature.

💼 Career

Front-end developers often implement theme toggles using JavaScript and CSS frameworks like Tailwind. Understanding this helps build accessible and user-friendly interfaces.

1

Create the basic HTML structure

Write the HTML skeleton with lang="en", charset="UTF-8", and a viewport meta tag. Inside the body, add a main section containing an h1 heading with the text Dark Mode Toggle and a button with the text Toggle Dark Mode. Use Tailwind classes p-6 on main, text-3xl font-bold mb-4 on the heading, and px-4 py-2 bg-blue-500 text-white rounded on the button.

Tailwind

  
  
  Dark Mode Toggle
  


  
    Dark Mode Toggle
    Toggle Dark Mode
    
  

Hint

Remember to include the lang attribute in the html tag and use the exact Tailwind classes for spacing and colors.

2

Add a JavaScript variable to track dark mode

Add a <script> tag just before the closing </body> tag. Inside it, create a variable called isDarkMode and set it to false.

Tailwind

  
  
  Dark Mode Toggle
  


  
    Dark Mode Toggle
    Toggle Dark Mode
  
  
    // Create a variable called isDarkMode and set it to false
    // Your code here
  

Hint

Use let isDarkMode = false; inside the <script> tag.

3

Add JavaScript to toggle dark mode class

Inside the existing <script> tag, select the button element using document.querySelector and store it in a variable called toggleButton. Then add a click event listener to toggleButton. Inside the event listener function, toggle the value of isDarkMode (true becomes false, false becomes true). Then use document.documentElement.classList.toggle('dark') to add or remove the dark mode class on the html element.

Tailwind

  
  
  Dark Mode Toggle
  


  
    Dark Mode Toggle
    Toggle Dark Mode
  
  
    let isDarkMode = false;
    // Select the button and add a click event listener to toggle dark mode
    // Your code here
  

Hint

Use document.querySelector('button') to get the button. Then add a click event listener that toggles isDarkMode and the dark class on document.documentElement.

4

Add Tailwind dark mode styles and accessibility

Add the class="dark:bg-gray-900 dark:text-white" to the body tag to style the background and text color in dark mode. Also add aria-pressed="false" to the button for accessibility. Inside the event listener, update the button's aria-pressed attribute to the current isDarkMode value as a string.

Tailwind

  
  
  Dark Mode Toggle
  


  
    Dark Mode Toggle
    Toggle Dark Mode
  
  
    let isDarkMode = false;
    const toggleButton = document.querySelector('button');
    toggleButton.addEventListener('click', () => {
      isDarkMode = !isDarkMode;
      document.documentElement.classList.toggle('dark');
      // Update aria-pressed attribute
      // Your code here
    });
  

Hint

Add the dark mode background and text color classes to the body tag. Add aria-pressed="false" to the button. Update aria-pressed inside the click event using setAttribute.

Practice

1. What does adding the dark class to the html element do in Tailwind CSS?

easy

A. It disables all CSS styles on the page.

B. It enables dark mode styles throughout the website.

C. It changes the font size to larger values.

D. It hides all images on the page.

Solution

1. Step 1: Understand Tailwind dark mode mechanism

   Tailwind applies dark mode styles when the dark class is present on the html element.

2. Step 2: Effect of the dark class

   Adding dark triggers alternate color schemes and styles designed for dark backgrounds.

3. Final Answer:

   It enables dark mode styles throughout the website. -> Option B

4. Quick Check:

   dark class = enables dark mode [OK]

Hint: Remember: dark class on html toggles dark mode styles [OK]

Common Mistakes:

• Thinking dark class disables styles
• Confusing dark class with font size changes
• Assuming dark class hides images

2. Which JavaScript code correctly toggles the dark mode class on the html element when a button is clicked?

easy

A. document.documentElement.classList.toggle('dark');

B. document.body.classList.add('dark');

C. document.getElementById('dark').classList.remove('dark');

D. document.querySelector('html').style.dark = true;

Solution

1. Step 1: Identify the root element for dark mode

   Dark mode toggles the dark class on the html element, accessible as document.documentElement.

2. Step 2: Use correct method to toggle class

   The classList.toggle('dark') method adds or removes the class on each click.

3. Final Answer:

   document.documentElement.classList.toggle('dark'); -> Option A

4. Quick Check:

   Toggle dark class on html element = document.documentElement.classList.toggle('dark'); [OK]

Hint: Use document.documentElement.classList.toggle('dark') to toggle dark mode [OK]

Common Mistakes:

• Using document.body instead of document.documentElement
• Using add or remove instead of toggle
• Trying to set style.dark property which doesn't exist

3. What will be the visible background color of this page after clicking the toggle button once?

<html class="dark">
  <body class="bg-white dark:bg-gray-900">
    <button id="toggle">Toggle Dark Mode</button>
  </body>
</html>

<script>
  document.getElementById('toggle').addEventListener('click', () => {
    document.documentElement.classList.toggle('dark');
  });
</script>

medium

A. Gray background (#1a202c)

B. No background color

C. Black background

D. White background

Solution

1. Step 1: Initial state has dark class on html

   The page starts with dark class, so background is gray (#1a202c) from dark:bg-gray-900.

2. Step 2: Clicking toggle removes dark class

   Toggle removes dark class, so bg-white applies, making background white.

3. Final Answer:

   White background -> Option D

4. Quick Check:

   Toggle removes dark class, background = white [OK]

Hint: Toggle flips dark class, switching background colors [OK]

Common Mistakes:

• Assuming background stays gray after toggle
• Confusing initial class presence
• Ignoring that toggle removes dark class

4. This JavaScript code is meant to toggle dark mode but does not work. What is the error?

const btn = document.getElementById('toggle');
btn.onclick = function() {
  document.querySelector('html').classList.add('dark');
  document.querySelector('html').classList.remove('dark');
};

medium

A. The class name should be 'dark-mode', not 'dark'.

B. The selector 'html' is incorrect; should be 'body'.

C. It adds and removes 'dark' class immediately, so no visible change.

D. The event listener should be 'addEventListener', not 'onclick'.

Solution

1. Step 1: Analyze the toggle logic

   The code adds then immediately removes the dark class on the same element in one function call.

2. Step 2: Effect on the page

   Because add and remove happen instantly, the class never stays applied, so no dark mode effect is visible.

3. Final Answer:

   It adds and removes 'dark' class immediately, so no visible change. -> Option C

4. Quick Check:

   Immediate add and remove cancels out [OK]

Hint: Toggle class once; don't add and remove immediately [OK]

Common Mistakes:

• Thinking 'onclick' is invalid
• Using wrong selector for dark mode
• Confusing class name with 'dark-mode'

5. You want to save the user's dark mode preference so it stays after page reload. Which JavaScript approach correctly implements this with Tailwind CSS?

1. On toggle, add/remove 'dark' class on <html>.
2. Save preference in localStorage.
3. On page load, read preference and set 'dark' class accordingly.

Which code snippet correctly sets dark mode on page load?

hard

A. if(localStorage.getItem('theme') === 'dark') { document.documentElement.classList.add('dark'); } else { document.documentElement.classList.remove('dark'); }

B. document.documentElement.classList.toggle(localStorage.getItem('theme'));

C. localStorage.setItem('theme', document.documentElement.classList.contains('dark'));

D. document.body.classList.add(localStorage.getItem('theme'));

Solution

1. Step 1: Retrieve saved theme from localStorage

   Use localStorage.getItem('theme') to get saved preference.

2. Step 2: Apply or remove 'dark' class based on preference

   If preference is 'dark', add dark class to html, else remove it.

3. Final Answer:

   if(localStorage.getItem('theme') === 'dark') { document.documentElement.classList.add('dark'); } else { document.documentElement.classList.remove('dark'); } -> Option A

4. Quick Check:

   Check saved theme and add/remove class accordingly [OK]

Hint: Check localStorage theme and add/remove 'dark' class on html [OK]

Common Mistakes:

• Using toggle with localStorage value directly
• Saving boolean instead of string in localStorage
• Adding class to body instead of html