diff --git a/src/main/mainWindow.ts b/src/main/mainWindow.ts index 57e53e89..231b4579 100644 --- a/src/main/mainWindow.ts +++ b/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 diff --git a/src/main/splash.ts b/src/main/splash.ts index 042ecc04..f21799d0 100644 --- a/src/main/splash.ts +++ b/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; } diff --git a/src/renderer/components/Settings.tsx b/src/renderer/components/Settings.tsx index b41fc98b..236ff429 100644 --- a/src/renderer/components/Settings.tsx +++ b/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)", diff --git a/src/renderer/index.ts b/src/renderer/index.ts index 9f75644f..ebe6bc6c 100644 --- a/src/renderer/index.ts +++ b/src/renderer/index.ts @@ -7,6 +7,7 @@ import "./fixes"; import "./appBadge"; import "./patches"; +import "./themedSplash"; console.log("read if cute :3"); diff --git a/src/renderer/themedSplash.ts b/src/renderer/themedSplash.ts new file mode 100644 index 00000000..13490c45 --- /dev/null +++ b/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); diff --git a/src/shared/settings.d.ts b/src/shared/settings.d.ts index a9a0decd..6ecfe6f9 100644 --- a/src/shared/settings.d.ts +++ b/src/shared/settings.d.ts @@ -26,4 +26,8 @@ export interface Settings { skippedUpdate?: string; firstLaunch?: boolean; + + splashTheming?: boolean; + splashColor?: string; + splashBackground?: string; }