程式碼高𠅙

2018/08/07

Firefox 網頁黑化擴充套件

黑色主題 (或稱夜間模式、深色模式、暗黑模式等) 的網站不但可降低視覺壓力,減少裝置耗電,更能營造一股駭客風格,是近來使用介面設計的流行趨勢。較具代表性的,像是 Youtube 及 Twitter 就各自為自己的網站加入深色模式及夜間模式。

而對於那些沒有支援黑色主題的網站,則可使用本文介紹的瀏覽器擴充套件來達到網頁黑化效果。以下介紹一些筆者曾經使用或試用過的 Firefox 網頁黑化擴充套件。

Dark Reader






在 Windows 底下配色切換效果良好,幾乎大部分的網站不太需要調整就能正常顯示。

但在 Android 底下不知為何無法正常套用--Ok! 後來查出原因是因為筆者在 Android Firefox 中使用了 User Agent Switcher 套件,更改了瀏覽器的 user agent 字串,而與 Dark Reader 相沖突。不過其實好奇的是背景反黑為何要偵測 user agent 字串啊!

可以針對每個網站設定套用深色配色、淺色配色,或是不配色。

配色的演算法內建有三種,還有一種讓您可以對每個網站套用自己的 style,這個功能可用來取代 stylish/stylus 等自訂網頁樣式元件。

不過可惜的是它的網站客製化 style 只能套用到 domain 層級,似乎是沒法對每個網站的子目錄撰寫自訂樣式。

Dark Background and Light Text





在更換為 Dark Reader 之前,原本是用這個套件,配色切換的效果也是很好,甚至可能是同類套件中最好的。

它也能對每個網站選用以下方式客製化:

  • Disabled - 不使用
  • Stylesheet processor
  • Simple CSS
  • Invert
  • Default


因 Dark Reader 在 Android Firefox 上無法正常執行,目前 Android Firefox 上仍是使用這個外掛。

要論這個套件有什麼缺點 ,其一是在 Chrome 上沒有相對的元件。

而其二… 應該是這個元件的 UI 做的比較醜一些,這是比較可惜的地方。


Midnight Lizard – Add-ons for Android





這曾經是我的最愛。設定畫面漂亮,客製化功能最強的網站樣式修改元件。

可惜網頁載入速度慢,CPU loading 高,且程式碼 syntax 語法未正常高亮,google calendar 未正常顯示,所以還是捨棄!

Dark Mode (WebExtension)




這個套件提供很多配色方案讓人選擇,經測試,不同的方案只是呈現的字型或背景色調略有不同,轉換異常的地方,套用不同的配色方案後經常還是異常。

而且配色方案並不能針對各別網站進行配置,而是所有網站共用同一種。所以假定 A 網站適合用甲方案呈現,而 B 網站適合乙方案呈現,那當由 A 網站切換到 B 網站瀏覽時,還得自行切換相對應的樣式,使用相當不便。

這個套件提供白名單的機制,讓無法正常套用配色的網站避免反黑,針對個別網站的客製化能力,也僅止於此了!

結論

目前筆者在桌機上,是使用 Dark Reader,因其 UI 較美觀,轉換效果不錯。但網路上有用戶反應 Dark Reader 會影響網頁載入效能,筆者在使用時,偶爾的確也會遇到瀏覽器提示 Dark Reader 的 Javascript 影響網頁載入速度。但因尚可忍受,也就繼續使用了。Dark Reader 另有 Chrome 版本,是個跨瀏覽器的套件。

Android Firefox 可使用擴充套件,所以還是可以透過擴充套件使網頁黑化,這是 Chrome Android 版所沒有的功能。在 Android 上筆者是採用 Dark Background and Light Text 這個套件。相較 Dark Reader,它在 Android 中執行效能較高,黑化的效果與 Dark Reader 難分軒輊!

如果網友想在 Android Firefox 中想使用 Dark Reader 套件,那記得避免使用 User Agent Switch 相關套件,並將 Dark Reader 的預設主題生成模式改成 "過濾+",如此才能使 Dark Reader 正常運作,並得到較佳效能。