一行程式碼,讓 VS Code 內建 PDF 閱讀器變成深色模式

讓幻想飛發表於2022-04-10

許多人會用 VSCode 寫 LaTeX,等等,都會用到 PDF 預覽。VSCode 中的 PDF 預覽,包括 LaTeX WorkShop 等內建的預覽,都是基於 pdf.js 的。這裡預覽背景都是白色,然後在深色的 VSCode 中非常扎眼,白天還好,晚上過大的對比度搞得眼疼。

就算用上 Sumatra PDF 的自定義背景,也得忍受一個大白邊:

一行程式碼,讓 VS Code 內建 PDF 閱讀器變成深色模式

其實,只要利用非常簡單的 CSS 和 JS ,就可以做到反色。

一個廣為流傳的程式碼,稍作修改後,如下:

javascript:void(document.documentElement.style.filter='invert(89%)')

或者只

document.documentElement.style.filter='invert(89%)'

道理很簡單,就是設反色濾鏡,後面的 89% 是反色的程度(將完全反色和沒有反色按比例疊加)。

先在 Edge 中試試,按 F12 開啟控制檯,輸入上面的程式碼:

一行程式碼,讓 VS Code 內建 PDF 閱讀器變成深色模式

雖然還是有點醜,但是也能用了!回到 VSCode 試試。這是 LaTeX WorkShop 自帶的預覽功能。不過這次要先選中 PDF ,然後再進入控制檯來反色,不然整個 VSCode 顏色就會翻個個。效果也可以:

一行程式碼,讓 VS Code 內建 PDF 閱讀器變成深色模式

不過這個方法不能一勞永逸。讀下程式碼,這個是在整個 PDF 上加一個反色濾鏡,應該是從 CSS 設定的。

於是找到 LaTeX Workshop 擴充套件的安裝位置,找到一個叫做 viewer.css 的樣式表,Windows在 %userprofile%\.vscode\extensions\james-yu.latex-workshop-8.24.1\viewer\viewer.css (注意改版本號),然後找到 #viewerContainer 項,加上這一行程式碼:

 filter: invert(88%);

也就是這樣的:

一行程式碼,讓 VS Code 內建 PDF 閱讀器變成深色模式

這樣就能每次都用深色模式開啟了。

如果你喜歡用 One Dark 主題,可以將濾鏡改為:

  filter: invert(85%)  sepia(70%)  hue-rotate(180deg);

這樣也能得到一體化的預覽效果:

一行程式碼,讓 VS Code 內建 PDF 閱讀器變成深色模式

類似的方式,可以在 Zotero 等支援 JS 的軟體上用。不過全都會反色。這是 Zotero 在 invert(95%) contrast(75%) brightness(70%) 下的效果,壓了一下對比度:

一行程式碼,讓 VS Code 內建 PDF 閱讀器變成深色模式

不過圖片等也都會反色,因此對純黑白的pdf更加友好。

這種方法簡單粗暴,在支援 css/js 的地方都可以用。沒有其他外掛時,可以使用這種方式可以簡單(粗暴)地進入深色模式,並不侷限於 PDF 的預覽。


原文連結:https://www.cnblogs.com/yf-zhao/p/16127156.html ,轉載請註明出處!

相關文章