0
0
Tailwindmarkup~20 mins

Dark mode toggle with JavaScript in Tailwind - Practice Problems & Coding Challenges

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Challenge - 5 Problems
🎖️
Dark Mode Master
Get all challenges correct to earn this badge!
Test your skills under time pressure!
🧠 Conceptual
intermediate
1:30remaining
How does the dark mode toggle work?
When you click a button to switch between light and dark modes using JavaScript and Tailwind CSS, what is the main thing the script changes?
AIt adds or removes the 'dark' class on the <html> or <body> element.
BIt changes the background color directly using inline styles.
CIt reloads the page with a different CSS file for dark mode.
DIt changes the text color of all elements manually.
Attempts:
2 left
💡 Hint
Think about how Tailwind knows when to apply dark styles.
📝 Syntax
intermediate
1:30remaining
Identify the correct JavaScript to toggle dark mode
Which JavaScript code correctly toggles the 'dark' class on the element when a button is clicked?
Tailwind
const btn = document.getElementById('toggle-btn');
btn.addEventListener('click', () => {
  // What goes here?
});
Adocument.documentElement.classList.toggle('dark');
Bdocument.body.classList.toggle('dark');
Cdocument.getElementById('html').classList.toggle('dark');
Ddocument.querySelector('html').classList.add('dark');
Attempts:
2 left
💡 Hint
The element is accessed via document.documentElement.
❓ rendering
advanced
1:30remaining
What is the visible effect of toggling dark mode with Tailwind?
Given this HTML snippet with Tailwind classes:
<body class="bg-white dark:bg-gray-900 text-black dark:text-white">
  <h1>Hello</h1>
</body>

What will the user see after toggling dark mode on?
ABackground stays white but text changes to black.
BBackground changes to white and text changes to gray.
CBackground changes to dark gray and text changes to white.
DNo visible change because classes are ignored.
Attempts:
2 left
💡 Hint
Look at the classes with the 'dark:' prefix.
❓ selector
advanced
1:30remaining
Which CSS selector applies styles only in dark mode?
In Tailwind CSS, which selector targets elements only when dark mode is active?
A.light <selector> { ... }
B.dark <selector> { ... }
C<selector>.dark { ... }
D:dark <selector> { ... }
Attempts:
2 left
💡 Hint
Tailwind uses a special class on a parent element to trigger dark mode styles.
❓ accessibility
expert
2:00remaining
How to make a dark mode toggle button accessible?
Which practice improves accessibility for a dark mode toggle button?
AUse only color changes on the button without any text or labels.
BDisable keyboard focus on the button to avoid confusion.
CUse an image without alt text as the toggle button.
DAdd aria-pressed attribute to indicate toggle state and use a descriptive label.
Attempts:
2 left
💡 Hint
Think about screen readers and keyboard users.