暗色模式（Dark Mode）的 SEO 與 AI 影響評估

暗色模式（Dark Mode）是 2020 年起的設計趨勢，幾乎所有大型網站都有。但對 SEO 與 AI-Ready 真的有影響嗎？

本篇整理客觀的影響評估與實作建議，可搭配 暗色模式網頁設計 看完整視覺策略。

三個客觀事實

事實 1：AI 不直接看顏色

AI 爬蟲與 AI Overviews 主要解析 HTML 文字內容：

<!-- 暗色或亮色，AI 都讀同樣的 HTML -->
<article>
  <h1>AI-Ready 網站</h1>
  <p>...</p>
</article>

色彩是 CSS 層的視覺呈現，AI 不在乎是黑底白字還是白底黑字。

事實 2：效能影響輕微

暗色模式實作通常增加：

• CSS 變數定義：約 1-3KB
• 切換按鈕 JS：約 1-2KB
• 系統偵測代碼：約 0.5KB

總計 < 5KB，對 Core Web Vitals 影響可忽略，詳見 Core Web Vitals 與 AI 引用。

事實 3：使用者體驗加分

雖然 AI 不在乎，但使用者偏好對行為訊號有影響：

• 夜間使用者偏好暗色（避免眼睛疲勞）
• 年輕族群（< 35 歲）暗色偏好率 65%
• 開發者、設計師、創意工作者偏好暗色 80%+

行為訊號（停留時間、跳出率）間接影響 SEO。

該不該做暗色模式：判斷指南

你的目標客群是？
├─ 年輕族群（< 35 歲）→ ✅ 強烈建議
├─ 開發者 / 創意工作者 → ✅ 強烈建議
├─ 一般消費者（中老年）→ ⚠️ 可做可不做
└─ B2B 採購主管 → ⚠️ 不必優先

你的網站類型？
├─ SaaS / 工具 → ✅ 強烈建議
├─ 媒體 / 部落格 → ✅ 建議
├─ 電商 → ⚠️ 看調性
└─ 傳統 B2B / 餐飲 → ⚠️ 不必優先

夜間使用率？
├─ > 30% → ✅ 強烈建議
└─ < 10% → ⚠️ 不必優先

實作完整範例

步驟 1：CSS 變數定義

:root {
  /* 亮色模式（預設）*/
  --bg-color: #ffffff;
  --text-color: #1a1a1a;
  --primary: #3B82F6;
  --border: #e5e7eb;
}

[data-theme="dark"] {
  /* 暗色模式 */
  --bg-color: #0f172a;
  --text-color: #f1f5f9;
  --primary: #60a5fa;
  --border: #334155;
}

body {
  background: var(--bg-color);
  color: var(--text-color);
}

步驟 2：prefers-color-scheme 自動偵測

<script>
  // 先看 localStorage
  const theme = localStorage.getItem('theme');

  // 沒設定的話跟系統
  if (!theme) {
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
  } else {
    document.documentElement.setAttribute('data-theme', theme);
  }
</script>

步驟 3：手動切換按鈕

<button id="theme-toggle" aria-label="切換暗色模式">
  <svg class="sun-icon">...</svg>
  <svg class="moon-icon">...</svg>
</button>

<script>
  document.getElementById('theme-toggle').addEventListener('click', () => {
    const current = document.documentElement.getAttribute('data-theme');
    const next = current === 'dark' ? 'light' : 'dark';
    document.documentElement.setAttribute('data-theme', next);
    localStorage.setItem('theme', next);
  });
</script>

步驟 4：圖片處理

品牌 Logo 與重要圖片需要雙版本：

<picture>
  <source srcset="/logo-dark.svg" media="(prefers-color-scheme: dark)">
  <img src="/logo-light.svg" alt="品牌 Logo">
</picture>

或用 CSS：

.logo {
  content: url('/logo-light.svg');
}

[data-theme="dark"] .logo {
  content: url('/logo-dark.svg');
}

a11y 雙模式對比度測試

兩個模式各別測試：

亮色模式：
- 內文：#1a1a1a on #ffffff = 18.7:1 ✓ AAA
- 連結：#3B82F6 on #ffffff = 4.6:1 ✓ AA
- 次要文字：#6b7280 on #ffffff = 4.7:1 ✓ AA

暗色模式：
- 內文：#f1f5f9 on #0f172a = 15.4:1 ✓ AAA
- 連結：#60a5fa on #0f172a = 7.0:1 ✓ AAA
- 次要文字：#94a3b8 on #0f172a = 6.5:1 ✓ AAA

兩個模式都要 AA 級以上。

元伸客戶實戰

某 SaaS 客戶導入暗色模式：

最大效益不是 SEO 與 AI，是使用者體驗與停留時間。

不要犯的 4 個錯誤

• ❌ 直接 invert 顏色：暗色 ≠ 亮色反相，需重新設計色票
• ❌ 忽略品牌 Logo：黑色 Logo 在暗背景看不到
• ❌ 沒測對比度：暗色模式可能違反 WCAG
• ❌ 切換無動畫：突然黑白切換刺眼

結語：暗色模式是體驗加分項，不是 SEO 必修課

暗色模式對 SEO 與 AI 引用率影響微小，主要價值在使用者體驗。

元伸科技為客戶建議：

• 目標客群是年輕族群、SaaS、創意工作者 → 建議做
• 傳統 B2B、餐飲、中老年族群為主 → 可選
• 預算有限 → 先做 AI-Ready 核心，暗色模式作為第二期加值

做對的事比做多的事重要——暗色模式是錦上添花，不是雪中送炭。元伸科技的 客製化網站設計 會依品牌定位決定是否導入暗色模式，並整合到 企業形象網站方案 中。

系列文章結語

本文是「AI-Ready 智慧網站」系列的第 35 篇，也是最終篇。從 2026-04-26 起的這趟內容旅程，涵蓋了：

• AI Overviews 與傳統搜尋的差異
• Schema.org、llms.txt、E-E-A-T 等技術建置
• 業態應用（B2B 工業、電商、服務業、餐飲、房仲）
• 進階整合（自訂 GPT、AI Agent、改版遷移）
• 運營管理（KPI、ROI、預算配置、團隊協作）
• 設計細節（字型、暗色模式、a11y）

11 篇基礎 + 24 篇進階 = 35 篇完整 AI-Ready 學習路徑，希望能成為台灣中小企業面對 AI 搜尋時代的實戰指南。

下一階段，元伸科技會繼續每週 1-2 篇 Insights 文章，分享最新的 AI 趨勢、工具、實戰案例。訂閱 RSS 或追蹤元伸 LINE 官方帳號 不漏接。

如有任何 AI-Ready 升級需求，歡迎使用我們的 30 秒免費 AI 能見度測試，或直接 預約 30 分鐘免費諮詢。

— 元伸科技 OZ Champ