Merge pull request #55 from hyperspacedev/darwin-themes

macOS themes for desktop app

README.md

@@ -45,6 +45,8 @@ Before testing Hyperspace, make the following change in `config.json`, located i
 
 This is necessary to test Hyperspace locally and will need to be reverted after testing or before releasing to `master`.
 
+> Note: if you are testing the **desktop** version of Hyperspace, replace `https://localhost:3000` with `desktop`.
+
 To run a development version of Hyperspace, either run the `start` task from VS Code or run the following in the terminal:
 
 ```npm
@@ -53,6 +55,8 @@ npm start
 
 The site will be hosted at `https://localhost:3000`, where you can sign in and test Hyperspace using your Mastodon account. If you have signed in before, you will be automatically logged in.
 
+Alternatively, if you are testing the desktop version of Hyperspace, run `npm run electrify` (or `npm run electrify`, if you don't want to make another production build). Hyperspace will open in a window where you can sign in and test Hyperspace with your Mastodon account. You'll be logged in automatically if you've signed in before.
+
 ### Building a release
 
 To build a release, run the following command:

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "hyperspace",
-  "version": "1.0.0",
+  "version": "1.0.0-beta4",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -2159,7 +2159,6 @@
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
       "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
-      "dev": true,
       "requires": {
         "sprintf-js": "~1.0.2"
       }
@@ -3094,14 +3093,12 @@
     "bluebird": {
       "version": "3.5.4",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.4.tgz",
-      "integrity": "sha512-FG+nFEZChJrbQ9tIccIfZJBz3J7mLrAhxakAbnrJWn8d7aKOC+LWifa0G+p4ZqKp4y13T7juYvdhq9NzKdsrjw==",
+      "integrity": "sha512-FG+nFEZChJrbQ9tIccIfZJBz3J7mLrAhxakAbnrJWn8d7aKOC+LWifa0G+p4ZqKp4y13T7juYvdhq9NzKdsrjw=="
-      "dev": true
     },
     "bluebird-lst": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/bluebird-lst/-/bluebird-lst-1.0.7.tgz",
       "integrity": "sha512-5ix04IbXVIZ6nSRM4aZnwQfk40Td0D57WAl8LfhnICF6XwT4efCZYh0veOHvfDmgpbqE4ju5L5XEAMIcAe13Kw==",
-      "dev": true,
       "requires": {
         "bluebird": "^3.5.3"
       }
@@ -3390,8 +3387,7 @@
     "buffer-from": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
-      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==",
+      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A=="
-      "dev": true
     },
     "buffer-indexof": {
       "version": "1.1.1",
@@ -6422,7 +6418,6 @@
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/electron-updater/-/electron-updater-4.0.6.tgz",
       "integrity": "sha512-JPGLME6fxJcHG8hX7HWFl6Aew6iVm0DkcrENreKa5SUJCHG+uUaAhxDGDt+YGcNkyx1uJ6eBGMvFxDTLUv67pg==",
-      "dev": true,
       "requires": {
         "bluebird-lst": "^1.0.6",
         "builder-util-runtime": "~8.1.0",
@@ -6439,7 +6434,6 @@
           "version": "8.1.1",
           "resolved": "https://registry.npmjs.org/builder-util-runtime/-/builder-util-runtime-8.1.1.tgz",
           "integrity": "sha512-+ieS4PMB33vVE2S3ZNWBEQJ1zKmAs/agrBdh7XadE1lKLjrH4aXYuOh9OOGdxqIRldhlhNBaF+yKMMEFOdNVig==",
-          "dev": true,
           "requires": {
             "bluebird-lst": "^1.0.6",
             "debug": "^4.1.1",
@@ -6451,7 +6445,6 @@
           "version": "4.1.1",
           "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
           "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
-          "dev": true,
           "requires": {
             "ms": "^2.1.1"
           }
@@ -6459,14 +6452,12 @@
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-          "dev": true
         },
         "source-map-support": {
           "version": "0.5.12",
           "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.12.tgz",
           "integrity": "sha512-4h2Pbvyy15EE02G+JOZpUCmqWJuqrs+sEkzewTm++BPi7Hvn/HwcqLAcNxYAyI0x13CpPPn+kMjl+hplXMHITQ==",
-          "dev": true,
           "requires": {
             "buffer-from": "^1.0.0",
             "source-map": "^0.6.0"
@@ -6478,7 +6469,6 @@
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/electron-window-state/-/electron-window-state-5.0.3.tgz",
       "integrity": "sha512-1mNTwCfkolXl3kMf50yW3vE2lZj0y92P/HYWFBrb+v2S/pCka5mdwN3cagKm458A7NjndSwijynXgcLWRodsVg==",
-      "dev": true,
       "requires": {
         "jsonfile": "^4.0.0",
         "mkdirp": "^0.5.1"
@@ -7024,8 +7014,7 @@
     "esprima": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
-      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="
-      "dev": true
     },
     "esquery": {
       "version": "1.0.1",
@@ -8332,7 +8321,6 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
       "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==",
-      "dev": true,
       "requires": {
         "graceful-fs": "^4.1.2",
         "jsonfile": "^4.0.0",
@@ -8343,7 +8331,6 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fs-extra-p/-/fs-extra-p-7.0.1.tgz",
       "integrity": "sha512-yhd2OV0HnHt2oitlp+X9hl2ReX4X/7kQeL7/72qzPHTZj5eUPGzAKOvEglU02Fa1OeG2rSy/aKB4WGVaLiF8tw==",
-      "dev": true,
       "requires": {
         "bluebird-lst": "^1.0.7",
         "fs-extra": "^7.0.1"
@@ -9131,8 +9118,7 @@
     "graceful-fs": {
       "version": "4.1.15",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.15.tgz",
-      "integrity": "sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA==",
+      "integrity": "sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA=="
-      "dev": true
     },
     "growly": {
       "version": "1.3.0",
@@ -11247,7 +11233,6 @@
       "version": "3.13.1",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
       "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
-      "dev": true,
       "requires": {
         "argparse": "^1.0.7",
         "esprima": "^4.0.0"
@@ -11371,7 +11356,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
       "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
-      "dev": true,
       "requires": {
         "graceful-fs": "^4.1.6"
       }
@@ -11536,8 +11520,7 @@
     "lazy-val": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/lazy-val/-/lazy-val-1.0.4.tgz",
-      "integrity": "sha512-u93kb2fPbIrfzBuLjZE+w+fJbUUMhNDXxNmMfaqNgpfQf1CO5ZSe2LfsnBqVAk7i/2NF48OSoRj+Xe2VT+lE8Q==",
+      "integrity": "sha512-u93kb2fPbIrfzBuLjZE+w+fJbUUMhNDXxNmMfaqNgpfQf1CO5ZSe2LfsnBqVAk7i/2NF48OSoRj+Xe2VT+lE8Q=="
-      "dev": true
     },
     "lcid": {
       "version": "1.0.0",
@@ -11704,8 +11687,7 @@
     "lodash.isequal": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
-      "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA=",
+      "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
-      "dev": true
     },
     "lodash.memoize": {
       "version": "4.1.2",
@@ -12229,7 +12211,6 @@
       "version": "0.5.1",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
       "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
-      "dev": true,
       "requires": {
         "minimist": "0.0.8"
       },
@@ -12237,8 +12218,7 @@
         "minimist": {
           "version": "0.0.8",
           "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
+          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
-          "dev": true
         }
       }
     },
@@ -12265,8 +12245,7 @@
     "ms": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
-      "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
+      "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
-      "dev": true
     },
     "multicast-dns": {
       "version": "6.2.3",
@@ -12933,8 +12912,7 @@
     "pako": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.10.tgz",
-      "integrity": "sha512-0DTvPVU3ed8+HNXOu5Bs+o//Mbdj9VNQMUOe9oKCwh8l0GNwpTDMKCWbRjgtD291AWnkAgkqA/LOnQS8AmS1tw==",
+      "integrity": "sha512-0DTvPVU3ed8+HNXOu5Bs+o//Mbdj9VNQMUOe9oKCwh8l0GNwpTDMKCWbRjgtD291AWnkAgkqA/LOnQS8AmS1tw=="
-      "dev": true
     },
     "parallel-transform": {
       "version": "1.1.0",
@@ -17888,8 +17866,7 @@
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
-      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
+      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
-      "dev": true
     },
     "scheduler": {
       "version": "0.13.6",
@@ -17930,8 +17907,7 @@
     "semver": {
       "version": "5.7.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz",
-      "integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==",
+      "integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA=="
-      "dev": true
     },
     "semver-diff": {
       "version": "2.1.0",
@@ -18529,8 +18505,7 @@
     "sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
-      "dev": true
     },
     "sshpk": {
       "version": "1.16.1",
@@ -19595,8 +19570,7 @@
     "universalify": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
-      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
-      "dev": true
     },
     "unpipe": {
       "version": "1.0.0",

package.json

@@ -76,7 +76,8 @@
       "target": [
         "dmg",
         "mas"
-      ]
+      ],
+      "darkModeSupport": true
     },
     "mas": {
       "entitlements": "desktop/entitlements.mas.plist",

public/electron.js

@@ -2,7 +2,7 @@
 // Electron script to run Hyperspace as an app
 // © 2018 Hyperspace developers. Licensed under Apache 2.0.
 
-const { app, Menu, protocol, BrowserWindow, shell } = require('electron');
+const { app, Menu, protocol, BrowserWindow, shell, systemPreferences } = require('electron');
 const windowStateKeeper = require('electron-window-state');
 const { autoUpdater } = require('electron-updater');
 const path = require('path');
@@ -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,6 +133,9 @@ function createWindow() {
 
             // Set some preferences that are specific to macOS.
             titleBarStyle: 'hidden',
+            vibrancy: systemPreferences.isDarkMode()? "ultra-dark": "light",
+            transparent: darwin(),
+            backgroundColor: darwin()? "#80FFFFFF": "#FFF"
         }
     );
 
@@ -135,6 +145,14 @@ function createWindow() {
     // Load the main app and open the index page.
     mainWindow.loadURL("hyperspace://hyperspace/app/");
 
+    // Watch for a change in macOS's dark mode and reload the window to apply changes
+    systemPreferences.subscribeNotification('AppleInterfaceThemeChangedNotification', () => {
+        if (mainWindow != null) {
+            mainWindow.setVibrancy(systemPreferences.isDarkMode()? "ultra-dark": "light");
+            mainWindow.webContents.reload();
+        }
+    })
+
     // Delete the window when closed
     mainWindow.on('closed', () => {
         mainWindow = null
@@ -278,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/App.styles.tsx

@@ -1,10 +1,13 @@
 import { Theme, createStyles } from "@material-ui/core";
+import { isDarwinApp } from './utilities/desktop';
 
 export const styles = (theme: Theme) => createStyles({
     root: {
       width: '100%',
       display: 'flex',
-      height: '100%'
+      height: '100%',
+      minHeight: '100vh',
+      backgroundColor: isDarwinApp()? "transparent": theme.palette.background.default,
     },
     content: {
       marginTop: 72,
@@ -14,5 +17,5 @@ export const styles = (theme: Theme) => createStyles({
         marginLeft: 250,
         marginTop: 88,
       },
-    }
+    },
   });

src/App.tsx

@@ -23,6 +23,7 @@ import You from './pages/You';
 import {withSnackbar} from 'notistack';
 import {PrivateRoute} from './interfaces/overrides';
 import { userLoggedIn } from './utilities/accounts';
+import { isDarwinApp } from './utilities/desktop';
 let theme = setHyperspaceTheme(getUserDefaultTheme());
 
 class App extends Component<any, any> {
@@ -42,8 +43,26 @@ class App extends Component<any, any> {
     this.setState({ theme: newTheme });
   }
 
+  componentDidMount() {
+    this.removeBodyBackground()
+  }
+
+  componentDidUpdate() {
+    this.removeBodyBackground()
+  }
+
+  removeBodyBackground() {
+    if (isDarwinApp()) {
+      document.body.style.backgroundColor = "transparent";
+      console.log("Changed!")
+      console.log(`New color: ${document.body.style.backgroundColor}`)
+    }
+  }
+
   render() {
     const { classes } = this.props;
+
+    this.removeBodyBackground()
     
     return (
       <MuiThemeProvider theme={this.state.theme}>

src/components/AppLayout/AppLayout.styles.tsx

@@ -1,4 +1,6 @@
 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";
 
@@ -19,7 +21,7 @@ export const styles = (theme: Theme) => createStyles({
       left: 0,
       height: 24,
       width: '100%',
-      backgroundColor: theme.palette.primary.dark,
+      backgroundColor: isDarwinApp()? theme.palette.primary.main: theme.palette.primary.dark,
       textAlign: 'center',
       zIndex: 1000,
       verticalAlign: 'middle',
@@ -34,6 +36,12 @@ 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,
+      borderBottomColor: darken(theme.palette.primary.dark, 0.2),
+      borderBottomWidth: 1,
+      borderBottomStyle: isDarwinApp()? "solid": "none",
+      boxShadow: isDarwinApp()? "none": "inherit"
     },
     appBarMenuButton: {
       marginLeft: -12,
@@ -56,7 +64,7 @@ export const styles = (theme: Theme) => createStyles({
         backgroundColor: fade(theme.palette.common.white, 0.25)
       },
       width: '100%',
-      marginLeft: theme.spacing.unit,
+      marginLeft: 0,
       marginRight: theme.spacing.unit,
       [theme.breakpoints.up('md')]: {
         marginLeft: theme.spacing.unit * 6,
@@ -112,13 +120,15 @@ export const styles = (theme: Theme) => createStyles({
     },
     drawerPaperWithAppBar: {
       width: 250,
-      zIndex: 0,
+      zIndex: -1,
-      marginTop: 64
+      marginTop: 64,
+      backgroundColor: isDarwinApp()? "transparent": theme.palette.background.paper
     },
     drawerPaperWithTitleAndAppBar: {
       width: 250,
-      zIndex: 0,
+      zIndex: -1,
-      marginTop: 88
+      marginTop: 88,
+      backgroundColor: isDarwinApp()? "transparent": theme.palette.background.paper
     },
     drawerDisplayMobile: {
       [theme.breakpoints.up('md')]: {

src/components/AppLayout/AppLayout.tsx

@@ -21,6 +21,7 @@ import { Notification } from '../../types/Notification';
 import {sendNotificationRequest} from '../../utilities/notifications';
 import {withSnackbar} from 'notistack';
 import { getConfig, getUserDefaultBool } from '../../utilities/settings';
+import { isDarwinApp } from '../../utilities/desktop';
 import { Config } from '../../types/Config';
 
 interface IAppLayoutState {
@@ -175,7 +176,7 @@ export class AppLayout extends Component<any, IAppLayoutState> {
 
       titlebar() {
         const { classes } = this.props;
-        if ((navigator.userAgent.includes(this.state.brandName || "Hyperspace") || navigator.userAgent.includes("Electron")) && navigator.userAgent.includes("Macintosh")) {
+        if (isDarwinApp()) {
           return (
             <div className={classes.titleBarRoot}>
               <Typography className={classes.titleBarText}>{this.state.brandName? this.state.brandName: "Hyperspace"} {this.state.developerMode? "(beta)": null}</Typography>

src/pages/PageLayout.styles.tsx

@@ -1,4 +1,5 @@
 import { Theme, createStyles } from "@material-ui/core";
+import { isDarwinApp } from "../utilities/desktop";
 
 export const styles = (theme: Theme) => createStyles({
     root: {
@@ -18,6 +19,8 @@ export const styles = (theme: Theme) => createStyles({
         paddingLeft: theme.spacing.unit * 24,
         paddingRight: theme.spacing.unit * 24
       },
+      backgroundColor: theme.palette.background.default,
+      minHeight: isDarwinApp()? "100vh": 'auto',
     },
     pageLayoutMaxConstraints: {
       marginTop: 72,
@@ -45,12 +48,16 @@ export const styles = (theme: Theme) => createStyles({
         paddingLeft: theme.spacing.unit * 40,
         paddingRight: theme.spacing.unit * 40,
       },
+      backgroundColor: theme.palette.background.default,
+      minHeight: isDarwinApp()? "100vh": 'auto',
     },
     pageLayoutMinimalConstraints: {
       flexGrow: 1,
       [theme.breakpoints.up('md')]: {
         marginLeft: 250,
       },
+      backgroundColor: theme.palette.background.default,
+      minHeight: isDarwinApp()? "100vh": 'auto',
     },
     pageLayoutEmptyTextConstraints: {
       paddingLeft: theme.spacing.unit * 2,
@@ -100,7 +107,8 @@ export const styles = (theme: Theme) => createStyles({
         [theme.breakpoints.up('sm')]: {
             paddingLeft: theme.spacing.unit * 2,
             paddingRight: theme.spacing.unit * 2
-        }
+        },
+        //backgroundColor: theme.palette.background.default
     },
     pageProfileAvatar: {
       width: 128,
@@ -137,6 +145,7 @@ export const styles = (theme: Theme) => createStyles({
         paddingLeft: theme.spacing.unit * 32,
         paddingRight: theme.spacing.unit * 32
       },
+      //backgroundColor: theme.palette.background.default,
     },
     errorCard: {
       padding: theme.spacing.unit * 4,

src/pages/Settings.tsx

@@ -28,7 +28,7 @@ import {setUserDefaultBool, getUserDefaultBool, getUserDefaultTheme, setUserDefa
 import {canSendNotifications, browserSupportsNotificationRequests} from '../utilities/notifications';
 import {themes, defaultTheme} from '../types/HyperspaceTheme';
 import ThemePreview from '../components/ThemePreview';
-import {setHyperspaceTheme, getHyperspaceTheme} from '../utilities/themes';
+import {setHyperspaceTheme, getHyperspaceTheme, getDarkModeFromSystem} from '../utilities/themes';
 import { Visibility } from '../types/Visibility';
 import {LinkableButton} from '../interfaces/overrides';
 
@@ -102,6 +102,7 @@ class SettingsPage extends Component<any, ISettingsState> {
             console.error(err.message);
         });
         this.getFederatedStatus();
+        console.log(getDarkModeFromSystem());
     }
 
     getFederatedStatus() {

src/pages/Welcome.tsx

@@ -6,6 +6,7 @@ import {SaveClientSession} from '../types/SessionData';
 import { createHyperspaceApp, getRedirectAddress } from '../utilities/login';
 import {parseUrl} from 'query-string';
 import { getConfig } from '../utilities/settings';
+import { isDarwinApp } from '../utilities/desktop';
 import axios from 'axios';
 import {withSnackbar, withSnackbarProps} from 'notistack';
 import { Config } from '../types/Config';
@@ -63,7 +64,7 @@ class WelcomePage extends Component<IWelcomeProps, IWelcomeState> {
             if (result !== undefined) {
                 let config: Config = result;
                 if (result.location === "dynamic") {
-                    console.warn("Recirect URI is set to dyanmic, which may affect how sign-in works for some users. Careful!");
+                    console.warn("Recirect URI is set to dynamic, which may affect how sign-in works for some users. Careful!");
                 }
                     this.setState({
                         logoUrl: config.branding? result.branding.logo: "logo.png",
@@ -312,7 +313,7 @@ class WelcomePage extends Component<IWelcomeProps, IWelcomeState> {
 
     titlebar() {
         const { classes } = this.props;
-        if ((navigator.userAgent.includes(this.state.brandName || "Hyperspace") || navigator.userAgent.includes("Electron")) && navigator.userAgent.includes("Macintosh")) {
+        if (isDarwinApp()) {
           return (
             <div className={classes.titleBarRoot}>
               <Typography className={classes.titleBarText}>{this.state.brandName? this.state.brandName: "Hyperspace"}</Typography>

src/types/HyperspaceTheme.tsx

@@ -1,5 +1,6 @@
 import {Color} from '@material-ui/core';
 import { deepPurple, red, lightGreen, yellow, purple, deepOrange, indigo, lightBlue, orange, blue, amber, pink, brown, blueGrey } from '@material-ui/core/colors';
+import { isDarwinApp } from '../utilities/desktop';
 
 /**
  * Basic theme colors for Hyperspace.

src/utilities/desktop.tsx

@@ -0,0 +1,31 @@
+/**
+ * A Window interface with extra properties for Electron
+ */
+interface ElectronWindow extends Window {
+    require?: any;
+}
+
+/**
+ * Determines whether the app is running from a website or an app.
+ * @returns Boolean of whether it is in desktop mode or not
+ */
+export function isDesktopApp(): boolean {
+    return navigator.userAgent.includes("Hyperspace" || "Electron");
+}
+
+/**
+ * Determines whether the app is the macOS application
+ */
+export function isDarwinApp(): boolean {
+    return isDesktopApp() && navigator.userAgent.includes("Macintosh")
+}
+
+/**
+ * Determine whether the system is in dark mode or not (macOS)
+ */
+export function isDarkMode() {
+    // Lift window to an ElectronWindow and add use require()
+    const eWin = window as ElectronWindow;
+    const {remote} = eWin.require('electron');
+    return remote.systemPreferences.isDarkMode()
+}

src/utilities/themes.tsx

@@ -1,6 +1,7 @@
 import { createMuiTheme, Theme } from '@material-ui/core';
 import { HyperspaceTheme, themes, defaultTheme } from '../types/HyperspaceTheme';
 import { getUserDefaultBool } from './settings';
+import { isDarwinApp, isDarkMode } from './desktop';
 
 /**
  * Locates a Hyperspace theme from the themes catalog
@@ -53,7 +54,11 @@ export function getDarkModeFromSystem(): string {
         if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
             return "dark";
         } else {
-            return "light";
+            if (isDarwinApp()) {
+                return isDarkMode()? "dark": "light";
+            } else {
+                return "light";
+            }
         }
     } else {
         return "light";