diff options
author | 2019-11-28 11:23:10 +0700 | |
---|---|---|
committer | 2019-11-28 11:23:10 +0700 | |
commit | eff719b87c60097342d393922048662c32255d88 (patch) | |
tree | 1880039ba4002f34551c812bb356e46f537c57b8 /src/stores | |
parent | 5.4.1-beta.1 (diff) | |
download | ferdium-app-eff719b87c60097342d393922048662c32255d88.tar.gz ferdium-app-eff719b87c60097342d393922048662c32255d88.tar.zst ferdium-app-eff719b87c60097342d393922048662c32255d88.zip |
Better handling of (adaptable/universal) dark mode
Diffstat (limited to 'src/stores')
-rw-r--r-- | src/stores/AppStore.js | 4 | ||||
-rw-r--r-- | src/stores/UIStore.js | 41 |
2 files changed, 31 insertions, 14 deletions
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'; | |||
27 | const debug = require('debug')('Ferdi:AppStore'); | 27 | const debug = require('debug')('Ferdi:AppStore'); |
28 | 28 | ||
29 | const { | 29 | const { |
30 | app, systemPreferences, screen, powerMonitor, | 30 | app, nativeTheme, screen, powerMonitor, |
31 | } = remote; | 31 | } = remote; |
32 | 32 | ||
33 | const mainWindow = remote.getCurrentWindow(); | 33 | const mainWindow = remote.getCurrentWindow(); |
@@ -185,7 +185,7 @@ export default class AppStore extends Store { | |||
185 | this._healthCheck(); | 185 | this._healthCheck(); |
186 | }, 1000); | 186 | }, 1000); |
187 | 187 | ||
188 | this.isSystemDarkModeEnabled = systemPreferences.isDarkMode(); | 188 | this.isSystemDarkModeEnabled = nativeTheme.shouldUseDarkColors; |
189 | 189 | ||
190 | onVisibilityChange((isVisible) => { | 190 | onVisibilityChange((isVisible) => { |
191 | this.isFocused = isVisible; | 191 | 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 @@ | |||
1 | import { | 1 | import { |
2 | action, | 2 | action, observable, computed, reaction, |
3 | observable, | ||
4 | computed, | ||
5 | reaction, | ||
6 | } from 'mobx'; | 3 | } from 'mobx'; |
7 | import { theme } from '@meetfranz/theme'; | 4 | import { theme } from '@meetfranz/theme'; |
8 | import { remote } from 'electron'; | 5 | import { remote } from 'electron'; |
@@ -10,12 +7,14 @@ import { remote } from 'electron'; | |||
10 | import Store from './lib/Store'; | 7 | import Store from './lib/Store'; |
11 | import { isMac } from '../environment'; | 8 | import { isMac } from '../environment'; |
12 | 9 | ||
13 | const { systemPreferences } = remote; | 10 | const { nativeTheme, systemPreferences } = remote; |
14 | 11 | ||
15 | export default class UIStore extends Store { | 12 | export default class UIStore extends Store { |
16 | @observable showServicesUpdatedInfoBar = false; | 13 | @observable showServicesUpdatedInfoBar = false; |
17 | 14 | ||
18 | @observable isOsDarkThemeActive = isMac ? systemPreferences.isDarkMode() : false; | 15 | @observable isOsDarkThemeActive = isMac |
16 | ? nativeTheme.shouldUseDarkColors | ||
17 | : false; | ||
19 | 18 | ||
20 | constructor(...args) { | 19 | constructor(...args) { |
21 | super(...args); | 20 | super(...args); |
@@ -23,13 +22,18 @@ export default class UIStore extends Store { | |||
23 | // Register action handlers | 22 | // Register action handlers |
24 | this.actions.ui.openSettings.listen(this._openSettings.bind(this)); | 23 | this.actions.ui.openSettings.listen(this._openSettings.bind(this)); |
25 | this.actions.ui.closeSettings.listen(this._closeSettings.bind(this)); | 24 | this.actions.ui.closeSettings.listen(this._closeSettings.bind(this)); |
26 | this.actions.ui.toggleServiceUpdatedInfoBar.listen(this._toggleServiceUpdatedInfoBar.bind(this)); | 25 | this.actions.ui.toggleServiceUpdatedInfoBar.listen( |
26 | this._toggleServiceUpdatedInfoBar.bind(this), | ||
27 | ); | ||
27 | 28 | ||
28 | // Listen for theme change on MacOS | 29 | // Listen for theme change on MacOS |
29 | if (isMac) { | 30 | if (isMac) { |
30 | systemPreferences.subscribeNotification('AppleInterfaceThemeChangedNotification', () => { | 31 | systemPreferences.subscribeNotification( |
31 | this.isOsDarkThemeActive = systemPreferences.isDarkMode(); | 32 | 'AppleInterfaceThemeChangedNotification', |
32 | }); | 33 | () => { |
34 | this.isOsDarkThemeActive = nativeTheme.shouldUseDarkColors; | ||
35 | }, | ||
36 | ); | ||
33 | } | 37 | } |
34 | } | 38 | } |
35 | 39 | ||
@@ -44,11 +48,24 @@ export default class UIStore extends Store { | |||
44 | @computed get showMessageBadgesEvenWhenMuted() { | 48 | @computed get showMessageBadgesEvenWhenMuted() { |
45 | const settings = this.stores.settings.all; | 49 | const settings = this.stores.settings.all; |
46 | 50 | ||
47 | return (settings.app.isAppMuted && settings.app.showMessageBadgeWhenMuted) || !settings.app.isAppMuted; | 51 | return ( |
52 | (settings.app.isAppMuted && settings.app.showMessageBadgeWhenMuted) | ||
53 | || !settings.app.isAppMuted | ||
54 | ); | ||
48 | } | 55 | } |
49 | 56 | ||
50 | @computed get isDarkThemeActive() { | 57 | @computed get isDarkThemeActive() { |
51 | return this.stores.settings.all.app.darkMode && this.stores.settings.all.app.adaptableDarkMode && this.isOsDarkThemeActive ? true : !!this.stores.settings.all.app.darkMode; | 58 | const isMacWithAdaptableInDarkMode = isMac |
59 | && this.stores.settings.all.app.darkMode | ||
60 | && this.stores.settings.all.app.adaptableDarkMode | ||
61 | && this.isOsDarkThemeActive; | ||
62 | const isMacWithoutAdaptableInDarkMode = isMac | ||
63 | && this.stores.settings.all.app.darkMode | ||
64 | && !this.stores.settings.all.app.adaptableDarkMode; | ||
65 | const isNotMacInDarkMode = !isMac && this.stores.settings.all.app.darkMode; | ||
66 | return !!(isMacWithAdaptableInDarkMode | ||
67 | || isMacWithoutAdaptableInDarkMode | ||
68 | || isNotMacInDarkMode); | ||
52 | } | 69 | } |
53 | 70 | ||
54 | @computed get theme() { | 71 | @computed get theme() { |