From eff719b87c60097342d393922048662c32255d88 Mon Sep 17 00:00:00 2001 From: Amine Mouafik Date: Thu, 28 Nov 2019 11:23:10 +0700 Subject: Better handling of (adaptable/universal) dark mode --- src/config.js | 4 ++-- src/lib/Tray.js | 4 ++-- src/stores/AppStore.js | 4 ++-- src/stores/UIStore.js | 41 +++++++++++++++++++++++++++++------------ src/webview/recipe.js | 12 +++++++++--- 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; + } } } -- cgit v1.2.3-54-g00ecf