From 5a5a3ab5080742ab92531a667108419abbb319ab Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 7 Dec 2024 10:02:56 +0200
Subject: [PATCH] feat(mica): define material at CSS level

---
 src/public/app/desktop.js             | 16 +++++++---------
 src/public/stylesheets/theme-next.css |  2 ++
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/public/app/desktop.js b/src/public/app/desktop.js
index 5cb52f136..2621592e1 100644
--- a/src/public/app/desktop.js
+++ b/src/public/app/desktop.js
@@ -50,17 +50,16 @@ function initOnElectron() {
     
     const electronRemote = utils.dynamicRequire("@electron/remote");    
     const currentWindow = electronRemote.getCurrentWindow();    
+    const style = window.getComputedStyle(document.body);
 
-    initTransparencyEffects(currentWindow);
+    initTransparencyEffects(style, currentWindow);
 
     if (options.get("nativeTitleBarVisible") !== "true") {
-        initTitleBarButtons(currentWindow);
+        initTitleBarButtons(style, currentWindow);
     }    
 }
 
-function initTitleBarButtons(currentWindow) {    
-    const style = window.getComputedStyle(document.body);
-    
+function initTitleBarButtons(style, currentWindow) {
     if (window.glob.platform === "win32") {
         const applyWindowsOverlay = () => {
             const color = style.getPropertyValue("--native-titlebar-background");
@@ -84,10 +83,9 @@ function initTitleBarButtons(currentWindow) {
     }    
 }
 
-function initTransparencyEffects(currentWindow) {
+function initTransparencyEffects(style, currentWindow) {
     if (window.glob.platform === "win32") {
-        const isHorizontalLayout = (options.get("layoutOrientation") === "horizontal");
-        const backgroundMaterial = isHorizontalLayout ? "tabbed" : "mica";
-        currentWindow.setBackgroundMaterial(backgroundMaterial);
+        const material = style.getPropertyValue("--background-material");
+        currentWindow.setBackgroundMaterial(material);
     }
 }
\ No newline at end of file
diff --git a/src/public/stylesheets/theme-next.css b/src/public/stylesheets/theme-next.css
index 9231849f3..7df983712 100644
--- a/src/public/stylesheets/theme-next.css
+++ b/src/public/stylesheets/theme-next.css
@@ -419,6 +419,7 @@ body.electron.platform-win32 {
     --tab-background-color: transparent;
     --active-tab-background-color: var(--launcher-pane-background-color);
     --native-titlebar-background: #00000000;
+    --background-material: tabbed;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -431,6 +432,7 @@ body.electron.platform-win32 {
 body.electron.platform-win32.layout-vertical {
     --left-pane-background-color: transparent;
     --launcher-pane-background-color: rgba(255, 255, 255, 0.055);
+    --background-material: mica;
 }
 
 body.electron.platform-win32,