feat: implement transparency for Windows (#46)

src/main/ipc.ts

@@ -7,6 +7,7 @@
 import { app, dialog, ipcMain, session, shell } from "electron";
 import { existsSync, readFileSync, watch } from "fs";
 import { open, readFile } from "fs/promises";
+import { release } from "os";
 import { join } from "path";
 import { debounce } from "shared/utils/debounce";
 
@@ -41,6 +42,10 @@ ipcMain.on(IpcEvents.GET_VERSION, e => {
     e.returnValue = app.getVersion();
 });
 
+ipcMain.on(IpcEvents.SUPPORTS_WINDOWS_TRANSPARENCY, e => {
+    e.returnValue = process.platform === "win32" && Number(release().split(".").pop()) >= 22621;
+});
+
 ipcMain.on(IpcEvents.AUTOSTART_ENABLED, e => {
     e.returnValue = autoStart.isEnabled();
 });

src/main/mainWindow.ts

@@ -262,6 +262,15 @@ function createMainWindow() {
         },
         icon: ICON_PATH,
         frame: VencordSettings.store.frameless !== true,
+        ...(Settings.store.transparencyOption !== "none"
+            ? {
+                  backgroundColor: "#00000000",
+                  backgroundMaterial: Settings.store.transparencyOption,
+                  transparent: true
+              }
+            : {
+                  transparent: false
+              }),
         ...(Settings.store.staticTitle ? { title: "Vencord" } : {}),
         ...(VencordSettings.store.macosTranslucency
             ? {

src/preload/VencordDesktopNative.ts

@@ -23,7 +23,8 @@ export const VencordDesktopNative = {
     app: {
         relaunch: () => invoke<void>(IpcEvents.RELAUNCH),
         getVersion: () => sendSync<void>(IpcEvents.GET_VERSION),
-        setBadgeCount: (count: number) => invoke<void>(IpcEvents.SET_BADGE_COUNT, count)
+        setBadgeCount: (count: number) => invoke<void>(IpcEvents.SET_BADGE_COUNT, count),
+        supportsWindowsTransparency: () => sendSync<boolean>(IpcEvents.SUPPORTS_WINDOWS_TRANSPARENCY)
     },
     autostart: {
         isEnabled: () => sendSync<boolean>(IpcEvents.AUTOSTART_ENABLED),

src/renderer/components/Settings.tsx

@@ -13,6 +13,7 @@ import { useSettings } from "renderer/settings";
 
 export default function SettingsUi() {
     const Settings = useSettings();
+    const supportsWindowsTransparency = VencordDesktopNative.app.supportsWindowsTransparency();
 
     const { autostart } = VencordDesktopNative;
     const [autoStartEnabled, setAutoStartEnabled] = useState(autostart.isEnabled());
@@ -46,7 +47,7 @@ export default function SettingsUi() {
                 Vencord Desktop Settings
             </Text>
 
-            <Forms.FormTitle className={Margins.top16}>Discord Branch</Forms.FormTitle>
+            <Forms.FormTitle className={Margins.top16 + " " + Margins.bottom8}>Discord Branch</Forms.FormTitle>
             <Select
                 placeholder="Stable"
                 options={[
@@ -97,6 +98,43 @@ export default function SettingsUi() {
                 </Switch>
             ))}
 
+            {supportsWindowsTransparency && (
+                <>
+                    <Forms.FormTitle className={Margins.top16 + " " + Margins.bottom8}>
+                        Transparency Options
+                    </Forms.FormTitle>
+                    <Forms.FormText className={Margins.bottom8}>
+                        Requires a full restart. You will need a theme that supports transparency for this to work.
+                    </Forms.FormText>
+
+                    <Select
+                        placeholder="None"
+                        options={[
+                            {
+                                label: "None",
+                                value: "none",
+                                default: true
+                            },
+                            {
+                                label: "Mica (incorporates system theme + desktop wallpaper to paint the background)",
+                                value: "mica"
+                            },
+                            { label: "Tabbed (variant of Mica with stronger background tinting)", value: "tabbed" },
+                            {
+                                label: "Acrylic (blurs the window behind Vencord Desktop for a translucent background)",
+                                value: "acrylic"
+                            }
+                        ]}
+                        closeOnSelect={true}
+                        select={v => (Settings.transparencyOption = v)}
+                        isSelected={v => v === Settings.transparencyOption}
+                        serialize={s => s}
+                    />
+
+                    <Forms.FormDivider className={Margins.top16 + " " + Margins.bottom16} />
+                </>
+            )}
+
             <Forms.FormTitle>Vencord Location</Forms.FormTitle>
             <Forms.FormText>
                 Vencord files are loaded from{" "}

src/shared/IpcEvents.ts

@@ -11,6 +11,7 @@ export const enum IpcEvents {
     GET_RENDERER_CSS_FILE = "VCD_GET_RENDERER_CSS_FILE",
 
     GET_VERSION = "VCD_GET_VERSION",
+    SUPPORTS_WINDOWS_TRANSPARENCY = "VCD_SUPPORTS_WINDOWS_TRANSPARENCY",
 
     RELAUNCH = "VCD_RELAUNCH",
     CLOSE = "VCD_CLOSE",

src/shared/settings.d.ts

@@ -7,6 +7,7 @@
 import type { Rectangle } from "electron";
 
 export interface Settings {
+    transparencyOption?: "none" | "mica" | "tabbed" | "acrylic";
     maximized?: boolean;
     minimized?: boolean;
     windowBounds?: Rectangle;