Better handling of (adaptable/universal) dark mode

5 files changed, 44 insertions, 21 deletions

diff --git a/src/config.js b/src/config.js
index 5c184b65a..57ae2aae1 100644
--- a/src/config.js
+++ b/src/config.js
@@ -6,7 +6,7 @@ import ms from 'ms';
 import { asarPath } from './helpers/asar-helpers';
 
 const app = process.type === 'renderer' ? electron.remote.app : electron.app;
-const systemPreferences = process.type === 'renderer' ? electron.remote.systemPreferences : electron.systemPreferences;
+const nativeTheme = process.type === 'renderer' ? electron.remote.nativeTheme : electron.nativeTheme;
 
 export const CHECK_INTERVAL = ms('1h'); // How often should we perform checks
 
@@ -53,7 +53,7 @@ export const DEFAULT_APP_SETTINGS = {
   showMessageBadgeWhenMuted: true,
   enableSpellchecking: true,
   spellcheckerLanguage: 'en-us',
-  darkMode: process.platform === 'darwin' ? systemPreferences.isDarkMode() : false, // We can't use refs from `./environment` at this time
+  darkMode: process.platform === 'darwin' ? nativeTheme.shouldUseDarkColors : false, // We can't use refs from `./environment` at this time
   locale: '',
   fallbackLocale: 'en-US',
   beta: false,
diff --git a/src/lib/Tray.js b/src/lib/Tray.js
index 90974de3f..c0d936599 100644
--- a/src/lib/Tray.js
+++ b/src/lib/Tray.js
@@ -1,5 +1,5 @@
 import {
-  app, Tray, Menu, systemPreferences, nativeImage,
+  app, Tray, Menu, systemPreferences, nativeTheme, nativeImage,
 } from 'electron';
 import path from 'path';
 
@@ -86,7 +86,7 @@ export default class TrayIcon {
   _getAsset(type, asset) {
     let { platform } = process;
 
-    if (platform === 'darwin' && systemPreferences.isDarkMode()) {
+    if (platform === 'darwin' && nativeTheme.shouldUseDarkColors) {
       platform = `${platform}-dark`;
     }
 
diff --git a/src/stores/AppStore.js b/src/stores/AppStore.js
index 0756a05eb..36e6efd4f 100644
--- a/src/stores/AppStore.js
+++ b/src/stores/AppStore.js
@@ -27,7 +27,7 @@ import { sleep } from '../helpers/async-helpers';
 const debug = require('debug')('Ferdi:AppStore');
 
 const {
-  app, systemPreferences, screen, powerMonitor,
+  app, nativeTheme, screen, powerMonitor,
 } = remote;
 
 const mainWindow = remote.getCurrentWindow();
@@ -185,7 +185,7 @@ export default class AppStore extends Store {
       this._healthCheck();
     }, 1000);
 
-    this.isSystemDarkModeEnabled = systemPreferences.isDarkMode();
+    this.isSystemDarkModeEnabled = nativeTheme.shouldUseDarkColors;
 
     onVisibilityChange((isVisible) => {
       this.isFocused = isVisible;
diff --git a/src/stores/UIStore.js b/src/stores/UIStore.js
index ee4e0f2b1..7e6f89fed 100644
--- a/src/stores/UIStore.js
+++ b/src/stores/UIStore.js
@@ -1,8 +1,5 @@
 import {
-  action,
-  observable,
-  computed,
-  reaction,
+  action, observable, computed, reaction,
 } from 'mobx';
 import { theme } from '@meetfranz/theme';
 import { remote } from 'electron';
@@ -10,12 +7,14 @@ import { remote } from 'electron';
 import Store from './lib/Store';
 import { isMac } from '../environment';
 
-const { systemPreferences } = remote;
+const { nativeTheme, systemPreferences } = remote;
 
 export default class UIStore extends Store {
   @observable showServicesUpdatedInfoBar = false;
 
-  @observable isOsDarkThemeActive = isMac ? systemPreferences.isDarkMode() : false;
+  @observable isOsDarkThemeActive = isMac
+    ? nativeTheme.shouldUseDarkColors
+    : false;
 
   constructor(...args) {
     super(...args);
@@ -23,13 +22,18 @@ export default class UIStore extends Store {
     // Register action handlers
     this.actions.ui.openSettings.listen(this._openSettings.bind(this));
     this.actions.ui.closeSettings.listen(this._closeSettings.bind(this));
-    this.actions.ui.toggleServiceUpdatedInfoBar.listen(this._toggleServiceUpdatedInfoBar.bind(this));
+    this.actions.ui.toggleServiceUpdatedInfoBar.listen(
+      this._toggleServiceUpdatedInfoBar.bind(this),
+    );
 
     // Listen for theme change on MacOS
     if (isMac) {
-      systemPreferences.subscribeNotification('AppleInterfaceThemeChangedNotification', () => {
-        this.isOsDarkThemeActive = systemPreferences.isDarkMode();
-      });
+      systemPreferences.subscribeNotification(
+        'AppleInterfaceThemeChangedNotification',
+        () => {
+          this.isOsDarkThemeActive = nativeTheme.shouldUseDarkColors;
+        },
+      );
     }
   }
 
@@ -44,11 +48,24 @@ export default class UIStore extends Store {
   @computed get showMessageBadgesEvenWhenMuted() {
     const settings = this.stores.settings.all;
 
-    return (settings.app.isAppMuted && settings.app.showMessageBadgeWhenMuted) || !settings.app.isAppMuted;
+    return (
+      (settings.app.isAppMuted && settings.app.showMessageBadgeWhenMuted)
+      || !settings.app.isAppMuted
+    );
   }
 
   @computed get isDarkThemeActive() {
-    return this.stores.settings.all.app.darkMode && this.stores.settings.all.app.adaptableDarkMode && this.isOsDarkThemeActive ? true : !!this.stores.settings.all.app.darkMode;
+    const isMacWithAdaptableInDarkMode = isMac
+      && this.stores.settings.all.app.darkMode
+      && this.stores.settings.all.app.adaptableDarkMode
+      && this.isOsDarkThemeActive;
+    const isMacWithoutAdaptableInDarkMode = isMac
+      && this.stores.settings.all.app.darkMode
+      && !this.stores.settings.all.app.adaptableDarkMode;
+    const isNotMacInDarkMode = !isMac && this.stores.settings.all.app.darkMode;
+    return !!(isMacWithAdaptableInDarkMode
+      || isMacWithoutAdaptableInDarkMode
+      || isNotMacInDarkMode);
   }
 
   @computed get theme() {
diff --git a/src/webview/recipe.js b/src/webview/recipe.js
index 1e290f8be..2cb2d3a98 100644
--- a/src/webview/recipe.js
+++ b/src/webview/recipe.js
@@ -162,9 +162,15 @@ class RecipeController {
     }
 
     // Remove dark reader if (universal) dark mode was just disabled
-    if (this.universalDarkModeInjected && (!this.settings.service.isDarkModeEnabled || !this.settings.app.universalDarkMode)) {
-      disableDarkMode();
-      this.universalDarkModeInjected = false;
+    if (this.universalDarkModeInjected) {
+      if (
+        !this.settings.app.darkMode
+        || !this.settings.service.isDarkModeEnabled
+        || !this.settings.app.universalDarkMode
+      ) {
+        disableDarkMode();
+        this.universalDarkModeInjected = false;
+      }
     }
   }