在 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 相關設定的測試。