feat: implement transparency for Windows

src/main/mainWindow.ts

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

src/renderer/components/Settings.tsx

@@ -10,6 +10,7 @@ import { Margins } from "@vencord/types/utils";
 import { Button, Forms, Select, Switch, Text, useState } from "@vencord/types/webpack/common";
 import { setBadge } from "renderer/appBadge";
 import { useSettings } from "renderer/settings";
+import { isWindows } from "renderer/utils";
 
 export default function SettingsUi() {
     const Settings = useSettings();
@@ -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,36 @@ export default function SettingsUi() {
                 </Switch>
             ))}
 
+            {isWindows &&
+                <>
+                    <Switch
+                        value={Settings.transparent ?? false}
+                        onChange={v => (Settings.transparent = v)}
+                        note="Requires a full restart"
+                    >
+                        Enable window transparency
+                    </Switch>
+
+                    <Forms.FormTitle className={Margins.top16 + " " + Margins.bottom8}>Transparency Options</Forms.FormTitle>
+
+                    <Select
+                        placeholder="Mica"
+                        options={[
+                            { label: "Mica (incorporates system theme + desktop wallpaper to \"paint\" the background)", value: "mica", default: true },
+                            { 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}
+                        isDisabled={!Settings.transparent} 
+                    />
+
+                    <Forms.FormDivider className={Margins.top16 + " " + Margins.bottom16} />
+                </>
+            }
+
             <Forms.FormTitle>Vencord Location</Forms.FormTitle>
             <Forms.FormText>
                 Vencord files are loaded from{" "}

src/shared/settings.d.ts

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