Media-based dark mode strategy in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the media-based dark mode strategy use to switch themes?

It uses the user's system preference detected by the prefers-color-scheme media query to automatically switch between light and dark themes.

beginner

How do you enable dark mode in Tailwind CSS using media queries?

Set darkMode: 'media' in the Tailwind config file. This tells Tailwind to apply dark styles when the user's system prefers dark mode.

beginner

Which CSS media feature detects if a user prefers dark mode?

The media feature is prefers-color-scheme: dark. It matches when the user’s system is set to dark mode.

beginner

How do you write a Tailwind class that applies only in dark mode with media strategy?

Prefix the class with <code>dark:</code>. For example, <code>dark:bg-gray-900</code> sets a dark background only when dark mode is active.

beginner

Why is media-based dark mode strategy user-friendly?

Because it respects the user's system preference automatically, so the website matches their chosen theme without extra settings.

Which Tailwind config option enables media-based dark mode?

A "darkMode: true"

B "darkMode: 'media'"

C "darkMode: 'class'"

D "darkMode: 'auto'"

Setting darkMode: 'media' tells Tailwind to use the system's dark mode preference.

What CSS media query detects dark mode preference?

A @media (theme: dark)

B @media (dark-mode: on)

C @media (color-scheme: dark)

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

The correct media query is prefers-color-scheme: dark.

How do you apply a background color only in dark mode using Tailwind?

A dark:bg-gray-900

B bg-dark-gray

C darkmode:bg-gray-900

D bg-gray-900-dark

Use the dark: prefix to apply styles only in dark mode.

What happens if a user’s system is set to light mode with media-based dark mode?

A Dark styles are applied

B No styles are applied

C Light styles are applied

D User is asked to choose

The site uses light styles because the system preference is light.

Which is a benefit of media-based dark mode strategy?

A Automatically matches system theme

B Website ignores user preference

C Requires JavaScript to work

D User must toggle theme manually

It automatically matches the user’s system theme without extra input.

Explain how media-based dark mode strategy works in Tailwind CSS.

Think about how the website knows when to show dark styles.

Describe the advantages of using media-based dark mode strategy for users.

Consider what users want from theme switching.