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

Facebook Line Messenger Telegram

現在幾乎所有主流的 APP 和網站都已經支援 Dark Mode 深色主題。從 YouTube、Google Chrome、Facebook Messenger 到 Slack、Notion，你能想到的服務幾乎都提供了夜間模式的切換選項。這不是巧合，而是使用者體驗設計的一次重大轉變。如果你也想讓自己的網站跟上這波趨勢，那麼今天介紹的 Darkmode.Js 會是你最好的幫手。

Darkmode.Js 是一套開源的 JavaScript 函式庫，它能幫你用最少的程式碼，快速為任何網站加上深色主題的自動切換功能。不管你用的是靜態 HTML 網頁、WordPress 佈景主題，還是其他 CMS 平台，只要幾行程式碼就能搞定。接下來，我會從原理、安裝教學、進階設定到 WordPress 專用的外掛方案，完整帶你走一遍。

為什麼你的網站需要 Dark Mode 深色主題

在 2019 年，Apple 隨著 iOS 13 正式推出了系統層級的 Dark Mode 支援，Google 也在 Android 10 加入了相同的深色模式功能。從那之後，Windows 和 macOS 也陸續跟進，深色主題從「選配功能」變成了「標準配備」。當使用者的手機、電腦都已經設定為深色模式，卻打開一個刺眼的白色網頁，那種視覺上的落差其實非常不舒服。

從健康的角度來看，研究顯示長時間盯著高亮度的淺色螢幕會加速眼睛疲勞，特別是在夜間或光線不足的環境下。深色背景能有效降低螢幕發出的總光量，減少對眼睛的刺激。根據美國眼科學會的報告，長時間暴露在高亮度藍光環境下，會抑制褪黑激素的分泌，進而影響睡眠品質。如果你曾經在半夜滑手機被白底網頁閃到睜不開眼，你就懂那種感覺了。深色模式雖然不能完全消除藍光，但至少能把傷害降到一個比較能接受的程度。

對於使用 OLED 或 AMOLED 螢幕的裝置來說，Dark Mode 還有一個很實際的好處：省電。OLED 面板的每個畫素都是獨立發光的，當畫面是黑色時，畫素基本上是關閉狀態。根據 Google 自己在 Android Dev Summit 上公布的研究數據，在 OLED 螢幕上使用 Dark Mode 可以減少約 30% 到 60% 的電力消耗，具體取決於螢幕亮度和使用場景。在最高亮度下，這個差距更加明顯。這對行動裝置使用者來說是很有感的差異，畢竟誰不希望手機電池能撐久一點呢？

講白一點，現在的使用者已經「被寵壞了」。他們在各種 APP 裡享受著流暢的深色模式體驗，回頭看到你的網站還是白茫茫一片，心裡多少會覺得「這網站是不是很舊」。提供 Dark Mode 已經不只是加分項，而是基本盤了。做好網站性能優化和深色主題支援，都是提升使用者體驗的重要環節。一份針對行動裝置使用者的調查也指出，超過 80% 的受訪者表示偏好使用提供深色模式的應用程式，這個數字在夜間使用時段甚至更高。

Darkmode.Js 是什麼

Darkmode.Js 是一款輕量級的開源 JavaScript 函式庫，專門用來幫網站快速加上 Dark Mode 深色主題切換功能。它的核心理念很簡單：不需要你一行一行去改 CSS，而是透過 CSS 的 mix-blend-mode: difference 屬性，自動把整個頁面的顏色反轉成深色版本。也就是說，你不需要為深色模式準備一套全新的 CSS 樣式表，Darkmode.Js 會幫你「即時計算」出反轉後的視覺效果。

