Darkmode.Js - 快速幫網站加入 Dark Mode 深色主題、黑暗版本、夜間模式自動轉換功能

Q: 有些網頁元素沒有變暗

這是 Darkmode.Js 的已知限制。mix-blend-mode: difference 的作用範圍會受到 CSS 堆疊上下文影響，iframe 內嵌內容（YouTube、Google Maps）、SVG 圖形、設定了 isolation: isolate 或 position: fixed 的容器都不會被反轉。解決方法是手動為這些元素加上深色樣式，或在設定中加入 ignoreTag: ['iframe'] 排除它們。

Q: 如何讓深色模式自動跟隨作業系統

Darkmode.Js 的 autoMatchOsTheme 選項預設就是開啟的。它透過 window.matchMedia('(prefers-color-scheme: dark)') 偵測系統設定，在 macOS、Windows、Android 和 iOS 上都能正常運作。使用者也可以隨時透過按鈕手動切換，切換後的偏好會以手動選擇為優先。

Facebook Line Messenger Telegram

想在網站加上深色模式切換功能，Darkmode.Js 只要兩行 JavaScript 就能搞定，是目前最輕量、零設定的做法。如果你追求更精準的樣式控制，純 CSS 的 prefers-color-scheme 或 2024 年底成為 Baseline 的 light-dark() 函式也值得考慮。這篇文章會帶你比較三種路線，幫你選出最適合自己網站的方案。

什麼是 Darkmode.Js

Darkmode.Js 是一套開源的 JavaScript 函式庫，由開發者 Sandoche 製作，採用 MIT 授權條款，完全免費，原始碼託管在 GitHub。它的原理是利用 CSS 的 mix-blend-mode: difference 屬性，把網頁上的顏色做反轉運算，讓淺色背景變深色、深色文字變淺色，看起來就像切換了一整套深色主題。

這種做法的好處是通用性極高：不需要針對每個 HTML 元素寫 CSS，任何網站（靜態 HTML、WordPress、Shopify、Blogger）都能直接套用。缺點是反轉效果無法精確控制每個元件的配色，某些元素（iframe 內嵌內容、SVG、設定了 isolation: isolate 的容器）可能不會被正確反轉。

如果你想了解完整的 API 文件和進階範例，可以前往 Darkmode.Js 官方網站查看。

三種網站 Dark Mode 實作方式比較

方式	技術門檻	樣式控制	適合對象	效能影響
Darkmode.Js	低（複製貼上）	低（自動反轉）	不想動 CSS 的站長	極小（壓縮後不到 5KB）
純 CSS prefers-color-scheme	中（需寫 CSS 變數）	高（逐元素設定）	前端開發者	零（純 CSS）
WordPress 外掛	極低（後台安裝）	中（圖形化設定）	WordPress 使用者	視外掛而定

選擇的關鍵在於你的技術能力和對深色模式的精確度要求。下面的段落會逐一說明每種做法。

Darkmode.Js 安裝教學

安裝 Darkmode.Js 只需要兩個步驟。先在你的 HTML 中引入 CDN 腳本，再初始化外掛。

步驟一：在 </body> 標籤之前加入以下程式碼。

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/darkmode-js.min.js"></script> <script> function addDarkmodeWidget() { new Darkmode().showWidget(); } window.addEventListener('load', addDarkmodeWidget); </script>

這樣就行了。頁面載入後，右下角會出現一個浮動的切換按鈕，點一下就能在淺色和深色之間切換。外掛預設會自動偵測作業系統的深色模式設定，也會把使用者的偏好存進 Cookie，下次造訪時自動套用。

如果你是使用模組化開發的前端工程師，也可以透過 npm 安裝：npm install darkmode-js，然後用 import Darkmode from 'darkmode-js' 引入。對大多數網站來說，CDN 是最省事的做法，不用管建置流程。CDN 版本會從最近的節點載入，對效能的影響微乎其微。想了解 CDN 對速度的具體影響，可以參考我們之前的Cloudflare CDN 速度測試分析。

Darkmode.Js 進階設定與客製化

showWidget() 只是預設用法。你可以透過傳入 options 物件來調整按鈕位置、動畫時間、基準色等參數。

var options = { bottom: '64px', right: 'unset', left: '32px', time: '0.5s', mixColor: '#fff', backgroundColor: '#fff', buttonColorDark: '#100f2c', buttonColorLight: '#fff', saveInCookies: true, label: '🌓', autoMatchOsTheme: true }; const darkmode = new Darkmode(options); darkmode.showWidget();

幾個重要的參數說明：

mixColor：這是反轉運算的基準色。如果你網站的底色不是純白（例如米白或淺灰），要把這個值改成實際的背景色，深色模式呈現才會準確。
time：切換動畫的過渡時間，建議設 0.3 到 0.5 秒，看起來最滑順。
autoMatchOsTheme：預設開啟，會自動偵測作業系統是否為深色模式並套用。偵測方式是透過 window.matchMedia('(prefers-color-scheme: dark)') 這個瀏覽器 API。
saveInCookies：預設開啟，使用者的手動切換偏好會存進 Cookie，下次造訪自動套用。

