feat: add splash window theming

src/main/mainWindow.ts

@@ -11,6 +11,7 @@ import {
     dialog,
     Menu,
     MenuItemConstructorOptions,
+    nativeTheme,
     Tray
 } from "electron";
 import { rm } from "fs/promises";
@@ -315,7 +316,9 @@ function createMainWindow() {
     removeSettingsListeners();
     removeVencordSettingsListeners();
 
-    const { staticTitle, transparencyOption, enableMenu, discordWindowsTitleBar } = Settings.store;
+    const { staticTitle, transparencyOption, splashTheming, splashBackground, enableMenu, discordWindowsTitleBar } =
+        Settings.store;
+
     const { frameless, macosTranslucency } = VencordSettings.store;
 
     const noFrame = frameless === true || (process.platform === "win32" && discordWindowsTitleBar === true);
@@ -335,7 +338,7 @@ function createMainWindow() {
         ...(transparencyOption && transparencyOption !== "none"
             ? {
                   backgroundColor: "#00000000",
-                  backgroundMaterial: Settings.store.transparencyOption,
+                  backgroundMaterial: transparencyOption,
                   transparent: true
               }
             : {}),
@@ -345,7 +348,14 @@ function createMainWindow() {
                   vibrancy: "sidebar",
                   backgroundColor: "#ffffff00"
               }
-            : {}),
+            : {
+                  backgroundColor: splashTheming
+                      ? splashBackground
+                      : nativeTheme.shouldUseDarkColors
+                      ? "#313338"
+                      : "#ffffff",
+                  transparent: false
+              }),
         ...(process.platform === "darwin" ? { titleBarStyle: "hiddenInset" } : {}),
         ...getWindowBoundsOptions(),
         autoHideMenuBar: enableMenu

src/main/splash.ts

@@ -9,6 +9,9 @@ import { join } from "path";
 import { SplashProps } from "shared/browserWinProperties";
 import { ICON_PATH, VIEW_DIR } from "shared/paths";
 
+import { Settings } from "./settings";
+import { alpha } from "./utils/color";
+
 export function createSplashWindow() {
     const splash = new BrowserWindow({
         ...SplashProps,
@@ -17,5 +20,17 @@ export function createSplashWindow() {
 
     splash.loadFile(join(VIEW_DIR, "splash.html"));
 
+    const { splashBackground, splashColor, splashTheming } = Settings.store;
+    if (splashTheming) {
+        if (splashColor) {
+            splash.webContents.insertCSS(`body { --fg: ${splashColor} !important }`);
+            splash.webContents.insertCSS(`body { --fg-semi-trans: ${alpha(splashColor, 0.2)} !important }`);
+        }
+
+        if (splashBackground) {
+            splash.webContents.insertCSS(`body { --bg: ${splashBackground} !important }`);
+        }
+    }
+
     return splash;
 }

src/main/utils/color.ts

@@ -0,0 +1,42 @@
+/*
+ * SPDX-License-Identifier: GPL-3.0
+ * Vesktop, a desktop app aiming to give you a snappier Discord Experience
+ * Copyright (c) 2023 Vendicated and Vencord contributors
+ */
+
+const digitRegex = "([a-zA-Z\\d.%\\*\\(\\)]+)";
+const validFormats = ["rgb", "hsl", "hwb", "lab", "lch", "oklab", "oklch"] as const;
+
+const colorRegexes = [
+    ...validFormats.map(fmt => new RegExp(`(${fmt})\\(${new Array(3).fill(digitRegex).join(" *, *")}\\)`)),
+    ...validFormats.map(fmt => new RegExp(`(${fmt})a\\(${new Array(4).fill(digitRegex).join(" *, *")}\\)`)),
+    ...validFormats.map(fmt => new RegExp(`(${fmt})\\(${new Array(3).fill(digitRegex).join(" +")}\\)`)),
+    ...validFormats.map(
+        fmt => new RegExp(`(${fmt})a?\\(${new Array(3).fill(digitRegex).join(" +")} ?/ ?${digitRegex}\\)`)
+    )
+];
+
+const hexRegex = /^#([\da-fA-F]{6})$/;
+const hexAlphaRegex = /^#([\da-fA-F]{6})[\da-fA-F]{2}$/;
+
+export const alpha = (original: string, alpha: number): string => {
+    for (const regex of colorRegexes) {
+        const match = original.match(regex);
+        if (match) {
+            const [, format, a, b, c] = match;
+            return `${format}a(${a} ${b} ${c} / ${alpha})`;
+        }
+    }
+
+    for (const regex of [hexRegex, hexAlphaRegex]) {
+        const match = original.match(regex);
+        if (match) {
+            const [, str] = match;
+            return `#${str}${Math.round(alpha * 255)
+                .toString(16)
+                .padStart(2, "0")}`;
+        }
+    }
+
+    return original;
+};

src/renderer/components/Settings.tsx

@@ -42,6 +42,7 @@ export default function SettingsUi() {
         ],
         ["staticTitle", "Static Title", 'Makes the window title "Vesktop" instead of changing to the current page'],
         ["enableMenu", "Enable Menu Bar", "Enables the application menu bar. Press ALT to toggle visibility."],
+        ["splashTheming", "Splash theming", "Adapt the splash window colors to your custom theme", false],
         [
             "openLinksWithElectron",
             "Open Links in app (experimental)",

src/renderer/index.ts

@@ -7,6 +7,7 @@
 import "./fixes";
 import "./appBadge";
 import "./patches";
+import "./themedSplash";
 
 console.log("read if cute :3");
 

src/renderer/themedSplash.ts

@@ -0,0 +1,34 @@
+/*
+ * SPDX-License-Identifier: GPL-3.0
+ * Vesktop, a desktop app aiming to give you a snappier Discord Experience
+ * Copyright (c) 2023 Vendicated and Vencord contributors
+ */
+
+import { Settings } from "./settings";
+
+function isValidColor(color: CSSStyleValue | undefined): color is CSSUnparsedValue & { [0]: string } {
+    return color instanceof CSSUnparsedValue && typeof color[0] === "string" && CSS.supports("color", color[0]);
+}
+
+const updateSplashColors = () => {
+    const bodyStyles = document.body.computedStyleMap();
+
+    const color = bodyStyles.get("--text-normal");
+    const backgroundColor = bodyStyles.get("--background-primary");
+
+    if (isValidColor(color)) {
+        Settings.store.splashColor = color[0];
+    }
+
+    if (isValidColor(backgroundColor)) {
+        Settings.store.splashBackground = backgroundColor[0];
+    }
+};
+
+if (document.readyState === "complete") {
+    updateSplashColors();
+} else {
+    window.addEventListener("load", updateSplashColors);
+}
+
+window.addEventListener("beforeunload", updateSplashColors);

src/shared/settings.d.ts

@@ -26,4 +26,8 @@ export interface Settings {
 
     skippedUpdate?: string;
     firstLaunch?: boolean;
+
+    splashTheming?: boolean;
+    splashColor?: string;
+    splashBackground?: string;
 }