Add "system" theme setting for MacOS

js/background.js

@@ -208,6 +208,7 @@
     switch (theme) {
       case 'dark':
       case 'light':
+      case 'system':
         return theme;
       case 'android-dark':
         return 'dark';
@@ -231,7 +232,11 @@
     window.Events = {
       getDeviceName: () => textsecure.storage.user.getDeviceName(),
 
-      getThemeSetting: () => storage.get('theme-setting', 'light'),
+      getThemeSetting: () =>
+        storage.get(
+          'theme-setting',
+          window.platform === 'darwin' ? 'system' : 'light'
+        ),
       setThemeSetting: value => {
         storage.put('theme-setting', value);
         onChangeTheme();
@@ -326,6 +331,19 @@
         `New version detected: ${currentVersion}; previous: ${lastVersion}`
       );
 
+      const themeSetting = window.Events.getThemeSetting();
+      const newThemeSetting = mapOldThemeToNew(themeSetting);
+
+      if (
+        window.isBeforeVersion(lastVersion, 'v1.25.0') &&
+        window.platform === 'darwin' &&
+        newThemeSetting === window.systemTheme
+      ) {
+        window.Events.setThemeSetting('system');
+      } else {
+        window.Events.setThemeSetting(newThemeSetting);
+      }
+
       if (window.isBeforeVersion(lastVersion, 'v1.25.0')) {
         // Stickers flags
         await Promise.all([
@@ -334,6 +352,7 @@
         ]);
       }
 
+      // This one should always be last - it could restart the app
       if (window.isBeforeVersion(lastVersion, 'v1.15.0-beta.5')) {
         await window.Signal.Logs.deleteAll();
         window.restart();
@@ -411,10 +430,6 @@
     };
     startSpellCheck();
 
-    const themeSetting = window.Events.getThemeSetting();
-    const newThemeSetting = mapOldThemeToNew(themeSetting);
-    window.Events.setThemeSetting(newThemeSetting);
-
     try {
       await Promise.all([
         ConversationController.load(),

js/permissions_popup_start.js

@@ -9,7 +9,23 @@ $(document).on('keyup', e => {
 });
 
 const $body = $(document.body);
-$body.addClass(`${window.theme}-theme`);
+
+async function applyTheme() {
+  'use strict';
+
+  const theme = await window.getThemeSetting();
+  $body.removeClass('light-theme');
+  $body.removeClass('dark-theme');
+  $body.addClass(`${theme === 'system' ? window.systemTheme : theme}-theme`);
+}
+
+applyTheme();
+
+window.subscribeToSystemThemeChange(() => {
+  'use strict';
+
+  applyTheme();
+});
 
 window.view = new Whisper.ConfirmationDialogView({
   message: i18n('audioPermissionNeeded'),

js/settings_start.js

@@ -9,7 +9,23 @@ $(document).on('keyup', e => {
 });
 
 const $body = $(document.body);
-$body.addClass(`${window.theme}-theme`);
+
+async function applyTheme() {
+  'use strict';
+
+  const theme = await window.getThemeSetting();
+  $body.removeClass('light-theme');
+  $body.removeClass('dark-theme');
+  $body.addClass(`${theme === 'system' ? window.systemTheme : theme}-theme`);
+}
+
+applyTheme();
+
+window.subscribeToSystemThemeChange(() => {
+  'use strict';
+
+  applyTheme();
+});
 
 // eslint-disable-next-line strict
 const getInitialData = async () => ({

js/views/app_view.js

@@ -8,6 +8,14 @@
 
   window.Whisper = window.Whisper || {};
 
+  function resolveTheme() {
+    const theme = storage.get('theme-setting') || 'light';
+    if (window.platform === 'darwin' && theme === 'system') {
+      return window.systemTheme;
+    }
+    return theme;
+  }
+
   Whisper.AppView = Backbone.View.extend({
     initialize() {
       this.inboxView = null;
@@ -15,14 +23,18 @@
 
       this.applyTheme();
       this.applyHideMenu();
+
+      window.subscribeToSystemThemeChange(() => {
+        this.applyTheme();
+      });
     },
     events: {
       'click .openInstaller': 'openInstaller', // NetworkStatusView has this button
       openInbox: 'openInbox',
     },
     applyTheme() {
+      const theme = resolveTheme();
       const iOS = storage.get('userAgent') === 'OWI';
-      const theme = storage.get('theme-setting') || 'light';
       this.$el
         .removeClass('light-theme')
         .removeClass('dark-theme')

js/views/settings_view.js

@@ -88,7 +88,9 @@
           $(document.body)
             .removeClass('dark-theme')
             .removeClass('light-theme')
-            .addClass(`${theme}-theme`);
+            .addClass(
+              `${theme === 'system' ? window.systemTheme : theme}-theme`
+            );
           window.setThemeSetting(theme);
         },
       });
@@ -143,8 +145,10 @@
         audioNotificationDescription: i18n('audioNotificationDescription'),
         isAudioNotificationSupported: Settings.isAudioNotificationSupported(),
         isHideMenuBarSupported: Settings.isHideMenuBarSupported(),
+        hasSystemTheme: window.platform === 'darwin',
         themeLight: i18n('themeLight'),
         themeDark: i18n('themeDark'),
+        themeSystem: i18n('themeSystem'),
         hideMenuBar: i18n('hideMenuBar'),
         clearDataHeader: i18n('clearDataHeader'),
         clearDataButton: i18n('clearDataButton'),