feat: add splash window theming (#52)

Co-authored-by: V <vendicated@riseup.net>

src/main/mainWindow.ts

@@ -11,6 +11,7 @@ import {
     dialog,
     Menu,
     MenuItemConstructorOptions,
+    nativeTheme,
     Tray
 } from "electron";
 import { rm } from "fs/promises";
@@ -341,7 +342,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);
@@ -361,7 +364,7 @@ function createMainWindow() {
         ...(transparencyOption && transparencyOption !== "none"
             ? {
                   backgroundColor: "#00000000",
-                  backgroundMaterial: Settings.store.transparencyOption,
+                  backgroundMaterial: transparencyOption,
                   transparent: true
               }
             : {}),
@@ -371,7 +374,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,8 @@ import { join } from "path";
 import { SplashProps } from "shared/browserWinProperties";
 import { ICON_PATH, VIEW_DIR } from "shared/paths";
 
+import { Settings } from "./settings";
+
 export function createSplashWindow() {
     const splash = new BrowserWindow({
         ...SplashProps,
@@ -17,5 +19,20 @@ export function createSplashWindow() {
 
     splash.loadFile(join(VIEW_DIR, "splash.html"));
 
+    const { splashBackground, splashColor, splashTheming } = Settings.store;
+
+    if (splashTheming) {
+        if (splashColor) {
+            const semiTransparentSplashColor = splashColor.replace("rgb(", "rgba(").replace(")", ", 0.2)");
+
+            splash.webContents.insertCSS(`body { --fg: ${splashColor} !important }`);
+            splash.webContents.insertCSS(`body { --fg-semi-trans: ${semiTransparentSplashColor} !important }`);
+        }
+
+        if (splashBackground) {
+            splash.webContents.insertCSS(`body { --bg: ${splashBackground} !important }`);
+        }
+    }
+
     return splash;
 }

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,46 @@
+/*
+ * 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]);
+}
+
+function resolveColor(color: string) {
+    const span = document.createElement("span");
+    span.style.color = color;
+    span.style.display = "none";
+
+    document.body.append(span);
+    const rgbColor = getComputedStyle(span).color;
+    span.remove();
+
+    return rgbColor;
+}
+
+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 = resolveColor(color[0]);
+    }
+
+    if (isValidColor(backgroundColor)) {
+        Settings.store.splashBackground = resolveColor(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;
 }