Why dark mode improves user experience in Tailwind - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply a dark background using Tailwind CSS.

Tailwind

<div class="[1] min-h-screen flex items-center justify-center">
  <p class="text-white">Dark mode background</p>
</div>

Drag options to blanks, or click blank then click option'

Abg-blue-500

Bbg-yellow-300

Cbg-white

Dbg-gray-900

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing a light background class like bg-white.

Using a bright color that is not suitable for dark mode.

The class bg-gray-900 sets a very dark background color, suitable for dark mode.

2fill in blank

medium

Complete the code to make text color adapt to dark mode using Tailwind CSS.

Tailwind

<p class="[1]">This text changes color in dark mode.</p>

Drag options to blanks, or click blank then click option'

Atext-black dark:text-white

Btext-white dark:text-black

Ctext-gray-500

Dtext-yellow-400

Attempts:

3 left

💡 Hint

Common Mistakes

Reversing the colors so text is white on light background.

Not using the dark: prefix.

The class text-black dark:text-white sets black text normally and white text in dark mode for better readability.

3fill in blank

hard

Fix the error in the dark mode toggle button code by completing the missing class.

Tailwind

<button class="px-4 py-2 rounded [1] transition-colors duration-300">
  Toggle Dark Mode
</button>

Drag options to blanks, or click blank then click option'

Abg-gray-200 dark:bg-gray-800

Bbg-red-500

Ctext-blue-700

Dborder-2 border-black

Attempts:

3 left

💡 Hint

Common Mistakes

Using a fixed color that does not change with dark mode.

Forgetting to add transition classes for smooth color change.

The class bg-gray-200 dark:bg-gray-800 changes the button background color based on light or dark mode, improving user experience.

4fill in blank

hard

Fill both blanks to create a responsive card with dark mode support.

Tailwind

<div class="max-w-sm rounded overflow-hidden shadow-lg [1] p-6">
  <h2 class="font-bold text-xl mb-2 [2]">Dark Mode Card</h2>
  <p>This card adapts to dark mode and screen size.</p>
</div>

Drag options to blanks, or click blank then click option'

Abg-white dark:bg-gray-900

Btext-gray-900 dark:text-white

Ctext-white

Dbg-gray-300

Attempts:

3 left

💡 Hint

Common Mistakes

Using fixed colors that don't adapt to dark mode.

Not using dark mode classes for text.

The card background uses bg-white dark:bg-gray-900 to switch colors. The heading uses text-gray-900 dark:text-white for readability in both modes.

5fill in blank

hard

Fill all three blanks to create a dark mode toggle switch with accessible labels.

Tailwind

<label for="dark-toggle" class="flex items-center cursor-pointer [1]">
  <div class="relative">
    <input type="checkbox" id="dark-toggle" class="sr-only" />
    <div class="w-10 h-4 [2] rounded-full shadow-inner"></div>
    <div class="dot absolute w-6 h-6 [3] rounded-full shadow -left-1 -top-1 transition"></div>
  </div>
  <span class="ml-3 text-gray-700 dark:text-gray-300">Dark Mode</span>
</label>

Drag options to blanks, or click blank then click option'

Abg-gray-300 dark:bg-gray-600

Bbg-green-400

Cbg-white

Dbg-black

Attempts:

3 left

💡 Hint

Common Mistakes

Not using sr-only for accessible hidden input.

Using colors that don't contrast well in dark mode.

The label background uses bg-gray-300 dark:bg-gray-600 to adapt to dark mode. The toggle track uses bg-green-400 for the active color, and the dot uses bg-white for contrast and visibility.

Practice

1. Why does dark mode improve user experience in low-light environments?

easy

A. It makes the screen brighter to help users see better.

B. It reduces eye strain by using darker colors that are easier to look at.

C. It disables all colors except black and white.

D. It increases the font size automatically.

Solution

1. Step 1: Understand eye strain in low light

   Bright screens in dark rooms cause discomfort and strain on eyes.

2. Step 2: How dark mode helps

   Dark mode uses darker backgrounds and lighter text, reducing brightness and easing eye strain.

