Pairing light and dark colors in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why use different colors for light and dark modes?

When designing a website with Tailwind CSS, why is it important to pair different colors for light and dark modes instead of using the same colors for both?

A Because using the same colors for both modes will cause the website to load slower.

B Because Tailwind CSS requires different colors for light and dark modes to compile correctly.

C Because dark mode disables all colors except black and white.

D Because colors that look good on a light background may not be visible or comfortable on a dark background.

💡 Hint

Think about how colors appear on different backgrounds and how that affects readability.

Colors that work well on light backgrounds can be hard to see or cause eye strain on dark backgrounds. Pairing colors thoughtfully ensures good contrast and readability in both modes.

📝 Syntax

intermediate

Tailwind syntax for dark mode background color

Which Tailwind CSS class correctly sets a background color of gray-100 in light mode and gray-900 in dark mode?

A bg-gray-100 dark:bg-gray-900

B bg-gray-900 dark:bg-gray-100

C bg-gray-100 bg-dark:bg-gray-900

D bg-gray-100 dark-gray-900

💡 Hint

Remember the syntax for applying styles in dark mode uses the 'dark:' prefix.

In Tailwind, the 'dark:' prefix applies styles when dark mode is active. So 'bg-gray-100 dark:bg-gray-900' means light mode uses gray-100 and dark mode uses gray-900.

❓ rendering

advanced

Visual result of paired text colors in light and dark modes

Given the following Tailwind classes on a paragraph: text-gray-800 dark:text-gray-200, what will the text color be when the user switches to dark mode?

Tailwind

<p class="text-gray-800 dark:text-gray-200">Hello, world!</p>

A The text color stays dark gray (gray-800) even in dark mode.

B The text color changes to a light gray (gray-200) on a dark background.

C The text color becomes black in dark mode.

D The text color becomes invisible in dark mode.

💡 Hint

Check how the 'dark:' prefix changes styles when dark mode is active.

The 'dark:text-gray-200' class overrides the light mode text color when dark mode is active, making the text a lighter gray for better contrast on dark backgrounds.

❓ selector

advanced

Choosing the best Tailwind color pair for button backgrounds

Which Tailwind CSS class pair best ensures a button background is visually distinct and accessible in both light and dark modes?

A bg-blue-300 dark:bg-blue-500

B bg-white dark:bg-black

C bg-gray-100 dark:bg-gray-200

D bg-blue-500 dark:bg-blue-300

💡 Hint

Think about which colors provide enough contrast on light and dark backgrounds.

Using a lighter blue (blue-300) in light mode and a darker blue (blue-500) in dark mode ensures the button stands out clearly in both modes.

❓ accessibility

expert

Ensuring text contrast meets accessibility standards in dark mode

You have a paragraph with class text-gray-400 dark:text-gray-600. What accessibility issue might this cause when switching to dark mode?

A Text will become bold automatically in dark mode.

B Text color will not change in dark mode, causing confusion.

C Text contrast will be too low in dark mode, making it hard to read.

D Text will be too bright in dark mode, causing eye strain.

💡 Hint

Consider how gray-600 looks on a dark background compared to gray-400 on a light background.

Gray-600 is a medium gray that may not have enough contrast on a dark background, making text difficult to read and failing accessibility guidelines.