macOS vibrancy fixes

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`)
 

app/src/global.scss

@@ -1,7 +1,7 @@
 body {
     min-height: 100vh;
     overflow: hidden;
-    background: #1D272D;
+    background: transparent !important;
     -webkit-font-smoothing: antialiased;
 }
 

app/src/preload.scss

@@ -1,3 +1,7 @@
+app-root {
+  background: #1D272D;
+}
+
 .preload-logo {
   -webkit-app-region: drag;
   position: fixed;

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 => {

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 {

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);
     }

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)