Why Modern Websites Can't Survive Without Dark Mode?

If you're scrolling your phone at night with the lights off and suddenly open a traditional white-background webpage, the blinding light will instantly make you want to close it.

After Apple officially introduced "Dark Mode" in iOS and macOS, the tech industry's aesthetic standards were completely revolutionized.
Now, a professional business website without dark/light mode switching feels like a relic from the last century. Many developers can even charge an extra 20,000-30,000 NTD for adding "full Dark Mode support" to their projects.

In the traditional CSS era, implementing dark mode was a nightmare. You had to duplicate all font colors, background colors, and border colors with .dark tags, resulting in bloated, messy code.
But in the Tailwind CSS + Vibe Coding world, it's so simple it might make you cry.

---

Tailwind CSS's Dark Magic: The dark: Prefix

Tailwind has a built-in superpower: Conditional Modifiers.

Just add the dark: prefix to any color-related utility. When dark mode activates, Tailwind automatically applies these styles.

Here's a straightforward example:

<!-- This is a color-shifting button -->
<button class="bg-white text-black dark:bg-black dark:text-white">
  Checkout Now
</button>

• Light mode: The button uses bg-white (white background) and text-black (black text). The dark: utilities are ignored.
• Dark mode: Magic activates! Tailwind detects darkness and applies dark:bg-black (black background) and dark:text-white (white text), overriding the light colors.

This means you can define both light and dark appearances within the same HTML tag—a game-changer for maintainability in Vibe Coding!

---

Vibe Prompt Tutorial: Building a Seamless Sun/Moon Toggle Button

To make dark/light mode work in a React project, we need a toggle button.
When clicked, the button should switch between a sun and moon icon while smoothly transitioning the entire page's theme.

Paste this UI spell into your project's cursor:

【Dark Mode Toggle Vibe Prompt】
I'm using Next.js (App Router) with Tailwind CSS.
Please create a Client Component named ThemeToggle.tsx with:

1. Use next-themes for theme management (prompt to install if missing).
2. A circular button component.
3. Displays a yellow sun icon (from lucide-react) in light mode.
4. Displays a white moon icon (from lucide-react) in dark mode.
5. Smooth rotation animation on click (transition-transform duration-500).
6. Prevent Hydration Mismatch by rendering icons only after useEffect mount.
7. Include detailed Chinese comments.

AI-Generated Seamless Toggle Button:

'use client'; // Declare as client-side component

import { useTheme } from 'next-themes';
import { Sun, Moon } from 'lucide-react';
import { useEffect, useState } from 'react';

export default function ThemeToggle() {
  const { theme, setTheme } = useTheme();
  const [mounted, setMounted] = useState(false);

  // Ensure rendering only after client-side mount to avoid hydration errors
  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) return <div className="w-10 h-10" />; // Loading placeholder

  return (
    <button
      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
      className="p-2 rounded-full bg-gray-200 dark:bg-gray-800 transition-colors duration-300 hover:scale-110"
      aria-label="Toggle Dark Mode"
    >
      {/* Show moon in dark mode, sun in light mode with spin animation */}
      {theme === 'dark' ? (
        <Moon className="w-6 h-6 text-yellow-300 animate-[spin_0.5s_ease-in-out]" />
      ) : (
        <Sun className="w-6 h-6 text-yellow-500 animate-[spin_0.5s_ease-in-out]" />
      )}
    </button>
  );
}

Place this button in your navbar's top-right corner.
When clicked, your entire site—backgrounds, text, cards—will instantly transform into a premium dark theme.

This feature often "wows" clients in freelance projects.
With Tailwind and AI, you can deliver this high-end commercial feature without writing a single line of CSS.

In the next chapter, we'll tackle something even more advanced: Having AI generate three completely different "commercial-style templates" from the same codebase, allowing you to sell to three different clients!

Chapter Summary

• Understand core concepts and principles
• Master implementation methods and techniques
• Familiar with common issues and solutions
• Able to apply in real projects

Further Reading

• Official documentation and API references
• Open source examples on GitHub
• Technical books and online courses
• Community discussions and tech blogs