Transparent window support

assets/html/settings.html

@@ -66,6 +66,15 @@ <h2>General settings</h2>
             Enables the ability to auto-scroll with a middle mouse button click. Enable this only if that is not the default behavior already.
         </p>
     </fieldset>
+    <fieldset>
+        <div class="checkbox-container">
+            <input data-setting="transparency" id="transparency" type="checkbox"/>
+            <label for="transparency">Transparency</label>
+        </div>
+        <p class="description">
+            Makes the window transparent to enable the ability to use translucent themes.
+        </p>
+    </fieldset>
 </form>
 
 <h2>Client Mods settings</h2>

src/config/config.ts

@@ -17,6 +17,7 @@ export interface Settings {
     disableAutogain: boolean;
     autoscroll: boolean;
     framelessWindow: boolean;
+    transparency: boolean;
     encryptionCover: string;
     encryptionMark: string;
     discordUrl: string;
@@ -44,6 +45,7 @@ export const DEFAULTS: Settings = {
     disableAutogain: false,
     autoscroll: false,
     framelessWindow: true,
+    transparency: false,
     encryptionCover: "",
     encryptionMark: "| ",
     modName: "vencord",

src/window.ts

@@ -164,6 +164,7 @@ async function doAfterDefiningTheWindow() {
 }
 
 export async function createMainWindow() {
+    const transparency = await getConfig("transparency");
     mainWindow = new BrowserWindow({
         width: (await getWindowState("width")) ?? 835,
         height: (await getWindowState("height")) ?? 600,
@@ -175,7 +176,9 @@ export async function createMainWindow() {
         icon: await getCustomIcon(),
         frame: !await getConfig("framelessWindow"),
         autoHideMenuBar: true,
-        backgroundColor: "#313338",
+        backgroundColor: transparency ? undefined : "#313338",
+        transparent: transparency,
+        backgroundMaterial: "acrylic",
         webPreferences: {
             sandbox: false,
             preload: path.join(__dirname, "preload/preload.js"),