什麼是 mix-blend-mode 呢？這是 CSS 當中一個控制元素與底層內容混合方式的屬性，屬於 CSS Compositing and Blending Level 1 規範的一部分。當你把一個覆蓋在整個頁面上的圖層設定為 mix-blend-mode: difference 時，它會把底層所有顏色做反轉處理：白色變黑色、淺色變深色、深色變淺色。這就是 Darkmode.Js 能在不修改任何原始 CSS 的情況下，瞬間讓整個網頁變成深色模式的秘密。這個方法的好處是通用性極高，不管你的網站用了什麼佈景主題或框架，都能適用。當然，缺點就是反轉出來的顏色可能不是你理想中的深色色調，但對於大多數網站來說已經相當夠用了。

這個函式庫的特色包括：完全免費且開源（MIT 授權）、檔案體積非常小（壓縮後不到 5KB）、不依賴 jQuery 或任何前端框架、支援自動偵測作業系統的深色模式偏好、可以將使用者的切換偏好存入 Cookie 以便下次造訪時保持一致。對於不想大動干戈重寫 CSS 的站長來說，這是目前最省事的方案。搭配 Cloudflare CDN 來託管 Darkmode.Js 的靜態資源，也能確保全球各地的載入速度都能維持在最佳狀態。

Darkmode.Js 安裝與基本使用教學

要用 Darkmode.Js 幫你的網站加上深色主題，過程比你想像的還要簡單。最快速的方式就是透過 CDN 引入，只需要在網頁的 <body> 標籤結束前加上兩行程式碼：

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/darkmode-js.min.js"></script> <script>new Darkmode().showWidget();</script>

就這樣，存檔、重新整理頁面，你就會在網頁的右下角看到一個浮動的圓形切換按鈕。點一下，整個頁面瞬間變成深色模式。再點一下，恢復原本的淺色外觀。切換的過程還帶有一個流暢的過渡動畫，看起來相當精緻。第一次使用的時候，Darkmode.Js 會自動偵測你作業系統的深色模式設定，如果你的系統已經開啟 Dark Mode，網頁載入時就會自動套用深色主題，完全不需要使用者手動操作。這個自動偵測的功能非常貼心，讓訪客完全無感地享受到深色模式的好處。

如果你是使用模組化開發的前端工程師，也可以透過 npm 來安裝：

npm install darkmode-js

然後在你的 JavaScript 模組中用 import Darkmode from 'darkmode-js' 引入即可使用。不過對大多數網站來說，直接用 CDN 是最省事的做法，不用管建置流程和打包設定。CDN 版本會自動從最近的節點載入，對網站效能的影響微乎其微。如果你想進一步了解 CDN 對網站的效能影響，可以參考我們之前寫的 Cloudflare CDN 速度測試文章，裡面有詳細的測試數據和分析。

Darkmode.Js 進階設定與客製化選項

基本的 showWidget() 雖然方便，但 Darkmode.Js 真正強大的地方在於它豐富的客製化選項。你可以透過傳入一個 options 物件來調整切換按鈕的幾乎所有行為和視覺表現。

來看一下完整的 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();

這裡的每個參數都有它負責的功能：bottom 和 left（或 right）用來控制浮動按鈕在畫面上的位置，預設是在右下角。time 設定切換時的動畫過渡時間，預設是 0.3 秒。mixColor 是最關鍵的參數，它決定了反轉運算的基準色，預設是白色 #fff。如果你網站的底色不是純白（比如是米白色或淺灰色），就需要把這個值改成你網站實際的背景色，這樣反轉出來的深色版本才會準確。這個原理是因為 mix-blend-mode: difference 的計算方式是以指定的 mixColor 為基準去做顏色差值運算，基準色設對了，深色模式的呈現才會自然。

buttonColorDark 和 buttonColorLight 分別控制按鈕在深色模式和淺色模式下的顏色。saveInCookies 預設為 true，表示使用者的偏好會被存在 Cookie 裡，下次造訪時自動套用。autoMatchOsTheme 預設也是 true，會讓外掛在初次載入時自動偵測系統是否為深色模式。label 參數則讓你自訂按鈕上顯示的 Emoji 或文字符號。選擇配色時可以搭配 Alwane 網站色碼分析工具或 Colorion 色彩配置工具來找到適合的色系。

