Improve dark mode behaviour on macOS

5 files changed, 10 insertions, 8 deletions

diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 9064ff234..61c31ac93 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -170,6 +170,7 @@ export default @observer class EditSettingsForm extends Component {
     noUpdates: PropTypes.bool.isRequired,
     hibernationEnabled: PropTypes.bool.isRequired,
     isDarkmodeEnabled: PropTypes.bool.isRequired,
+    isAdaptableDarkModeEnabled: PropTypes.bool.isRequired,
     openProcessManager: PropTypes.func.isRequired,
   };
 
@@ -194,6 +195,7 @@ export default @observer class EditSettingsForm extends Component {
       installUpdate,
       form,
       isCheckingForUpdates,
+      isAdaptableDarkModeEnabled,
       isUpdateAvailable,
       noUpdateAvailable,
       updateIsReadyToInstall,
@@ -429,10 +431,10 @@ export default @observer class EditSettingsForm extends Component {
             <h2 id="apperance">{intl.formatMessage(messages.headlineAppearance)}</h2>
             <Toggle field={form.$('showDisabledServices')} />
             <Toggle field={form.$('showMessageBadgeWhenMuted')} />
-            <Toggle field={form.$('darkMode')} />
-            {isDarkmodeEnabled && (
+            {isMac && <Toggle field={form.$('adaptableDarkMode')} />}
+            {!(isMac && isAdaptableDarkModeEnabled) && <Toggle field={form.$('darkMode')} disabled={isAdaptableDarkModeEnabled} />}
+            {(isDarkmodeEnabled || isAdaptableDarkModeEnabled) && (
               <>
-                {isMac && <Toggle field={form.$('adaptableDarkMode')} />}
                 <Toggle field={form.$('universalDarkMode')} />
                 <p
                   className="settings__message"
diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js
index c92ad4df0..a7c2b428f 100644
--- a/src/containers/settings/EditSettingsScreen.js
+++ b/src/containers/settings/EditSettingsScreen.js
@@ -104,7 +104,7 @@ const messages = defineMessages({
   },
   adaptableDarkMode: {
     id: 'settings.app.form.adaptableDarkMode',
-    defaultMessage: '!!!Enable adaptable Dark Mode',
+    defaultMessage: '!!!Synchronize dark mode with my Mac\'s dark mode setting',
   },
   universalDarkMode: {
     id: 'settings.app.form.universalDarkMode',
@@ -466,6 +466,7 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
           noUpdates={this.props.stores.settings.app.noUpdates}
           hibernationEnabled={this.props.stores.settings.app.hibernate}
           isDarkmodeEnabled={this.props.stores.settings.app.darkMode}
+          isAdaptableDarkModeEnabled={this.props.stores.settings.app.adaptableDarkMode}
           openProcessManager={() => this.openProcessManager()}
         />
       </ErrorBoundary>
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 510a29143..f1acf9904 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -257,11 +257,11 @@
   "settings.app.cacheInfo": "Ferdi cache is currently using {size} of disk space.",
   "settings.app.currentVersion": "Current version:",
   "settings.app.form.accentColor": "Accent color",
-  "settings.app.form.adaptableDarkMode": "Enable adaptable Dark Mode",
+  "settings.app.form.adaptableDarkMode": "Synchronize dark mode with my Mac's dark mode setting",
   "settings.app.form.autoLaunchInBackground": "Open in background",
   "settings.app.form.autoLaunchOnStart": "Launch Ferdi on start",
   "settings.app.form.beta": "Include beta versions",
-  "settings.app.form.darkMode": "Join the Dark Side",
+  "settings.app.form.darkMode": "Enable dark mode",
   "settings.app.form.enableGPUAcceleration": "Enable GPU Acceleration",
   "settings.app.form.enableLock": "Enable Password Lock",
   "settings.app.form.enableSpellchecking": "Enable spell checking",
diff --git a/src/i18n/messages/src/containers/settings/EditSettingsScreen.json b/src/i18n/messages/src/containers/settings/EditSettingsScreen.json
index 06874d97e..82a9a7cd5 100644
--- a/src/i18n/messages/src/containers/settings/EditSettingsScreen.json
+++ b/src/i18n/messages/src/containers/settings/EditSettingsScreen.json
@@ -248,7 +248,7 @@
   },
   {
     "id": "settings.app.form.adaptableDarkMode",
-    "defaultMessage": "!!!Enable adaptable Dark Mode",
+    "defaultMessage": "!!!Synchronize dark mode with my Mac's dark mode setting",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
       "line": 105,
diff --git a/src/stores/UIStore.js b/src/stores/UIStore.js
index 5b9672798..6941cf086 100644
--- a/src/stores/UIStore.js
+++ b/src/stores/UIStore.js
@@ -57,7 +57,6 @@ export default class UIStore extends Store {
 
   @computed get isDarkThemeActive() {
     const isMacWithAdaptableInDarkMode = isMac
-      && this.stores.settings.all.app.darkMode
       && this.stores.settings.all.app.adaptableDarkMode
       && this.isOsDarkThemeActive;
     const isMacWithoutAdaptableInDarkMode = isMac