nonobie — Real dev skills, explained like a friend would

What is Dark Mode?

Dark mode is a color scheme that uses light text on dark backgrounds. It reduces eye strain in low-light environments, saves battery on OLED screens, and is now a standard feature on every modern website.

Tailwind's `dark:` Prefix

Tailwind makes dark mode incredibly simple with the dark: variant prefix. Just add it alongside any utility class:

html

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
  This div automatically switches colors in dark mode
</div>

How it works:

bg-white = light mode (white background)
dark:bg-gray-900 = dark mode (near-black background)
text-gray-900 = light mode (dark text)
dark:text-gray-100 = dark mode (light text)

Two Dark Mode Strategies

Strategy 1: `media` (Automatic — follows system preference)

// tailwind.config.js
module.exports = {
  darkMode: 'media', // or just remove this line (default)
  // ...
}

How it works: Uses prefers-color-scheme media query. If user has dark mode enabled in their OS, your site automatically shows dark mode.

html

<!-- Automatically switches based on OS setting -->
<div class="bg-white dark:bg-gray-900">
  <p class="text-gray-700 dark:text-gray-300">
    This adapts to your system theme automatically.
  </p>
</div>

Pros: Zero , respects user's system preference.
Cons: User can't override per-site. No toggle .

Strategy 2: `class` (Manual toggle — recommended)

// tailwind.config.js
module.exports = {
  darkMode: 'class', // Enable class-based dark mode
  // ...
}

How it works: When a parent has class="dark", all dark: utilities inside it activate.

html

<html class="dark">
  <body>
    <div class="bg-white dark:bg-gray-900">
      <!-- Dark mode is ON because html has class="dark" -->
    </div>
  </body>
</html>

Pros: User can toggle independently. Persist choice with localStorage.
Cons: Requires JavaScript for toggle functionality.

Strategy 2 is the standard

Almost every modern website (GitHub, Twitter, YouTube) uses class-based dark mode. It gives users control. We'll use this approach.

Core Dark Mode Patterns

Basic Dark Mode Setup

html

<!-- Add dark class to html element to activate dark mode -->
<html class="dark">
<body class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
  <header class="bg-gray-100 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
    <h1 class="text-2xl font-bold">My App

Card in Dark Mode

html

<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md dark:shadow-2xl overflow-hidden">
  <div class="p-6">
    <h3 class="text-gray-900 dark:text-white font-bold mb-2">Card Title</h3>
    <p class="text-gray-600 dark:text-gray-400">
      Description text that's readable in both modes.
    </

Form Inputs in Dark Mode

html

<input 
  class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 
         bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 
         rounded-lg focus:ring-2 focus:ring-blue-500 outline-none"
  placeholder="Enter your email"
/>

html

<nav class="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
  <div class="flex justify-between items-center h-16 px-4">
    <h1 class="text-gray-900 dark:text-white font-bold">My App</h1>
    <ul class="flex gap-6">
      <li><

Dark Mode Toggle Button

The Toggle Component

jsx

import React, { useState, useEffect } from 'react';
 
export function DarkModeToggle() {
  const [darkMode, setDarkMode] = useState(false);
  
  // On mount: read from localStorage or system preference
  useEffect(()

How It Works

plaintext

User clicks toggle
       ↓
Toggle state changes (light ↔ dark)
       ↓
Add/remove 'dark' class on <html>
       ↓
All `dark:` utilities in the page activate/deactivate
       ↓
Save preference to localStorage
       ↓
On next visit, preference is restored from localStorage
       ↓
(If no stored preference, falls back to system setting)

Dark Mode Complete HTML Example

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dark Mode Demo

Dark Mode Best Practices

1. Don't Just Invert Colors

html

<!-- ❌ Wrong: pure inversion is harsh on eyes -->
<div class="bg-black text-white p-6">
 
<!-- ✅ Right: use soft dark grays -->
<div class="bg-gray-900 text-gray-100 p-6">

2. Use Reduced Contrast

html

<!-- Light mode: high contrast -->
<p class="text-gray-900">Primary text</p>
<p class="text-gray-500">Secondary text</p>
 
<!-- Dark mode: softer contrast -->
<p class="

3. Add Transition for Smooth Switches

css

* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

Or per-element:

html

<div class="bg-white dark:bg-gray-900 transition-colors duration-300">

4. Consider Images

html

<!-- Use different images for dark/light mode -->
<img src="logo-light.svg" class="dark:hidden" alt="Logo (light)" />
<img src="logo-dark.svg" class="hidden dark:block" alt="Logo (dark)

5. Test All Components

Check every component in both modes: buttons, inputs, modals, cards, tables, etc.

Dark Mode Color Palette

Element	Light Mode	Dark Mode
Page background	`bg-white`	`bg-gray-900`
Card background	`bg-white`	`bg-gray-800`
Surface (nav, sidebar)	`bg-gray-100`	`bg-gray-800`
Primary text	`text-gray-900`	`text-gray-100`
Secondary text	`text-gray-600`	`text-gray-400`
Border	`border-gray-200`	`border-gray-700`
Shadow	`shadow-md`	`shadow-2xl dark:shadow-black/30`
background

What You've Learned

✅ dark: prefix activates utilities in dark mode
✅ Two strategies: media (automatic) and class (manual toggle)
✅ class strategy is the standard for modern websites
✅ Add dark: to backgrounds, text, borders, shadows, inputs
✅ Toggle with JavaScript + persist with localStorage
✅ Use soft grays (not pure black/white) for dark mode
✅ Add smooth transitions for theme changes

What's Next?

Now that you've mastered Tailwind CSS:

Chapter 9: JavaScript — variables, types, and data structures
Chapter 10: JavaScript Functions — logic and control flow
Chapter 11: JavaScript Arrays and Objects — data manipulation
Chapter 12: JavaScript Async — promises, fetch, and /await

Dark Mode with Tailwind CSS

What is Dark Mode?

Tailwind's `dark:` Prefix

Two Dark Mode Strategies

Strategy 1: `media` (Automatic — follows system preference)

Strategy 2: `class` (Manual toggle — recommended)

Core Dark Mode Patterns

Basic Dark Mode Setup

Card in Dark Mode

Form Inputs in Dark Mode

Navigation in Dark Mode

Dark Mode Toggle Button

The Toggle Component

How It Works

Dark Mode Complete HTML Example

Dark Mode Best Practices

1. Don't Just Invert Colors

2. Use Reduced Contrast

3. Add Transition for Smooth Switches

4. Consider Images

5. Test All Components

Dark Mode Color Palette

What You've Learned

What's Next?

Dark Mode with Tailwind CSS

What is Dark Mode?

Tailwind's dark: Prefix

Two Dark Mode Strategies

Strategy 1: media (Automatic — follows system preference)

Strategy 2: class (Manual toggle — recommended)

Core Dark Mode Patterns

Basic Dark Mode Setup

Card in Dark Mode

Form Inputs in Dark Mode

Navigation in Dark Mode

Dark Mode Toggle Button

The Toggle Component

How It Works

Dark Mode Complete HTML Example

Dark Mode Best Practices

1. Don't Just Invert Colors

2. Use Reduced Contrast

3. Add Transition for Smooth Switches

4. Consider Images

5. Test All Components

Dark Mode Color Palette

What You've Learned

What's Next?

Tailwind's `dark:` Prefix

Strategy 1: `media` (Automatic — follows system preference)

Strategy 2: `class` (Manual toggle — recommended)