為什麼現代網頁不能沒有深色模式？

如果你在晚上關著燈滑手機，突然點開一個白底黑字的傳統網頁，那刺眼的白光絕對會讓你瞬間瞎掉，下一秒就是直接把網頁關掉。

在蘋果 (Apple) 正式在 iOS 與 macOS 系統中推出「深色模式 (Dark Mode)」之後，整個科技界的審美觀就被徹底顛覆了。現在，一個有質感的商業網站，如果沒有提供深淺色切換的功能，會讓人覺得這是上個世紀的產物。而許多工程師在接案時，如果加上了「全站支援 Dark Mode」這個功能，報價甚至可以多加兩三萬元。

在傳統的 CSS 時代，要實作深色模式是一場浩劫。你要把所有的字體顏色、背景顏色、邊框顏色全部複製一份，然後加上 .dark 的標籤，程式碼會變得又臭又長。但在 Tailwind CSS + Vibe Coding 的世界裡，這一切簡單到讓人想哭。

Tailwind CSS 的暗黑魔法：`dark:` 前綴

Tailwind 裡面內建了一個超級強大的機制：條件修飾符 (Modifiers)。

你只要在任何你想改變顏色的地方，加上 dark: 這個前綴字。當網頁切換到深色模式時，Tailwind 就會自動讓它生效。

讓我們看一個最直觀的例子：

<!-- 這是一個會變色的按鈕 -->
<button class="bg-white text-black dark:bg-black dark:text-white">
  點我買單
</button>

白天模式下：這個按鈕會吃到 bg-white (白底) 跟 text-black (黑字)。後面的 dark: 咒語會被自動忽略。
黑夜模式下：魔法啟動了！Tailwind 偵測到黑暗降臨，於是 dark:bg-black (黑底) 與 dark:text-white (白字) 瞬間發動，蓋掉前面的顏色。

這意味著，你可以在同一個 HTML 標籤裡，同時寫好白天與晚上的樣子。這對於 Vibe Coder 來說，是極度容易維護的神級設計！

實戰 Vibe Prompt：打造無縫切換的太陽/月亮按鈕

要讓這個深淺色模式在 React 專案中真正動起來，我們需要一個「開關 (Toggle)」按鈕。當使用者按下去的時候，網頁的右上角要從太陽變成月亮，而且整個背景要平滑地暗下來。

請在你的專案中，對著 Cursor 下達這段 UI 咒語：

【Dark Mode 切換按鈕 Vibe Prompt】 我正在使用 Next.js (App Router) 與 Tailwind CSS 進行開發。請幫我寫一個名為 ThemeToggle.tsx 的 Client Component 組件。需求如下：

請使用 next-themes 套件來處理深淺色狀態 (如果尚未安裝，請提醒我安裝)。

這個組件是一個圓形的按鈕。

當目前是白天 (light) 時，按鈕顯示黃色的太陽圖示 (請使用 lucide-react 的 Sun icon)。

當目前是夜晚 (dark) 時，按鈕顯示白色的月亮圖示 (請使用 lucide-react 的 Moon icon)。

按下按鈕時要有平滑的旋轉動畫過渡效果 (transition-transform duration-500)。

避免 Hydration Mismatch 的錯誤，請在 useEffect mounted 之後才渲染圖示。

請附上詳細的中文註解。

AI 產出的神級無縫切換按鈕：

'use client'; // 宣告這是在瀏覽器端執行的組件

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);

  // 確保在客戶端掛載後才渲染，避免 React 水合報錯
  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) return <div className="w-10 h-10" />; // 載入中的佔位符

  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"
    >
      {/* 如果是深色模式就顯示月亮，淺色就顯示太陽，並加上旋轉進場動畫 */}
      {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>
  );
}

把這個按鈕放到你的網頁右上角 (Navbar)。當你點下去的那一瞬間，整個網站的背景、文字、卡片顏色，全部在一秒之內瞬間變成了極具質感的深色風格。

這項功能在外面接案市場，通常是會讓客戶感到「驚艷」的加分項目。有了 Tailwind 與 AI 的加持，你甚至連 CSS 都不用寫，就能完成這個高級的商業功能。

在下一章中，我們將挑戰更困難的任務：直接請 AI 幫我們生成三套截然不同的「商業風格版型」，讓你能夠用同一套程式碼，賣給三個不同的客戶！

為什麼現代網頁不能沒有深色模式？

Tailwind CSS 的暗黑魔法：dark: 前綴

實戰 Vibe Prompt：打造無縫切換的太陽/月亮按鈕

解鎖完整教學內容

Tailwind CSS 的暗黑魔法：`dark:` 前綴