我在實際使用時特別喜歡把切換時間調長到 0.5 秒左右，這樣過渡動畫看起來更滑順，不會有突兀的閃爍感。按鈕位置的設定要看你網站的佈局，如果右下角已經有客服聊天元件，就把按鈕移到左下角去，避免重疊。這些細節雖然小，但對使用者體驗的影響是很大的。你也可以參考 CSS Box Shadow 範例來為按鈕加上更精緻的陰影效果。

WordPress 網站安裝 Dark Mode 的完整指南

如果你的網站是用 WordPress 架設的（台灣大多數網站都是），你有兩種方式可以幫 WordPress 網站加上 Dark Mode。一種是直接在佈景主題裡嵌入 Darkmode.Js 的程式碼，另一種是安裝 WordPress 專用的深色模式外掛。兩種方式各有優缺點，下面分別說明。如果你是剛開始接觸 WordPress 的新手，建議先看完再決定要用哪種方式，因為選錯方法的話，之後要調整會比較麻煩。

方式一：直接在佈景主題中加入 Darkmode.Js

進入 WordPress 後台，找到「外觀」→「佈景主題編輯器」，然後選擇你目前使用的佈景主題的 header.php 或 footer.php 檔案。在 </body> 標籤之前貼上前面介紹的那兩行 Darkmode.Js 程式碼，存檔即可。

這個方法的優點是完全免費、輕量、而且你有完全的控制權。缺點是如果你的佈景主題更新了，修改的內容可能會被覆蓋掉，這在自動更新的情境下特別容易發生。解決方法是使用子佈景主題（Child Theme）來放置這些自訂程式碼，這樣即使母佈景主題更新了，你的修改也不會受到影響。如果你還不清楚 WordPress.com 和 WordPress.org 的差異，建議先了解一下，因為只有使用 WordPress.org 自架站的方式才能編輯佈景主題的原始碼。你也可以使用像是「Insert Headers and Footers」這類的外掛來插入程式碼，這樣就不用直接修改佈景主題檔案了。

方式二：安裝 WordPress Dark Mode 外掛

如果你不想動到任何程式碼，可以安裝 WordPress 外掛來實現。目前在 WordPress 外掛目錄中有幾款不錯的 Dark Mode 外掛，像是「WP Dark Mode」和「Blackout: Dark Mode Widget」，這些外掛都提供了圖形化的設定介面，讓你在後台就能調整深色模式的各種參數。

安裝外掛的好處是設定方便、佈景主題更新不影響、而且通常還會提供像是「依據時間自動切換」（比如晚上六點到早上六點自動啟用深色模式）、「特定頁面停用深色模式」等進階功能。WP Dark Mode 這款外掛還支援切換動畫效果、浮動按鈕的樣式選擇、以及針對管理後台的深色模式支援，功能算是相當完整。不過要注意一件事：如果你同時使用了 WordPress 快取外掛，深色模式的 Cookie 判定可能會被快取機制干擾。解決方法是在快取外掛的設定中，將 Dark Mode 相關的 Cookie 加入排除清單，或者使用快取外掛提供的「快取版本分流」功能，讓不同偏好的使用者拿到不同的快取頁面。

選擇一個好的主機對於 WordPress 網站的 Dark Mode 功能運作也很重要。如果你的主機回應速度慢，Dark Mode 的切換動畫可能會出現延遲或閃爍，這在使用者體驗上是非常扣分的。Bluehost 主機是 WordPress 官方推薦的託管服務商，穩定性和速度都有保障，而且提供了非常友善的一鍵 WordPress 安裝功能，就算你是第一次架站也能輕鬆上手。如果你的網站流量較大，或者你經營的是電商、會員制等對效能要求較高的網站，也可以考慮 Kinsta 這類高效能的託管方案，他們使用 Google Cloud Platform 作為底層架構，在全球都有節點，能確保各地訪客都能快速載入你的網站。更多主機選擇可以參考我們的 WordPress 主機推薦懶人包，裡面有 17 款主機的詳細比較和費用分析，讓你找到最適合自己的方案。

