From 255cb51944db7f94a9758c7178e6ed50af7c0abd Mon Sep 17 00:00:00 2001 From: Evan Simkowitz Date: Wed, 13 Nov 2024 20:48:02 -0800 Subject: [PATCH] Fix window opacity bug (#1283) With the tab refactor, we introduced a regression that prevented window transparency from working. Rather than applying overrides of the app background color (where we record window opacity) to the body of the document, we were applying it to the main div. This meant that while the main div was transparent, the body was not (since the default background color we set for the body is opaque). With this change, we update the body background directly. --- frontend/app/app.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/app/app.tsx b/frontend/app/app.tsx index 5cb1be735..b6e2a7342 100644 --- a/frontend/app/app.tsx +++ b/frontend/app/app.tsx @@ -121,7 +121,7 @@ function AppSettingsUpdater() { (windowSettings?.["window:transparent"] || windowSettings?.["window:blur"]) ?? false; const opacity = util.boundNumber(windowSettings?.["window:opacity"] ?? 0.8, 0, 1); let baseBgColor = windowSettings?.["window:bgcolor"]; - let mainDiv = document.getElementById("main"); + const mainDiv = document.getElementById("main"); // console.log("window settings", windowSettings, isTransparentOrBlur, opacity, baseBgColor, mainDiv); if (isTransparentOrBlur) { mainDiv.classList.add("is-transparent"); @@ -131,10 +131,10 @@ function AppSettingsUpdater() { } const color = new Color(baseBgColor); const rgbaColor = color.alpha(opacity).string(); - mainDiv.style.backgroundColor = rgbaColor; + document.body.style.backgroundColor = rgbaColor; } else { mainDiv.classList.remove("is-transparent"); - mainDiv.style.opacity = null; + document.body.style.backgroundColor = "var(--main-bg-color)"; } }, [windowSettings]); return null;