配色選擇可以搭配Alwane 網站色碼分析工具或Colorion 色彩配置工具來找到適合的色系，讓按鈕和深色背景更協調。

WordPress 網站的 Dark Mode 方案

如果你的網站是用 WordPress 架設的，有三種做法可以選。先確認你使用的是自架站的 WordPress.org，而不是功能受限的 WordPress.com，差異可以參考我們的WordPress.com 與 WordPress.org 比較說明。

方式一：在佈景主題中嵌入 Darkmode.Js

進入 WordPress 後台的「外觀 → 佈景主題編輯器」，選擇目前佈景主題的 header.php 或 footer.php，在 </body> 之前貼上前面的程式碼即可。建議使用子佈景主題（Child Theme）來放這些自訂程式碼，避免佈景主題更新時被覆蓋。如果你不想直接修改佈景主題檔案，也可以用「Insert Headers and Footers」這類外掛來插入程式碼。

方式二：安裝 WordPress Dark Mode 外掛

不想碰程式碼的話，直接安裝外掛是最快的方式。目前比較成熟的選擇有：

WP Dark Mode：活躍安裝數超過十萬，提供圖形化設定介面，支援時間排程自動切換、特定頁面停用深色模式、切換動畫效果等功能，是功能最完整的選項。
Blackout: Dark Mode Widget：基於 Darkmode.Js 開發，安裝後幾乎不用設定就能使用，適合想快速上手的站長。

安裝方式就是在後台「外掛 → 安裝外掛」頁面搜尋名稱，點安裝再啟用。但要注意一件事：如果你同時使用了WordPress 快取外掛，深色模式的 Cookie 判定可能被快取機制干擾，造成頁面閃爍（FOUC）。解決方法是在快取外掛的設定中排除 Dark Mode 相關的 Cookie，或使用支援「依 Cookie 分流快取」的功能。

主機的回應速度也會影響深色模式的切換流暢度。Bluehost 主機是 WordPress 官方推薦的託管服務商，穩定性和速度都有保障，也提供一鍵安裝 WordPress 的功能。流量較大的網站則可以考慮Kinsta這類使用 Google Cloud Platform 的高效能託管方案。更多主機選擇可以參考我們的WordPress 主機推薦懶人包，裡面有 17 款主機的詳細比較。

純 CSS 實作 Dark Mode：更現代的做法

如果你願意多花一點時間設定，純 CSS 方案其實更優雅。截至 2026 年 5 月，prefers-color-scheme 媒體查詢的全球瀏覽器支援率已經超過 97%，所有主流瀏覽器（Chrome 76+、Firefox 67+、Safari 12.1+、Edge 79+）都支援。更值得注意的是，CSS 的 light-dark() 函式已經在 2024 年底成為 Baseline 特性，所有主流瀏覽器都支援，讓深色模式的實作變得更簡潔。

做法是先用 CSS 自訂屬性定義淺色主題的變數，然後在媒體查詢中覆蓋為深色版本的值：