不用外掛也能做！純 CSS 實作 Dark Mode 的方法

雖然 Darkmode.Js 很方便，但有些開發者可能希望用更「原生」的方式來實作 Dark Mode。好消息是，現代瀏覽器已經原生支援深色模式的偵測了，透過 CSS 的 @media (prefers-color-scheme: dark) 媒體查詢，你可以針對使用者的系統偏好自動切換樣式。這個媒體查詢在 Chrome 76、Firefox 67、Safari 12.1 和 Edge 79 之後的版本都有支援，覆蓋率已經超過 95% 的全球瀏覽器使用份額，基本上不需要擔心相容性問題。

搭配 CSS 自訂屬性（Custom Properties），這套方案其實非常優雅。先在 :root 定義一組淺色主題的變數，然後在媒體查詢中覆蓋為深色版本的值。這樣做的好處是，你只需要在一個地方管理所有的色彩變數，不需要在每個元件裡分別設定深色模式的樣式。整個色彩系統的維護成本會大幅降低，特別適合中大型網站使用：

: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 載入和執行。如果你想加上手動切換的功能，只需要一小段 JavaScript 來在 <html> 或 <body> 上切換一個 class name（比如 dark-mode），然後在 CSS 中加入對應的樣式規則即可。這段 JavaScript 的核心邏輯大概只需要十行左右的程式碼：監聽按鈕的點擊事件、切換 class、把偏好存進 localStorage，就這麼簡單。比起 Darkmode.Js 的全自動反轉，這種做法雖然初始設定比較花時間，但長期來看更好維護，也更符合現代前端開發的最佳實踐。

純 CSS 方案的優點是效能更好（不需要載入額外的 JavaScript）、相容性更可控、而且可以針對每個元素做精確的樣式調整。你的深色模式可以是精心設計過的色彩系統，而不是簡單的顏色反轉。缺點是你需要自己一個一個元素去設定深色版本的樣式，工作量會比使用 Darkmode.Js 大很多，特別是如果你的網站已經有很多頁面和元件的話。但這個投入是值得的，因為你能完全掌控每一個視覺細節，確保深色模式下的使用者體驗達到最佳狀態。如果你對 CSS 很熟，可以搭配 CSS 背景圖案產生器或 3D CSS 效果產生器這類工具，讓深色模式的設計更有質感和層次感。

對於想要同時做好 SEO 的站長來說，不管你選擇哪種 Dark Mode 方案，建議搭配 Detailed SEO Extension 來檢查深色模式下的頁面 SEO 狀態，確保搜尋引擎爬蟲能正確解析你的網頁內容。也可以用結構化資料測試工具確認深色模式的實作不會影響結構化資料的呈現。

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

很多人以為 Dark Mode 就是把背景變黑、文字變白這麼簡單，但其實裡面的學問比你想像的多。設計不當的深色模式反而會讓閱讀體驗更差，甚至可能讓某些使用者感到頭暈或不適。以下是一些我整理的實用建議，都是從實際專案經驗中累積出來的心得。

對比度很重要，但不是越高越好。根據 WCAG 2.1 的無障礙標準，正文文字與背景的對比度至少要達到 4.5:1。但這不代表你應該用純黑背景 #000000 搭配純白文字 #FFFFFF。過高的對比度（21:1）反而會讓文字看起來像是在「發光」，長時間閱讀會造成眼睛不適。Google 的 Material Design 團隊建議使用 #121212 作為深色背景色，這個顏色足以提供深色的視覺感受，同時不會過於極端。

注意圖片和多媒體的處理。在深色模式下，原本設計給淺色背景的圖片可能會顯得太亮或太突兀，破壞整體的視覺協調性。一張在白色背景上看起來很舒服的圖片，放在深色背景上可能就顯得格格不入。建議的做法是適度降低圖片的亮度或加上一層半透明的深色遮罩，讓圖片與深色背景更協調。在 CSS 中，你可以用 filter: brightness(0.8) 或 opacity: 0.9 來達成這個效果。需要處理圖片的話，可以善用免費圖片去背工具和 AI 圖片增強工具來優化深色模式下的圖片呈現效果，確保所有視覺元素在不同模式下都能保持一致的品質水準。

