Media-based dark mode strategy in Tailwind - Mini Project: Build & Apply

Media-based Dark Mode Strategy with Tailwind CSS

📖 Scenario: You are building a simple webpage that changes its colors automatically based on the user's system dark mode preference. This helps users see the page comfortably whether they prefer light or dark themes.

🎯 Goal: Create a webpage using Tailwind CSS that uses the media-based dark mode strategy. The page should have a heading and a paragraph. The background and text colors should switch automatically when the user changes their system theme between light and dark.

📋 What You'll Learn

Use Tailwind CSS with the media strategy for dark mode

Create a heading with the text Welcome to Dark Mode Demo

Create a paragraph with the text This page adapts to your system theme.

Use background and text colors that change between light and dark modes

Ensure the page is responsive and accessible

💡 Why This Matters

🌍 Real World

Many websites today adapt their look automatically to the user's system dark mode preference to improve comfort and reduce eye strain.

💼 Career

Knowing how to implement media-based dark mode with Tailwind CSS is a valuable skill for front-end developers building modern, user-friendly websites.

1

Create the HTML skeleton with Tailwind CSS link

Create a basic HTML5 page with lang="en", charset="UTF-8", and a viewport meta tag. Add the Tailwind CSS CDN link inside the <head>. Inside the <body>, add a <main> element with a <h1> and a <p> containing the texts Welcome to Dark Mode Demo and This page adapts to your system theme. respectively.

Tailwind

    
    
    


    
        Welcome to Dark Mode Demo
        This page adapts to your system theme.
    

Hint

Remember to include the Tailwind CSS CDN script inside the <head> to use Tailwind classes.

2

Configure Tailwind to use media-based dark mode

Add a <script> block inside the <head> before the Tailwind CSS script. Inside it, configure Tailwind with tailwind.config = { darkMode: 'media' } to enable media-based dark mode strategy.

Tailwind

    
    
    
    


    
        Welcome to Dark Mode Demo
        This page adapts to your system theme.
    

Hint

Put the Tailwind config script before the Tailwind CSS script so the config applies correctly.

3

Add Tailwind classes for light and dark mode colors

Add Tailwind CSS classes to the <main> element to set the background color to bg-white in light mode and dark:bg-gray-900 in dark mode. Also add text color classes text-gray-900 for light mode and dark:text-gray-100 for dark mode.

Tailwind

    
    
    
        tailwind.config = {
            darkMode: 'media'
        }
    
    


    
        Welcome to Dark Mode Demo
        This page adapts to your system theme.
    

Hint

Use bg-white and dark:bg-gray-900 for background colors. Use text-gray-900 and dark:text-gray-100 for text colors. Add some padding and center the content with flexbox.

4

Add accessibility and responsive improvements

Add role="main" to the <main> element for accessibility. Also add aria-label="Main content area" to describe the main section. Finally, add responsive text sizes: text-2xl sm:text-3xl to the <h1> and text-base sm:text-lg to the <p>.

Tailwind

    
    
    
        tailwind.config = {
            darkMode: 'media'
        }
    
    


    
        Welcome to Dark Mode Demo
        This page adapts to your system theme.
    

Hint

Use role="main" and aria-label="Main content area" on the main element. Use responsive text size classes on the heading and paragraph.

Practice

1. What does setting darkMode: 'media' in Tailwind CSS configuration do?

easy

A. It enables dark mode styles based on the user's system preference.

B. It forces dark mode on all users regardless of preference.

C. It disables dark mode completely.

D. It requires manual toggling of dark mode via JavaScript.

Solution

1. Step 1: Understand Tailwind dark mode options

   Tailwind can detect user preference automatically with darkMode: 'media'.

2. Step 2: Effect of darkMode: 'media'

   This setting applies dark styles only if the user's system prefers dark mode.

3. Final Answer:

   It enables dark mode styles based on the user's system preference. -> Option A

4. Quick Check:

   darkMode: 'media' = automatic user preference [OK]

Hint: Remember 'media' means system preference triggers dark mode [OK]

Common Mistakes:

