reimplemented Windows vibrancy using windows-swca and windows-blurbehind (#383)

app/lib/window.ts

@@ -3,12 +3,21 @@ import { BrowserWindow, app, ipcMain, Rectangle } from 'electron'
 import ElectronConfig = require('electron-config')
 import * as yaml from 'js-yaml'
 import * as fs from 'fs'
+import * as os from 'os'
 import * as path from 'path'
 
 let electronVibrancy: any
-if (process.platform !== 'linux') {
+let SetWindowCompositionAttribute: any
+let AccentState: any
+let DwmEnableBlurBehindWindow: any
+if (process.platform === 'darwin') {
     electronVibrancy = require('electron-vibrancy')
 }
+if (process.platform === 'win32') {
+    SetWindowCompositionAttribute = require('windows-swca').SetWindowCompositionAttribute
+    AccentState = require('windows-swca').AccentState
+    DwmEnableBlurBehindWindow = require('windows-blurbehind').DwmEnableBlurBehindWindow
+}
 
 export class Window {
     ready: Promise<void>
@@ -42,6 +51,7 @@ export class Window {
             webPreferences: { webSecurity: false },
             frame: false,
             show: false,
+            backgroundColor: '#00000000'
         }
         Object.assign(options, this.windowBounds)
 
@@ -53,10 +63,6 @@ export class Window {
             }
         }
 
-        if (process.platform === 'win32' && (configData.appearance || {}).vibrancy) {
-            options.transparent = true
-        }
-
         if (process.platform === 'linux') {
             options.backgroundColor = '#131d27'
         }
@@ -95,11 +101,29 @@ export class Window {
     }
 
     setVibrancy (enabled: boolean) {
-        if (enabled && !this.vibrancyViewID) {
+        if (process.platform === 'win32') {
-            this.vibrancyViewID = electronVibrancy.SetVibrancy(this.window, 0)
+            if (parseFloat(os.release()) >= 10) {
-        } else if (!enabled && this.vibrancyViewID) {
+                let attribValue = AccentState.ACCENT_DISABLED
-            electronVibrancy.RemoveView(this.window, this.vibrancyViewID)
+                let color = 0x00000000
-            this.vibrancyViewID = null
+                if (enabled) {
+                    if (parseInt(os.release().split('.')[2]) >= 17063) {
+                        attribValue = AccentState.ACCENT_ENABLE_FLUENT
+                        color = 0x01000000 // using a small alpha because acrylic bugs out at full transparency.
+                    } else {
+                        attribValue = AccentState.ACCENT_ENABLE_BLURBEHIND
+                    }
+                }
+                SetWindowCompositionAttribute(this.window, attribValue, color)
+            } else {
+                DwmEnableBlurBehindWindow(this.window, enabled)
+            }
+        } else if (process.platform === 'darwin') {
+            if (enabled && !this.vibrancyViewID) {
+                this.vibrancyViewID = electronVibrancy.SetVibrancy(this.window, 0)
+            } else if (!enabled && this.vibrancyViewID) {
+                electronVibrancy.RemoveView(this.window, this.vibrancyViewID)
+                this.vibrancyViewID = null
+            }
         }
     }
 

app/package.json

@@ -31,6 +31,8 @@
     "ngx-toastr": "^8.7.3",
     "path": "0.12.7",
     "rxjs": "^6.1.0",
+    "windows-blurbehind": "^1.0.0",
+    "windows-swca": "^1.1.1",
     "yargs": "^12.0.1",
     "zone.js": "~0.8.26"
   },

app/webpack.main.config.js

@@ -41,6 +41,8 @@ module.exports = {
     mz: 'commonjs mz',
     path: 'commonjs path',
     yargs: 'commonjs yargs',
+    'windows-swca': 'commonjs windows-swca',
+    'windows-blurbehind': 'commonjs windows-blurbehind',
   },
   plugins: [
     new webpack.optimize.ModuleConcatenationPlugin(),

app/yarn.lock

@@ -532,6 +532,14 @@ which@^1.2.9:
   dependencies:
     isexe "^2.0.0"
 
+windows-blurbehind@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/windows-blurbehind/-/windows-blurbehind-1.0.0.tgz#050efb988704c44335bdc3efefd757f6e463b8ac"
+
+windows-swca@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/windows-swca/-/windows-swca-1.1.1.tgz#0b3530278c67d408baac71c3a6aeb16d55318bf8"
+
 wrap-ansi@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"