不要忽略表單和互動元素。深色模式下，輸入框、按鈕、下拉選單這些互動元件也需要對應的深色樣式。如果表單元素還是白底黑字，整個頁面就會看起來很不協調，使用者可能會覺得網站「做一半」。Focus 狀態（使用者用 Tab 鍵切換時的高亮效果）在深色背景上也需要調整顏色，確保鍵盤操作的使用者能清楚看到焦點位置。這點對於網站的無障礙性來說尤其重要，很多開發者在實作 Dark Mode 時都會忽略這個細節。

如果你正在尋找深色模式下適合使用的圖片素材，免費圖庫資源懶人包裡有大量可商用的圖片，涵蓋了各種主題和風格，很多都特別適合用在深色背景的設計當中。而 Adobe Creative Cloud Express 這類設計工具也能幫你快速調整圖片的色調和亮度，讓素材在深色背景下更好看。它提供了大量的範本和一鍵濾鏡功能，就算你不是專業設計師也能做出很有質感的深色模式素材。

Dark Mode 常見問題與疑難排解

在實際使用 Darkmode.Js 或任何 Dark Mode 解決方案時，你可能會遇到一些問題。這裡整理了最常見的幾個狀況和解決方法。

有些網頁元素沒有變暗

因為 Darkmode.Js 使用的是 mix-blend-mode: difference 技術，某些元素可能不會被正確反轉。最常見的是 <iframe> 內嵌內容（像是 YouTube 影片、Google Maps）、SVG 圖形、以及設定了 isolation: isolate 或 position: fixed 的容器。這是因為 mix-blend-mode 的作用範圍會受到 CSS 堆疊上下文（Stacking Context）的影響，被隔離的上下文中的元素就不會受到反轉效果的影響。對於 iframe，你可以在 Darkmode.Js 的設定中加入 ignoreTag: ['iframe'] 來排除這些元素，或者手動為它們加上深色樣式。如果是 SVG 圖示，建議改用 CSS fill 屬性來控制顏色，而不是依賴 Darkmode.Js 的自動反轉。

快取外掛導致 Dark Mode 狀態丟失

這是 WordPress 使用者最常遇到的問題。頁面快取會把 HTML 內容存起來，導致 Dark Mode 的 Cookie 判定失效，結果就是使用者明明設定了深色模式，頁面卻還是顯示淺色版本，要過幾秒才切換過去。這種閃爍現象（稱為 FOUC，Flash of Unstyled Content）對使用者體驗的傷害很大。解決方法是在快取外掛中排除 Dark Mode 相關的 Cookie，或使用支援「依 Cookie 分流快取」的外掛功能。如果你的網站使用 WordPress SEO 外掛，也要確認深色模式的實作不會影響到結構化資料和 meta 標籤的輸出，畢竟 SEO 設定一旦亂掉，要恢復排名可不是一天兩天的事。

瀏覽器擴充功能衝突

很多使用者會安裝 Dark Reader 這類瀏覽器擴充功能來強制所有網站使用深色模式。如果你的網站已經用 Darkmode.Js 實作了 Dark Mode，加上使用者的瀏覽器擴充功能，可能會產生「雙重反轉」的效果，反而變成淺色。雖然這不是你能完全控制的問題，但可以在程式碼中偵測是否有其他 Dark Mode 工具正在運作，避免重複套用。搭配 Cloudflare Turnstile 來加強網站安全性時，也要注意驗證元件在深色模式下的顯示是否正常。

行動裝置上的觸控問題

