Dark mode toggle with JavaScript in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a click event listener to the button.

Tailwind

document.getElementById('toggle-btn').addEventListener('[1]', () => {
  document.documentElement.classList.toggle('dark');
});

Drag options to blanks, or click blank then click option'

Aclick

Bsubmit

Chover

Dload

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'hover' instead of 'click' causes no toggle on click.

Using 'submit' is for forms, not buttons.

Using 'load' triggers on page load, not button click.

The click event triggers when the user clicks the button, which is needed to toggle dark mode.

2fill in blank

medium

Complete the code to select the button element by its ID.

Tailwind

const toggleBtn = document.[1]('toggle-btn');

Drag options to blanks, or click blank then click option'

AquerySelectorAll

BgetElementById

CgetElementsByClassName

DquerySelector

Attempts:

3 left

💡 Hint

Common Mistakes

Using getElementsByClassName returns a collection, not a single element.

Using querySelectorAll returns a list, not a single element.

Using querySelector works but requires a selector string with '#'.

getElementById selects a single element by its unique ID, which is perfect for our toggle button.

3fill in blank

hard

Fix the error in toggling the dark mode class on the root element.

Tailwind

document.documentElement.classList.[1]('dark');

Drag options to blanks, or click blank then click option'

Atoggle

Bremove

Cadd

Dcontains

Attempts:

3 left

💡 Hint

Common Mistakes

Using add only adds the class but never removes it.

Using remove only removes the class but never adds it.

Using contains only checks if the class exists, does not change it.

toggle adds the class if missing, or removes it if present, perfect for switching dark mode on and off.

4fill in blank

hard

Fill both blanks to create a button with accessible label and Tailwind styles for dark mode.

Tailwind

<button id="toggle-btn" aria-label="[1]" class="[2]">
  Toggle Dark Mode
</button>

Drag options to blanks, or click blank then click option'

AToggle dark mode

Bbg-gray-200 dark:bg-gray-800 px-4 py-2 rounded

Cdark-mode-toggle

Dtext-white bg-black

Attempts:

3 left

💡 Hint

Common Mistakes

Missing or unclear aria-label reduces accessibility.

Using static colors without dark mode variants loses theme effect.

The aria-label describes the button for screen readers. The Tailwind classes style the button with light background normally and dark background in dark mode.

5fill in blank

hard

Fill all three blanks to complete the JavaScript code that toggles dark mode and saves preference in localStorage.

Tailwind

const btn = document.getElementById('toggle-btn');
btn.addEventListener('click', () => {
  document.documentElement.classList.[1]('dark');
  if(document.documentElement.classList.contains('dark')) {
    localStorage.setItem('[2]', '[3]');
  } else {
    localStorage.removeItem('[2]');
  }
});

Drag options to blanks, or click blank then click option'

Atoggle

Btheme

Cdark

Dadd

Attempts:

3 left

💡 Hint

Common Mistakes

Using add instead of toggle causes only adding, no removal.

Using inconsistent keys or values in localStorage breaks preference saving.

Forgetting to remove the key when dark mode is off causes wrong state.

toggle switches the dark class. The key theme stores the preference. The value dark marks dark mode active.

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