Fluidly change vibrancy

public/electron.js

@@ -21,6 +21,13 @@ protocol.registerSchemesAsPrivileged([
     { scheme: 'hyperspace', privileges: { standard: true, secure: true } }
 ])
 
+/**
+ * Determine whether the desktop app is on macOS
+ */
+function darwin() {
+    return process.platform === "darwin";
+}
+
 /**
  * Register the protocol for Hyperspace
  */
@@ -126,7 +133,9 @@ function createWindow() {
 
             // Set some preferences that are specific to macOS.
             titleBarStyle: 'hidden',
-            vibrancy: systemPreferences.isDarkMode()? "dark": "light"
+            vibrancy: systemPreferences.isDarkMode()? "ultra-dark": "light",
+            transparent: darwin(),
+            backgroundColor: darwin()? "#80FFFFFF": "#FFF"
         }
     );
 
@@ -138,8 +147,10 @@ function createWindow() {
 
     // Watch for a change in macOS's dark mode and reload the window to apply changes
     systemPreferences.subscribeNotification('AppleInterfaceThemeChangedNotification', () => {
-        if (mainWindow != null)
+        if (mainWindow != null) {
+            mainWindow.setVibrancy(systemPreferences.isDarkMode()? "ultra-dark": "light");
             mainWindow.webContents.reload();
+        }
     })
 
     // Delete the window when closed
@@ -199,18 +210,18 @@ function createMenubar() {
             submenu: [
                 { role: 'reload' },
                 { role: 'forcereload' },
-                // {
-                //     label: 'Open Dev Tools',
-                //     click () {
-                //         try {
-                //             mainWindow.webContents.openDevTools({mode: 'undocked'});
-                //         } catch (err) {
-                //             console.error("Couldn't open dev tools: " + err);
-                //         }
+                {
+                    label: 'Open Dev Tools',
+                    click () {
+                        try {
+                            mainWindow.webContents.openDevTools({mode: 'undocked'});
+                        } catch (err) {
+                            console.error("Couldn't open dev tools: " + err);
+                        }
                         
-                //     },
-                //     accelerator: 'Shift+CmdOrCtrl+I'
-                // },
+                    },
+                    accelerator: 'Shift+CmdOrCtrl+I'
+                },
                 { type: 'separator' },
                 { role: 'togglefullscreen' }
             ]
@@ -285,7 +296,7 @@ app.on('ready', () => {
 
 // Standard quit behavior changes for macOS
 app.on('window-all-closed', () => {
-    if (process.platform !== 'darwin') {
+    if (!darwin()) {
         app.quit()
     }
 });

src/components/AppLayout/AppLayout.styles.tsx

@@ -1,4 +1,5 @@
 import { Theme, createStyles } from "@material-ui/core";
+import { darken } from "@material-ui/core/styles/colorManipulator";
 import { isDarwinApp } from '../../utilities/desktop';
 
 import { fade } from "@material-ui/core/styles/colorManipulator";
@@ -36,7 +37,11 @@ export const styles = (theme: Theme) => createStyles({
     appBar: {
       zIndex: 1000,
       backgroundImage: isDarwinApp()? `linear-gradient(${theme.palette.primary.main}, ${theme.palette.primary.dark})`: undefined,
-      backgroundColor: theme.palette.primary.main
+      backgroundColor: theme.palette.primary.main,
+      borderBottomColor: darken(theme.palette.primary.dark, 0.2),
+      borderBottomWidth: 1,
+      borderBottomStyle: isDarwinApp()? "solid": "none",
+      boxShadow: isDarwinApp()? "none": "inherit"
     },
     appBarMenuButton: {
       marginLeft: -12,