在手機上，浮動的切換按鈕有可能會被手機的虛擬按鍵或瀏覽器的工具列遮住，特別是 iPhone 的 Safe Area 和 Android 的導航列都可能佔據螢幕底部的空間。建議把按鈕的位置設得稍微高一點（bottom: '80px' 或更多），確保在各種行動裝置上都能被清楚看到和點擊。同時也要測試一下按鈕在各種螢幕尺寸上的表現，包括摺疊手機和平板電腦這類非傳統比例的裝置。確保深色模式的 JavaScript 和 CSS 資源能快速載入也很重要，特別是在行動網路環境下，這時候快速的 DNS 服務就能派上用場。

Dark Mode 相關工具與設計資源總整理

除了 Darkmode.Js 之外，市面上還有不少跟深色模式設計相關的好用工具和資源。以下整理了我自己常用的幾個，供你參考。不管你是要找靈感、選配色、還是處理圖片素材，這些工具都能幫上忙。

工具名稱	類型	用途
Darkmode.Js	JavaScript 函式庫	一鍵加入網站深色模式切換
WP Dark Mode	WordPress 外掛	WordPress 後台設定的深色模式外掛
Dark Reader	瀏覽器擴充功能	強制任何網站啟用深色模式
Material Theme Editor	設計工具	Google 官方的深色主題配色工具
Realtime Colors	線上工具	即時預覽配色方案在深色模式下的效果

如果你正在為深色模式尋找適合的圖示素材，Icons8 動畫圖示庫提供了 900 多個免費的動畫圖標，而且都有深色版本可以選擇。CleanPNG 則是尋找透明背景 PNG 圖片的好地方，這些素材在深色背景下特別好用。想要製作精美的 Mockup 展示深色模式的效果，可以試試 Clay Mockups 這類線上模型工具。圖示設計部分，EmblemIcons 提供了大量免費的 SVG 圖示下載。

想進一步了解 Darkmode.Js 的開發者，可以前往 Darkmode.Js 官方網站查看完整的文件和範例。設計配色時，DesignCap 線上設計工具能幫你快速產出深色風格的視覺素材，而 DesignEvo 則適合用來製作在深色和淺色背景下都好看的 Logo。

講了這麼多：為你的網站選擇最適合的 Dark Mode 方案

回顧一下這篇文章的重點。如果你要的是最快速、零設定的解決方案，Darkmode.Js 絕對是首選，兩行程式碼就能搞定一切，適合不想花太多時間在樣式調整上的站長。如果你是前端開發者，想要對深色模式有更精確的掌控，那純 CSS 的 prefers-color-scheme 方案會更適合你，雖然工時比較長，但成果會更貼近你的設計理念。WordPress 使用者則可以選擇直接嵌入程式碼或安裝外掛，看你的技術能力和客製化需求來決定。不管選哪條路，重要的是要「動手做」。

不管你選擇哪種方式，為網站加上 Dark Mode 已經不是「要不要做」的問題，而是「什麼時候要做」的問題。當你的競爭對手都已經提供了流暢的深色模式體驗，你還在猶豫的話，使用者的耐心是有限的。現在就動手試試看吧，有遇到問題或做出漂亮的成果，都歡迎在下方留言分享。

如果你正在規劃建立一個新網站，別忘了搭配好的網域和主機。購買網域的完整教學可以幫你找到最便宜的網址，從申請、設定到管理一次搞懂。而 000Webhost 免費虛擬主機則適合用來練習架站和測試 Dark Mode 功能，不花一毛錢就能把整個流程跑一遍。想用最簡單的方式建立網站，也可以參考 Blogger 免費架站教學，三分鐘就能擁有一個自己的部落格。等你對網站架設有概念了，再升級到正式的 WordPress 自架站方案也不遲。

Dark Mode 深色主題常見問題 FAQ

Darkmode.Js 是否完全免費？

Dark Mode 切換功能會影響網站載入速度嗎？

