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

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

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

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

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

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

或者只

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

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

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

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

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

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

 filter: invert(88%);

也就是這樣的：

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

---

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

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

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

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

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

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

---

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