Media-based dark mode strategy in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

How does Tailwind detect dark mode using media queries?

Tailwind CSS can switch styles based on the user's system preference for dark mode. Which media query does Tailwind use internally to detect this preference?

A @media (prefers-color-scheme: dark)

B @media (color-scheme: dark)

C @media (dark-mode: enabled)

D @media (theme: dark)

💡 Hint

Think about how browsers expose user color scheme preferences.

Tailwind uses the standard CSS media query '@media (prefers-color-scheme: dark)' to detect if the user prefers dark mode. This is a widely supported and standardized way to detect system color scheme preferences.

📝 Syntax

intermediate

Which Tailwind config enables media-based dark mode?

You want Tailwind to apply dark mode styles based on the user's system preference. Which configuration in tailwind.config.js correctly enables this?

Tailwind

module.exports = {
  darkMode: '???',
  // other config
}

A true

B 'media'

C 'class'

D 'system'

💡 Hint

The option name is a simple string matching the detection method.

Setting darkMode to 'media' tells Tailwind to use the user's system preference via media queries. 'class' requires toggling a CSS class manually.

❓ rendering

advanced

What background color will this element have in dark mode?

Given this Tailwind HTML snippet with media-based dark mode enabled, what background color will the div have when the user prefers dark mode?

Tailwind

<div class="bg-white dark:bg-gray-800 p-4">
  Hello World
</div>

A Transparent background

B Black background

C Gray-800 background

D White background

💡 Hint

The 'dark:' prefix applies styles only in dark mode.

The 'bg-white' applies normally, but when dark mode is active, 'dark:bg-gray-800' overrides it, so the background becomes gray-800.

❓ selector

advanced

Which CSS selector does Tailwind generate for dark mode with media strategy?

When Tailwind is configured with darkMode: 'media', what CSS selector does it generate for dark mode styles?

A .dark .bg-gray-800 { background-color: #1f2937; }

B @media (dark-mode: enabled) { .bg-gray-800 { background-color: #1f2937; } }

C :root.dark { background-color: #1f2937; }

D @media (prefers-color-scheme: dark) { .dark\:bg-gray-800 { background-color: #1f2937; } }

💡 Hint

Tailwind wraps dark styles inside a media query for media strategy.

With 'media' strategy, Tailwind wraps dark mode styles inside '@media (prefers-color-scheme: dark)'. The class name is escaped with a backslash for the colon.

❓ accessibility

expert

Why is media-based dark mode strategy better for accessibility?

Choose the best reason why using media-based dark mode strategy improves accessibility for users.

A It respects the user's system preference automatically without extra toggles.

B It forces all websites to use dark mode regardless of user preference.

C It disables all light mode styles to reduce confusion.

D It requires users to manually add a dark mode toggle button.

💡 Hint

Think about how users set their preferences on their devices.

Media-based dark mode respects the user's system-wide preference automatically, improving user experience and accessibility without requiring manual toggles.