From 75764cd725ce14faff06a2fd9933891ecd178d22 Mon Sep 17 00:00:00 2001
From: Eugene Pankov <e@ajenti.org>
Date: Sun, 30 Jan 2022 20:43:59 +0100
Subject: [PATCH] macOS vibrancy fixes

---
 app/lib/window.ts                              | 2 +-
 app/src/global.scss                            | 2 +-
 app/src/preload.scss                           | 4 ++++
 tabby-core/src/components/appRoot.component.ts | 4 ++++
 tabby-core/src/theme.paper.scss                | 4 +---
 tabby-core/src/theme.scss                      | 4 +---
 tabby-electron/src/index.ts                    | 1 -
 7 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/app/lib/window.ts b/app/lib/window.ts
index b3b8db41..caf0a029 100644
--- a/app/lib/window.ts
+++ b/app/lib/window.ts
@@ -27,7 +27,7 @@ abstract class GlasstronWindow extends BrowserWindow {
     abstract setBlur (_: boolean)
 }
 
-const macOSVibrancyType = process.platform === 'darwin' ? compareVersions(macOSRelease().version, '10.14', '>=') ? 'fullscreen-ui' : 'dark' : null
+const macOSVibrancyType = process.platform === 'darwin' ? compareVersions(macOSRelease().version, '10.14', '>=') ? 'under-window' : 'dark' : null
 
 const activityIcon = nativeImage.createFromPath(`${app.getAppPath()}/assets/activity.png`)
 
diff --git a/app/src/global.scss b/app/src/global.scss
index 877c2f5b..c4c59854 100644
--- a/app/src/global.scss
+++ b/app/src/global.scss
@@ -1,7 +1,7 @@
 body {
     min-height: 100vh;
     overflow: hidden;
-    background: #1D272D;
+    background: transparent !important;
     -webkit-font-smoothing: antialiased;
 }
 
diff --git a/app/src/preload.scss b/app/src/preload.scss
index c86f7e21..7f72c897 100644
--- a/app/src/preload.scss
+++ b/app/src/preload.scss
@@ -1,3 +1,7 @@
+app-root {
+  background: #1D272D;
+}
+
 .preload-logo {
   -webkit-app-region: drag;
   position: fixed;
diff --git a/tabby-core/src/components/appRoot.component.ts b/tabby-core/src/components/appRoot.component.ts
index 1fb837cb..9f47890f 100644
--- a/tabby-core/src/components/appRoot.component.ts
+++ b/tabby-core/src/components/appRoot.component.ts
@@ -214,6 +214,10 @@ export class AppRootComponent {
         }
     }
 
+    @HostBinding('class.vibrant') get isVibrant () {
+        return this.config.store.appearance.vibrancy
+    }
+
     private getToolbarButtons (aboveZero: boolean): ToolbarButton[] {
         let buttons: ToolbarButton[] = []
         this.config.enabledServices(this.toolbarButtonProviders).forEach(provider => {
diff --git a/tabby-core/src/theme.paper.scss b/tabby-core/src/theme.paper.scss
index 7615007d..f83f23da 100644
--- a/tabby-core/src/theme.paper.scss
+++ b/tabby-core/src/theme.paper.scss
@@ -117,15 +117,13 @@ window-controls {
 
 $border-color: $base1;
 
-body {
+app-root  {
     background: $body-bg;
 
     &.vibrant {
         background: rgba(255, 255, 255,.4) !important;
     }
-}
 
-app-root  {
     &> .content {
         .tab-bar {
             .btn-tab-bar {
diff --git a/tabby-core/src/theme.scss b/tabby-core/src/theme.scss
index c31ee173..d360565d 100644
--- a/tabby-core/src/theme.scss
+++ b/tabby-core/src/theme.scss
@@ -25,15 +25,13 @@ window-controls {
 
 $border-color: #111;
 
-body {
+app-root  {
     background: $body-bg;
 
     &.vibrant {
         background: rgba(0,0,0,.65);
     }
-}
 
-app-root  {
     &.no-tabs {
         background: rgba(0,0,0,.5);
     }
diff --git a/tabby-electron/src/index.ts b/tabby-electron/src/index.ts
index 13874c8b..eda5431d 100644
--- a/tabby-electron/src/index.ts
+++ b/tabby-electron/src/index.ts
@@ -116,7 +116,6 @@ export default class ElectronModule {
         if (this.hostApp.platform === Platform.Windows && !isWindowsBuild(WIN_BUILD_FLUENT_BG_SUPPORTED)) {
             vibrancyType = null
         }
-        document.body.classList.toggle('vibrant', this.config.store.appearance.vibrancy)
         this.electron.ipcRenderer.send('window-set-vibrancy', this.config.store.appearance.vibrancy, vibrancyType)
 
         this.hostWindow.setOpacity(this.config.store.appearance.opacity)