Darkmode.js 為網站加入深色模式，只要一段程式碼就能實現

macOS 10.14 Mojave 加入全新「深色模式」功能，iOS 13 預告也會加入此模式，如果你曾經將電腦切換為深色，應該會發現有些應用程式可完美支援，也會一併轉為暗色介面，但在不支援深色模式的應用程式表現出來的顏色會更刺眼，嚴重影響到使用體驗。如果你是應用程式開發者，可能後續都得再加上對於深色模式的支援，讓顏色更接近暗色，亦可在使用者選擇不同模式時自動調整為最合適的配色效果。

其實網站也可以加入深色模式，必須有一些程式基礎才行，雖然我沒研究過如何實作，但已經有開發者想出更簡單的方法，本文要介紹的「Darkmode.js」是一支開放原始碼 JavaScript 程式，只要將程式碼加入網站就能快速在任何網站加入深色模式，非常強大！

Darkmode.js 使用 CSS mix-blend-mode 將深色模式帶入任何網站（根據開發者表示他是受到這篇文章啟發，如果想知道它使用的原理可以參考原文），只需要將程式加入網站，會出現一個可切換淺色或深色模式按鈕（於網站右下角），Darkmode.js 非常輕量，程式本身使用 jsDelivr CDN 讓載入速度更快，如果你不想要顯示深色切換功能亦可隱藏。

網站名稱：Darkmode.js
網站鏈結：https://darkmodejs.learn.uno/ （GitHub）

使用教學

STEP 1

開啟 Darkmode.js 網站，可以直接從右上角測試深色模式切換功能，網站也提供一些使用這個程式的範例網站，從 Demo 能找到其他網站進行測試，看看深色模式顯示的效果是否有符合你的想法。

STEP 2

為你的網站加入 Darkmode.js 最簡單、快速的方法就是直接取用一段 JavaScript 程式碼，放入網站應該就會看到效果，這支程式已經放在 jsDelivr CDN，速度方面很不錯，而且不會佔用你的流量或拖慢網頁載入速度。

預設情況下 Darkmode.js 會在網站右下角顯示切換深色模式按鈕，如果不喜歡也可以把它隱藏起來，只有在使用深色模式的使用者進入網站時才會切換，請參考網站提供的程式碼。

如果想調整切換按鈕的位置、顏色和圖示，可在 Options 找到相關程式碼進行微調。

STEP 3

在 Darkmode.js 網站右下角就會看到深色模式的切換功能，點選會有動態效果將網頁翻頁成深色，再按一次會變回淺色，我沒有實際運用到免費資源網路社群網站裡，如果有興趣的話不妨自行測試一下。