• Thinking it forces dark mode for all users
• Confusing 'media' with manual toggle
• Assuming it disables dark mode

2. Which of the following is the correct way to apply a background color only in dark mode using Tailwind with media strategy?

easy

A. bg-gray-800 dark:bg-gray-200

B. bg-gray-800 bg-dark:bg-gray-200

C. dark:bg-gray-800 bg-gray-200

D. bg-gray-800 darkmode:bg-gray-200

Solution

1. Step 1: Understand Tailwind dark mode prefix

   The correct prefix for dark mode styles is dark:, placed before the class.

2. Step 2: Correct order for background colors

   Normal background first, then dark:bg-* overrides in dark mode.

3. Final Answer:

   dark:bg-gray-800 bg-gray-200 -> Option C

4. Quick Check:

   Use dark: prefix before class [OK]

Hint: Use dark: prefix before classes for dark mode [OK]

Common Mistakes:

• Using wrong prefix like 'darkmode:'
• Placing dark class after normal class incorrectly
• Writing 'bg-dark:' instead of 'dark:bg-'

3. Given this Tailwind config snippet:

{ darkMode: 'media' }

and this HTML:

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

What background and text colors will appear if the user's system prefers dark mode?

medium

A. Background white, text black

B. Background black, text white

C. Background white, text white

D. Background black, text black

Solution

1. Step 1: Check dark mode config

   With darkMode: 'media', dark styles apply if system prefers dark mode.

2. Step 2: Analyze classes in dark mode

   dark:bg-black sets background black, dark:text-white sets text white in dark mode.

3. Final Answer:

   Background black, text white -> Option B

4. Quick Check:

   dark:bg-black + dark:text-white = black bg, white text [OK]

Hint: Dark mode classes override normal ones when system prefers dark [OK]

Common Mistakes:

• Ignoring dark mode overrides
• Mixing text and background colors
• Assuming normal styles always show

4. You wrote this Tailwind CSS config:

{ darkMode: 'media' }

and your HTML:

<div class="bg-white darkmode:bg-black">Test</div>

Why does the dark mode background not apply when system prefers dark mode?

medium

A. Because the prefix should be dark:, not darkmode:

B. Because darkMode must be set to 'class' instead of 'media'

C. Because bg-white overrides dark background always

D. Because Tailwind does not support dark mode with media queries

Solution

1. Step 1: Check dark mode prefix usage

   The correct prefix for dark mode classes is dark:, not darkmode:.

2. Step 2: Effect of wrong prefix

   Using darkmode:bg-black is invalid and ignored by Tailwind.

3. Final Answer:

   Because the prefix should be dark:, not darkmode: -> Option A

4. Quick Check:

   Use exact dark: prefix for dark mode [OK]

Hint: Use exactly dark: prefix, no variations [OK]

Common Mistakes:

• Typing 'darkmode:' instead of 'dark:'
• Changing config to 'class' unnecessarily
• Assuming normal classes override dark mode

5. You want to create a responsive card that changes background color in dark mode only on screens wider than 768px using Tailwind with media-based dark mode. Which class combination achieves this?

hard

A. bg-white md:bg-gray-200 dark:bg-gray-800

B. bg-white dark:md:bg-gray-800

C. bg-white dark:bg-gray-800 md:bg-gray-200

D. bg-white md:dark:bg-gray-800

Solution

1. Step 1: Understand responsive and dark mode prefixes

   Tailwind applies prefixes from left to right: md:dark: means dark mode styles apply only on medium screens and up.

2. Step 2: Analyze each option

   bg-white md:dark:bg-gray-800 uses md:dark:bg-gray-800 which applies dark background only on screens ≥768px and in dark mode.

3. Final Answer:

   bg-white md:dark:bg-gray-800 -> Option D

4. Quick Check:

   Use md:dark: to combine media query and dark mode [OK]

Hint: Chain prefixes: screen size first, then dark mode [OK]

Common Mistakes:

• Reversing prefix order like 'dark:md:'
• Applying dark mode without screen size condition
• Using unrelated classes that override styles