
現今有很多網站會加入「深色模式」或「深色主題」功能,利用按鈕方式讓使用者自由切換不同的配色,有時候在亮度不夠時選擇深色模式確實可以更護眼(至少在瀏覽時不會覺得螢幕很亮),也有網站或是應用程式會依照時間自動調整佈景主題,無論如何,如果你也有以 WordPress 架設的網站、部落格,透過現有的外掛程式即可為網站快速導入深色模式選項,為訪客提供更好的閱讀體驗。
本文要介紹「Droit Dark Mode」是免費 WordPress 外掛程式,主要功能是在網站前台、控制台加入令人驚豔的深色模式功能,透過加入切換按鈕,使用者可自行調整要以原有的淺色佈景或是深色模式瀏覽網頁,而且整個過程非常簡單,完全不需要編輯任何程式碼,支援市面上看到的所有佈景主題,本身也提供多種獨家深色佈景。
Droit Dark Mode 在免費版本下提供兩種不同的淺色、深色模式切換按鈕,使用者可自行選擇讓按鈕顯示於網頁特定位置(或是浮動顯示),免費版本收錄的預設功能就可以初步完成為網站加入深色模式的需求,如果需要更多功能和自訂選項,也可考慮付費升級 Pro 方案。
Droit Dark Mode – WordPress plugin
https://wordpress.org/plugins/droit-dark-mode/
使用教學
STEP 1
首先,從 WordPress 控制台找到「安裝外掛」功能,在右上角搜尋欄位輸入「droit dark mode」會找到對應的外掛程式,開發者為 DroitThemes,目前有超過五千次的安裝數。

將 Droit Dark Mode 外掛下載、安裝到網站後啟用,左側選單會多一個設定功能。

STEP 2
Droit Dark Mode 設定選項很多,包括一般設定、顯示設定、進階設定、預設顏色、深色圖片和時間,最簡單的方法就是將「Front-End Options」第一個「啟用前台深色模式」選項打開就會看到效果。

STEP 3
在「Display Settings」中會有不同的切換按鈕樣式,不過免費版只有兩種可以選擇,選好後在下方的顯示位置選擇切換按鈕要顯示在網頁的那個部分,其他標示 Pro 的選項需要付費升級才能用。

在「Preset Color」提供兩種預設的深色配色可以選擇,其他顏色一樣需要付費升級才能使用。

STEP 4
除了在網站前台開啟深色模式的選項,如果需要也能將深色模式設定為預設狀態,或在控制台啟用深色功能。

STEP 5
在完成 Droit Dark Mode 外掛程式設定後,在網站前台就會看到切換淺色、深色模式的按鈕。

點選後就能切換為深色模式,再次點選就能切換回原本的佈景主題。

值得一試的三個理由:
- 深色模式可以在亮度不足的環境中提供更舒適的閱讀體驗,減少眼睛疲勞
- Droit Dark Mode 外掛程式讓使用者可以自由切換深色模式和原有的淺色佈景主題
- 透過外掛程式在 WordPress 網站上添加深色模式,不需要編輯任何程式碼