在 Discord 上套用 Windows 11 的透明效果(Vencord)

完工效果

這邊使用了第三方佈景主題 Translucence + Vencord + Mica For Everyone 才有這樣的效果。

需求

  • 需要預先安裝 Vencord 官方提供的 Vesktop,只給官方 Discord 客戶端打上 Vencord 的 Patch 的話,最重要的透明效果將不會運作。使用第三方 Discord 客戶端須自負相關風險。本文提到的 Vesktop 版本為 1.5.1。
  • 需要安裝 Mica For Everyone,此軟體需要先安裝 .NET Core 3.1 Runtime 才可以運作。本文提到的 Mica For Everyone 版本為 1.3.1.2。
  • Translucence 佈景主題 + 一點修改,相關修改後面會教你。

啟動 Vesktop 的透明效果

點開 _Discord 設定 -> Vencord_,將 Enable Custom CSS 選項啟用。

之後點開底下的 Vesktop Settings 選項,將畫面定位到 Transparency Options 選項,選擇 Acrylic 或 Mica 其中一個選項(這邊我選 Acrylic 選項)。

然後到 T_hemes -> Online Themes_ 頁面,將 Translucence 佈景主題的 CSS 地址貼上(在上面的連結裡面有最新 CSS 地址),此時佈景主題應該會自動套用。

之後點選 _Local Themes -> Edit QuickCSS_,將以下內容貼入視窗內,此步驟是為了要把背景圖片去掉,才可以顯示視窗本身的透明效果:

1
2
3
:root {
--app-bg: rgba(0,0,0,0);
}

最後輸入快捷鍵 Ctrl + Shift + I 開啟 DevTools,點選 Console 標籤按鈕然後複製貼上以下內容:

1
Vencord.Settings.transparentUNSAFE_USE_AT_OWN_RISK = true

(如果 Console 不允許你複製貼上,請在底下的輸入框輸入 allow pasting

這樣 Vesktop 的部分就設定好了,請點選工作列狀態區的 Vesktop Icon 右鍵 -> Relaunch 完整重啟 Vesktop,以便啟用相關設定。

設定 Mica For Everyone

設定 Mica For Everyone 就沒那麼多步驟了,步驟如下:

  1. 開啟 Mica For Everyone,點選_左下角加號符號 -> 處理程序規則_,輸入 Vesktop 後按下建立
  2. _模糊類型_選擇壓克力,其他都不要動

以下是設定參考視窗:

當 Mica For Everyone 設定好之後,你會馬上看到透明特效在 Vesktop 程式內展現。

佈景主題修改

你可以到 BetterDiscord 的 Theme Editor 進行修改,記得 Background Image 選擇 Transparent Background 就好,不然背景圖片會蓋掉視窗透明效果,其他任你改。

改完之後按下 Download 會有輸入佈景主題名稱的輸入框,這邊建議選擇 Copy CSS 然後把內容丟到 Discord 設定 -> Themes -> Edit QuickCSS 裡面,可以少下載一次檔案。

參考資料

銘謝

感謝 Eric (@e0pwr) 和 Ayazo (@ayazo) 在相關討論上提供更多設定建議和資源。

感謝卡蘇拉 (@kazura._.) 協助 CSS 相關設定的測試。