影響非常小。Darkmode.Js 壓縮後不到 5KB，對於一個動辄數百 KB 的現代網頁來說，這個體積幾乎可以忽略不計。切換動作是透過 CSS 屬性變更來實現的，不涉及 DOM 的大規模重繪或重新計算版面配置。根據實際測試，加入 Darkmode.Js 對頁面的 First Contentful Paint 和 Largest Contentful Paint 幾乎沒有影響。你可以用 Chrome DevTools 的 Lighthouse 功能自行測試，加入前後的分數差異通常在 1-2 分以內。更多網站速度相關的優化技巧，可以參考我們的 WordPress 速度優化教學。

如何讓 Dark Mode 自動跟隨作業系統的深色模式設定？

Darkmode.Js 的 autoMatchOsTheme 選項預設就是開啟的（true）。只要你沒有把它設為 false，外掛就會在頁面載入時自動偵測使用者的作業系統是否啟用了深色模式，如果有的話就自動套用。這個偵測是透過 window.matchMedia('(prefers-color-scheme: dark)') 這個瀏覽器 API 來實現的，所以準確率非常高，幾乎不會有誤判的情況。使用者也可以隨時透過按鈕手動切換，切換後的偏好會被存入 Cookie（如果 saveInCookies 為 true 的話），下次造訪時就會以使用者的手動選擇為優先，而不是系統設定。這個功能在 macOS 的「深色外觀」、Windows 的「深色模式」和 Android、iOS 的系統深色主題設定下都能正常運作，可以說是跨平台通用。

WordPress 有哪些推薦的 Dark Mode 外掛？

目前比較推薦的 WordPress Dark Mode 外掛有幾款：「WP Dark Mode」是最受歡迎的選擇，活躍安裝數超過十萬，提供了完整的圖形化設定介面，支援時間排程和特定頁面停用，還有付費版可以解鎖更多進階功能；「Blackout: Dark Mode Widget」則是基於 Darkmode.Js 開發的外掛，安裝後幾乎不需要額外設定就能使用，非常適合想要快速上手的站長。選擇哪個外掛取決於你的客製化需求，如果只是要基本功能，Blackout 就夠了；如果需要更多進階設定和更精細的控制，WP Dark Mode 會更適合。安裝方式就跟其他 WordPress 外掛一樣，在後台的「外掛」→「安裝外掛」頁面搜尋名稱，點一下安裝再啟用就行了。

Dark Mode 對 SEO 排名有什麼影響？

Google 在 2023 年已經表示，網站是否提供 Dark Mode 功能並不是直接的排名因素。但是，間接的影響是存在的，而且可能比你想像的更大。良好的 Dark Mode 實作可以提升使用者體驗，進而增加使用者在網站上的停留時間、降低跳出率，這些都是 Google 在排名演算法中考量的行為指標。而且，如果 Dark Mode 的實作影響了 Core Web Vitals 分數（例如切換時造成大量的版面位移 CLS），那確實可能對排名產生負面影響。反過來說，如果你的 Dark Mode 做得好，使用者在夜間瀏覽時的體驗更舒適，停留時間自然會增加。使用 A2 Hosting 這類提供快速伺服器回應時間的主機，也能幫助確保 Dark Mode 的切換過程順暢無延遲。

為什麼 Dark Mode 在某些瀏覽器上沒有效果？

Darkmode.Js 使用的 mix-blend-mode CSS 屬性在所有現代瀏覽器（Chrome、Firefox、Safari、Edge）中都有良好的支援，但在一些較舊的瀏覽器版本（例如 IE11 或早期版本的 Edge）中不支援。如果你需要支援舊版瀏覽器，可以加入瀏覽器偵測邏輯，在不支援的環境中隱藏切換按鈕，避免出現殘破的顯示效果。你也可以使用 @supports (mix-blend-mode: difference) 這個 CSS 特性查詢來做條件式載入。如果你使用的是 DreamHost 或其他提供伺服器端快取的主機，也要確認快取設定不會影響 Dark Mode 的動態切換。搭配站內搜尋工具如 Algolia 使用時，搜尋結果頁面也需要測試深色模式的顯示效果，確保搜尋框和結果列表在深色背景下都清晰可讀。