3. Final Answer:

   It reduces eye strain by using darker colors that are easier to look at. -> Option B

4. Quick Check:

   Dark mode reduces eye strain = A [OK]

Hint: Dark mode = less bright = easier on eyes [OK]

Common Mistakes:

• Thinking dark mode makes screen brighter
• Believing dark mode changes font size
• Assuming dark mode removes all colors

2. Which Tailwind CSS class prefix is used to apply styles only in dark mode?

easy

A. light:

B. mode-dark:

C. dark:

D. night:

Solution

1. Step 1: Recall Tailwind dark mode syntax

   Tailwind uses the prefix dark: to apply styles when dark mode is active.

2. Step 2: Check other options

   Other prefixes like light:, mode-dark:, or night: are not valid Tailwind prefixes.

3. Final Answer:

   dark: -> Option C

4. Quick Check:

   Tailwind dark mode prefix = dark: [OK]

Hint: Remember Tailwind uses dark: prefix for dark mode styles [OK]

Common Mistakes:

• Using light: instead of dark:
• Adding extra words like mode- or night-
• Confusing with other CSS frameworks

3. What will be the background color of this div in dark mode?

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

medium

A. Gray background (#1F2937)

B. White background

C. Black background

D. Transparent background

Solution

1. Step 1: Understand Tailwind classes used

   The div has bg-white for normal mode and dark:bg-gray-800 for dark mode.

2. Step 2: Identify dark mode background color

   In dark mode, bg-gray-800 applies, which is a dark gray (#1F2937).

3. Final Answer:

   Gray background (#1F2937) -> Option A

4. Quick Check:

   dark:bg-gray-800 means gray background in dark mode = A [OK]

Hint: dark:bg-gray-800 means gray background in dark mode [OK]

Common Mistakes:

• Choosing white background ignoring dark: prefix
• Assuming black instead of gray
• Confusing transparent with gray

4. This Tailwind code is meant to change text color in dark mode but it doesn't work:

<p class="text-black dark:text-white">Hello</p>

What is the likely reason?

medium

A. You must use dark-mode: prefix instead of dark:.

B. The class text-black is incorrect.

C. The text color cannot change in dark mode.

D. The dark mode is not enabled in Tailwind config.

Solution

1. Step 1: Check Tailwind dark mode setup

   Dark mode styles only work if dark mode is enabled in Tailwind config (e.g., 'media' or 'class').

2. Step 2: Verify class correctness

   Classes text-black and dark:text-white are valid; prefix dark: is correct.

3. Final Answer:

   Dark mode is not enabled in Tailwind config. -> Option D

4. Quick Check:

   Dark mode must be enabled in config = C [OK]

Hint: Enable dark mode in config to activate dark: styles [OK]

Common Mistakes:

• Using wrong prefix like dark-mode:
• Thinking text-black is invalid
• Assuming text color can't change in dark mode

5. You want to save battery on OLED devices by using dark mode with Tailwind. Which approach is best to implement this?

hard

A. Use dark: classes and toggle dark mode based on user's system preference.

B. Manually change all colors to black without using Tailwind dark mode.

C. Use only light mode styles and avoid dark mode.

D. Set background to white and text to black always.

Solution

1. Step 1: Understand OLED battery saving

   OLED screens save battery when displaying black or very dark colors because pixels turn off.

2. Step 2: Use Tailwind dark mode with system preference

   Using dark: classes and toggling dark mode based on user's system preference ensures dark mode activates automatically, saving battery.

3. Step 3: Avoid manual color changes or ignoring dark mode

   Manual color changes or ignoring dark mode miss the benefit of automatic toggling and consistent styling.

4. Final Answer:

   Use dark: classes and toggle dark mode based on user's system preference. -> Option A

5. Quick Check:

   Dark mode + system preference = battery saving [OK]

Hint: Use dark: with system preference for best battery saving [OK]

Common Mistakes:

• Manually setting colors without dark mode
• Ignoring user's system preference
• Always using light mode only