:root { --bg-color: #ffffff; --text-color: #333333; --link-color: #0066cc; } @media (prefers-color-scheme: dark) { :root { --bg-color: #1a1a2e; --text-color: #e0e0e0; --link-color: #82aaff; } } body { background-color: var(--bg-color); color: var(--text-color); } a { color: var(--link-color); }

這樣寫的好處是完全不需要 JavaScript，瀏覽器會根據使用者的系統深色模式設定自動套用。整個切換邏輯在 CSS 層級完成，效能影響為零。如果你想加上手動切換按鈕，只需要一小段 JavaScript 來在 <html> 上切換 class name，把偏好存進 localStorage 即可，核心邏輯大約十行程式碼。

如果用的是更新版的寫法，light-dark() 可以直接在同一行搞定：

:root { color-scheme: light dark; } body { background-color: light-dark(#ffffff, #1a1a2e); color: light-dark(#333333, #e0e0e0); }

比起 Darkmode.Js 的全自動反轉，純 CSS 方案雖然初始設定比較花時間，但你能完全掌控每個視覺細節，深色模式可以是精心設計的色彩系統，而不是簡單的顏色反轉。搭配CSS 背景圖案產生器或3D CSS 效果產生器，可以讓深色模式的設計更有質感。

Dark Mode 設計建議與無障礙注意事項

深色模式不是把背景變黑、文字變白就好。設計不當的深色模式反而會讓閱讀體驗更差。以下是從實際專案中整理的幾個重點。

對比度要適中，不是越高越好。WCAG 2.1 無障礙標準要求正文文字與背景的對比度至少 4.5:1，但這不代表你該用純黑 #000000 配純白 #FFFFFF（對比度 21:1）。過高的對比會讓文字看起來像在發光，長時間閱讀反而不舒服。Google Material Design 團隊建議使用 #121212 作為深色背景色，這個值足以提供深色感受，又不會太極端。

圖片和互動元素也需要調整。在深色背景下，原本設計給淺色背景的圖片可能顯得太亮。可以用 filter: brightness(0.8) 或 opacity: 0.9 適度降低亮度。表單元件（輸入框、按鈕、下拉選單）也需要對應的深色樣式，否則整個頁面看起來會像「做一半」。Focus 狀態在深色背景上也需要調整顏色，確保鍵盤操作的使用者能清楚看到焦點位置。

如果需要處理深色模式下的圖片素材，免費圖片去背工具和AI 圖片增強工具能幫你優化呈現效果。免費圖庫資源裡也有大量適合深色背景設計的素材可以運用。

對於想做好 SEO 的站長，建議搭配Detailed SEO Extension檢查深色模式下的頁面 SEO 狀態，也用結構化資料測試工具確認深色模式的實作不會影響結構化資料的呈現。

適合誰 / 不適合誰

適合用 Darkmode.Js 的人：不想碰 CSS、希望五分鐘內搞定的站長；用靜態 HTML 或簡單佈景主題的網站；需要快速驗證深色模式是否受訪客歡迎。
不適合用 Darkmode.Js 的人：對品牌配色有嚴格要求的企業網站；頁面中有大量 iframe 內嵌元件的網站；追求無障礙最高標準的公共服務網站。這些情況建議走純 CSS 路線。
適合用 WordPress 外掛的人：完全不想碰程式碼的 WordPress 使用者；需要時間排程、特定頁面停用等進階功能的人。

常見問題與解決方式

有些網頁元素沒有變暗

這是 Darkmode.Js 的已知限制。mix-blend-mode: difference 的作用範圍會受到 CSS 堆疊上下文影響，iframe 內嵌內容（YouTube、Google Maps）、SVG 圖形、設定了 isolation: isolate 或 position: fixed 的容器都不會被反轉。解決方法是手動為這些元素加上深色樣式，或在設定中加入 ignoreTag: ['iframe'] 排除它們。

快取外掛導致深色模式狀態丟失

頁面快取會把 HTML 存起來，導致 Dark Mode 的 Cookie 判定失效，使用者明明設定了深色模式卻顯示淺色版。這種閃爍現象對使用者體驗的傷害很大。解決方法是在快取外掛中排除 Dark Mode 相關的 Cookie，或使用支援「依 Cookie 分流快取」的功能。

瀏覽器擴充功能衝突

很多使用者會安裝 Dark Reader 這類擴充功能強制啟用深色模式。如果你的網站已經用 Darkmode.Js，加上使用者的擴充功能，可能產生「雙重反轉」反而變成淺色。這個問題無法完全控制，但可以在程式碼中偵測是否有其他 Dark Mode 工具正在運作，避免重複套用。

Darkmode.Js 是否完全免費

Dark Mode 切換會影響網站速度嗎

影響極小。Darkmode.Js 壓縮後不到 5KB，切換動作透過 CSS 屬性變更實現，不涉及大規模 DOM 重繪。加入前後的 Lighthouse 分數差異通常在 1 到 2 分以內。更多速度優化技巧可以參考我們的WordPress 速度優化教學。

如何讓深色模式自動跟隨作業系統

Darkmode.Js 的 autoMatchOsTheme 選項預設就是開啟的。它透過 window.matchMedia('(prefers-color-scheme: dark)') 偵測系統設定，在 macOS、Windows、Android 和 iOS 上都能正常運作。使用者也可以隨時透過按鈕手動切換，切換後的偏好會以手動選擇為優先。

Dark Mode 對 SEO 有什麼影響

深色模式功能本身不是直接的排名因素。但如果 Dark Mode 的實作影響了 Core Web Vitals（例如切換時造成大量版面位移 CLS），間接可能對排名產生負面影響。反過來說，做得好的深色模式能提升使用者在夜間瀏覽的體驗，增加停留時間。使用A2 Hosting這類回應速度快的主機，也能幫助確保切換過程順暢無延遲。搭配Algolia 站內搜尋時，也要記得測試搜尋結果頁面在深色模式下的顯示效果。

下一步：三個立即可做的行動

用兩行程式碼試試 Darkmode.Js。到你的測試環境（不要直接改正式站），在 footer 貼上前面介紹的程式碼，看看深色模式在你的網站上效果如何。預期結果：五分鐘內就能看到切換按鈕運作。如果還沒有測試站，可以先用000Webhost 免費虛擬主機架一個來練習。
檢查你的網站有沒有快取衝突。如果你用了快取外掛，確認 Cookie 排除設定有沒有做好。判斷標準：切換深色模式後重新整理頁面，如果還是深色就沒問題；如果閃回淺色就要調整。
評估是否值得升級到純 CSS 方案。如果你的網站流量穩定、品牌形象重要，值得花時間把 Darkmode.Js 換成 CSS 自訂屬性的方案。如果只是個人部落格或小型網站，Darkmode.Js 就夠用了。也可以參考Blogger 免費架站教學或購買網域教學來規劃整體架站方向。