Dark mode toggle with JavaScript in Tailwind - Browser Rendering Trace

Render Flow - Dark mode toggle with JavaScript

[Load HTML] -> [Parse DOM] -> [Load Tailwind CSS] -> [Apply base styles] -> [JavaScript loads] -> [Add event listener to toggle button] -> [User clicks toggle] -> [Toggle dark class on <html>] -> [Repaint with dark styles]

The browser loads the HTML and CSS, applies the base light styles, then JavaScript adds a click event to the toggle button. When clicked, it toggles the 'dark' class on the root element, triggering Tailwind's dark mode styles to repaint the page.

Render Steps - 3 Steps

Code Added:<button id="toggle" aria-label="Toggle dark mode">Toggle Dark Mode</button>

Before

[Empty page]

→

After

[Toggle Dark Mode button]
[No content visible]

The toggle button appears on the page, ready for user interaction.

🔧 Browser Action:Creates button element in DOM and paints it

Code Sample

A button toggles dark mode by adding/removing the 'dark' class on <html>. The content background and text colors switch between light and dark styles.

Tailwind

<button id="toggle" aria-label="Toggle dark mode">Toggle Dark Mode</button>
<div class="bg-white dark:bg-gray-900 text-black dark:text-white p-4">
  <h1 class="text-2xl font-bold">Welcome!</h1>
  <p>This is a dark mode toggle example.</p>
</div>

Tailwind

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Tailwind dark mode is enabled via 'class' strategy */

Render Quiz - 3 Questions

After applying render_step 2, what colors do you see in the content box?

A White background with black text

B Dark gray background with white text

C Black background with white text

D Transparent background with black text

Common Confusions - 2 Topics

Why doesn't the dark mode styles apply immediately on page load?

Because the 'dark' class is not present on the <html> element initially. The dark styles only apply when JavaScript adds this class after the toggle button is clicked (see render_step 3).

💡 Dark mode styles need the 'dark' class on a parent element to activate.

Why does toggling the button change the whole page colors, not just the button?

Because the 'dark' class is toggled on the <html> element, which is a parent of all content. Tailwind's dark mode styles use this class to change colors globally (render_step 3).

💡 Toggle the 'dark' class on a high-level element to affect all children.

Property Reference

Property	Value Applied	Effect	Common Use
bg-white	background-color: white	Sets light background	Default light mode background
dark:bg-gray-900	background-color: #111827	Sets dark background when 'dark' class present	Dark mode background
text-black	color: black	Sets light text color	Default light mode text
dark:text-white	color: white	Sets dark text color when 'dark' class present	Dark mode text
p-4	padding: 1rem	Adds spacing inside the box	Content padding

Concept Snapshot

Dark mode toggle uses JavaScript to add/remove 'dark' class on <html>. Tailwind applies dark styles only when 'dark' class is present. Use 'dark:' prefix for styles active in dark mode. Toggle button triggers repaint with new colors. Default is light mode with white background and black text. Dark mode switches background to dark gray and text to white.

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