From 11b257d7a3094685da3b9750d2c63c72ee8f544d Mon Sep 17 00:00:00 2001
From: Evan Simkowitz <esimkowitz@users.noreply.github.com>
Date: Thu, 21 Nov 2024 10:30:02 -0800
Subject: [PATCH] Simplify app transparency and background color handling
 (#1331)

---
 frontend/app/app.less   |  2 +-
 frontend/app/app.tsx    | 20 +++++++++++---------
 frontend/app/theme.less |  1 +
 3 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/frontend/app/app.less b/frontend/app/app.less
index f208d85d9..245f02ae2 100644
--- a/frontend/app/app.less
+++ b/frontend/app/app.less
@@ -12,7 +12,7 @@ body {
     color: var(--main-text-color);
     font: var(--base-font);
     overflow: hidden;
-    background: var(--main-bg-color);
+    background: rgb(from var(--main-bg-color) r g b / var(--window-opacity));
     -webkit-font-smoothing: auto;
     backface-visibility: hidden;
     transform: translateZ(0);
diff --git a/frontend/app/app.tsx b/frontend/app/app.tsx
index b32bc3bf1..c91ef4c63 100644
--- a/frontend/app/app.tsx
+++ b/frontend/app/app.tsx
@@ -17,7 +17,6 @@ import { getElemAsStr } from "@/util/focusutil";
 import * as keyutil from "@/util/keyutil";
 import * as util from "@/util/util";
 import clsx from "clsx";
-import Color from "color";
 import debug from "debug";
 import { Provider, useAtomValue } from "jotai";
 import "overlayscrollbars/overlayscrollbars.css";
@@ -130,21 +129,24 @@ function AppSettingsUpdater() {
         const isTransparentOrBlur =
             (windowSettings?.["window:transparent"] || windowSettings?.["window:blur"]) ?? false;
         const opacity = util.boundNumber(windowSettings?.["window:opacity"] ?? 0.8, 0, 1);
-        let baseBgColor = windowSettings?.["window:bgcolor"];
+        const baseBgColor = windowSettings?.["window:bgcolor"];
         const mainDiv = document.getElementById("main");
         // console.log("window settings", windowSettings, isTransparentOrBlur, opacity, baseBgColor, mainDiv);
         if (isTransparentOrBlur) {
             mainDiv.classList.add("is-transparent");
-            const rootStyles = getComputedStyle(document.documentElement);
-            if (baseBgColor == null) {
-                baseBgColor = rootStyles.getPropertyValue("--main-bg-color").trim();
+            if (opacity != null) {
+                document.body.style.setProperty("--window-opacity", `${opacity}`);
+            } else {
+                document.body.style.removeProperty("--window-opacity");
             }
-            const color = new Color(baseBgColor);
-            const rgbaColor = color.alpha(opacity).string();
-            document.body.style.backgroundColor = rgbaColor;
         } else {
             mainDiv.classList.remove("is-transparent");
-            document.body.style.backgroundColor = "var(--main-bg-color)";
+            document.body.style.removeProperty("--window-opacity");
+        }
+        if (baseBgColor != null) {
+            document.body.style.setProperty("--main-bg-color", baseBgColor);
+        } else {
+            document.body.style.removeProperty("--main-bg-color");
         }
     }, [windowSettings]);
     return null;
diff --git a/frontend/app/theme.less b/frontend/app/theme.less
index 7a8211470..d79da9467 100644
--- a/frontend/app/theme.less
+++ b/frontend/app/theme.less
@@ -7,6 +7,7 @@
 :root {
     --main-text-color: #f7f7f7;
     --title-font-size: 18px;
+    --window-opacity: 1;
     --secondary-text-color: rgb(195, 200, 194);
     --grey-text-color: #666;
     --main-bg-color: rgb(34, 34, 34);