Fix Splash colour retrieval & show main window earlier if splash is disabled

src/main/mainWindow.ts

@@ -299,7 +299,7 @@ function getDarwinOptions(): BrowserWindowConstructorOptions {
         options.vibrancy = "sidebar";
         options.backgroundColor = "#ffffff00";
     } else {
-        if (splashTheming) {
+        if (splashTheming !== false) {
             options.backgroundColor = splashBackground;
         } else {
             options.backgroundColor = nativeTheme.shouldUseDarkColors ? "#313338" : "#ffffff";
@@ -405,14 +405,18 @@ function createMainWindow() {
     removeSettingsListeners();
     removeVencordSettingsListeners();
 
-    const { staticTitle, transparencyOption, enableMenu, customTitleBar } = Settings.store;
+    const { staticTitle, transparencyOption, enableMenu, customTitleBar, splashTheming, splashBackground } =
+        Settings.store;
 
     const { frameless, transparent } = VencordSettings.store;
 
     const noFrame = frameless === true || customTitleBar === true;
+    const backgroundColor =
+        splashTheming !== false ? splashBackground : nativeTheme.shouldUseDarkColors ? "#313338" : "#ffffff";
 
     const win = (mainWin = new BrowserWindow({
-        show: false,
+        show: Settings.store.enableSplashScreen === false,
+        backgroundColor,
         webPreferences: {
             nodeIntegration: false,
             sandbox: false,
@@ -504,7 +508,7 @@ export async function createWindows() {
         splash?.destroy();
 
         if (!startMinimized) {
-            mainWin!.show();
+            if (splash) mainWin!.show();
             if (State.store.maximized && !isDeckGameMode) mainWin!.maximize();
         }
 

src/main/splash.ts

@@ -22,7 +22,7 @@ export function createSplashWindow(startMinimized = false) {
 
     const { splashBackground, splashColor, splashTheming } = Settings.store;
 
-    if (splashTheming) {
+    if (splashTheming !== false) {
         if (splashColor) {
             const semiTransparentSplashColor = splashColor.replace("rgb(", "rgba(").replace(")", ", 0.2)");
 

src/renderer/components/settings/Settings.tsx

@@ -63,15 +63,15 @@ const SettingsOptions: Record<string, Array<BooleanSetting | SettingsComponent>>
         {
             key: "enableSplashScreen",
             title: "Enable Splash Screen",
-            description: "Shows a small splash screen while Vesktop is loading",
+            description:
+                "Shows a small splash screen while Vesktop is loading. Disabling this option will show the main window earlier while it's still loading.",
             defaultValue: true
         },
         {
             key: "splashTheming",
             title: "Splash theming",
             description: "Adapt the splash window colors to your custom theme",
-            defaultValue: false,
-            disabled: () => Settings.store.enableSplashScreen === false
+            defaultValue: true
         },
         WindowsTransparencyControls
     ],

src/renderer/themedSplash.ts

@@ -10,15 +10,49 @@ function isValidColor(color: CSSStyleValue | undefined): color is CSSUnparsedVal
     return color instanceof CSSUnparsedValue && typeof color[0] === "string" && CSS.supports("color", color[0]);
 }
 
+// https://gist.github.com/earthbound19/e7fe15fdf8ca3ef814750a61bc75b5ce
+function clamp(value: number, min: number, max: number) {
+    return Math.max(Math.min(value, max), min);
+}
+const linearToGamma = (c: number) => (c >= 0.0031308 ? 1.055 * Math.pow(c, 1 / 2.4) - 0.055 : 12.92 * c);
+
+function oklabToSRGB({ L, a, b }: { L: number; a: number; b: number }) {
+    let l = L + a * +0.3963377774 + b * +0.2158037573;
+    let m = L + a * -0.1055613458 + b * -0.0638541728;
+    let s = L + a * -0.0894841775 + b * -1.291485548;
+    l **= 3;
+    m **= 3;
+    s **= 3;
+    let R = l * +4.0767416621 + m * -3.3077115913 + s * +0.2309699292;
+    let G = l * -1.2684380046 + m * +2.6097574011 + s * -0.3413193965;
+    let B = l * -0.0041960863 + m * -0.7034186147 + s * +1.707614701;
+    R = 255 * linearToGamma(R);
+    G = 255 * linearToGamma(G);
+    B = 255 * linearToGamma(B);
+    R = Math.round(clamp(R, 0, 255));
+    G = Math.round(clamp(G, 0, 255));
+    B = Math.round(clamp(B, 0, 255));
+
+    return `rgb(${R}, ${G}, ${B})`;
+}
+
 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;
+    let rgbColor = getComputedStyle(span).color;
     span.remove();
 
+    if (rgbColor.startsWith("oklab(")) {
+        // scam
+        const [_, L, a, b] = rgbColor.match(/oklab\((.+?)[, ]+(.+?)[, ]+(.+?)\)/) ?? [];
+        if (L && a && b) {
+            rgbColor = oklabToSRGB({ L: parseFloat(L), a: parseFloat(a), b: parseFloat(b) });
+        }
+    }
+
     return rgbColor;
 }