Dark Mode : Add OS option in theme selection dropdown (#14379)

app/_locales/de/messages.json

@@ -794,9 +794,6 @@
   "decryptRequest": {
     "message": "Anfrage entschlüsseln"
   },
-  "defaultTheme": {
-    "message": "Standard"
-  },
   "delete": {
     "message": "Löschen"
   },

app/_locales/el/messages.json

@@ -794,9 +794,6 @@
   "decryptRequest": {
     "message": "Αίτημα αποκρυπτογράφησης"
   },
-  "defaultTheme": {
-    "message": "Προεπιλεγμένο"
-  },
   "delete": {
     "message": "Διαγραφή"
   },

app/_locales/en/messages.json

@@ -805,9 +805,6 @@
   "decryptRequest": {
     "message": "Decrypt request"
   },
-  "defaultTheme": {
-    "message": "Default"
-  },
   "delete": {
     "message": "Delete"
   },
@@ -1722,6 +1719,9 @@
   "levelArrow": {
     "message": "level arrow"
   },
+  "lightTheme": {
+    "message": "Light"
+  },
   "likeToImportTokens": {
     "message": "Would you like to import these tokens?"
   },
@@ -2335,6 +2335,9 @@
   "origin": {
     "message": "Origin"
   },
+  "osTheme": {
+    "message": "System"
+  },
   "padlock": {
     "message": "Padlock"
   },

app/_locales/es/messages.json

@@ -794,9 +794,6 @@
   "decryptRequest": {
     "message": "Descifrar solicitud"
   },
-  "defaultTheme": {
-    "message": "Predeterminado"
-  },
   "delete": {
     "message": "Eliminar"
   },

app/_locales/fr/messages.json

@@ -794,9 +794,6 @@
   "decryptRequest": {
     "message": "Décrypter la demande"
   },
-  "defaultTheme": {
-    "message": "Par défaut"
-  },
   "delete": {
     "message": "Supprimer"
   },

app/_locales/hi/messages.json

@@ -794,9 +794,6 @@
   "decryptRequest": {
     "message": "अनुरोध डिक्रिप्ट करें"
   },
-  "defaultTheme": {
-    "message": "डिफ़ॉल्ट"
-  },
   "delete": {
     "message": "हटाएँ"
   },

app/_locales/id/messages.json

@@ -794,9 +794,6 @@
   "decryptRequest": {
     "message": "Dekrip permintaan"
   },
-  "defaultTheme": {
-    "message": "Awal"
-  },
   "delete": {
     "message": "Hapus"
   },

app/_locales/ja/messages.json

@@ -794,9 +794,6 @@
   "decryptRequest": {
     "message": "リクエストを解読"
   },
-  "defaultTheme": {
-    "message": "デフォルト"
-  },
   "delete": {
     "message": "削除"
   },

app/_locales/ko/messages.json

@@ -794,9 +794,6 @@
   "decryptRequest": {
     "message": "암호 해독 요청"
   },
-  "defaultTheme": {
-    "message": "기본값"
-  },
   "delete": {
     "message": "삭제"
   },

app/_locales/pt/messages.json

@@ -794,9 +794,6 @@
   "decryptRequest": {
     "message": "Solicitação de descriptografia"
   },
-  "defaultTheme": {
-    "message": "Padrão"
-  },
   "delete": {
     "message": "Excluir"
   },

app/_locales/ru/messages.json

@@ -794,9 +794,6 @@
   "decryptRequest": {
     "message": "Расшифровать запрос"
   },
-  "defaultTheme": {
-    "message": "По умолчанию"
-  },
   "delete": {
     "message": "Удалить"
   },

app/_locales/tl/messages.json

@@ -794,9 +794,6 @@
   "decryptRequest": {
     "message": "I-decrypt ang request"
   },
-  "defaultTheme": {
-    "message": "Default"
-  },
   "delete": {
     "message": "I-delete"
   },

app/_locales/tr/messages.json

@@ -794,9 +794,6 @@
   "decryptRequest": {
     "message": "Şifre çözme talebi"
   },
-  "defaultTheme": {
-    "message": "Varsayılan"
-  },
   "delete": {
     "message": "Sil"
   },

app/_locales/vi/messages.json

@@ -794,9 +794,6 @@
   "decryptRequest": {
     "message": "Giải mã yêu cầu"
   },
-  "defaultTheme": {
-    "message": "Mặc định"
-  },
   "delete": {
     "message": "Xóa"
   },

app/_locales/zh/messages.json

@@ -797,9 +797,6 @@
   "decryptRequest": {
     "message": "解密请求"
   },
-  "defaultTheme": {
-    "message": "默认"
-  },
   "delete": {
     "message": "删除"
   },

app/scripts/controllers/preferences.js

@@ -68,7 +68,7 @@ export default class PreferencesController {
       ledgerTransportType: window.navigator.hid
         ? LEDGER_TRANSPORT_TYPES.WEBHID
         : LEDGER_TRANSPORT_TYPES.U2F,
-      theme: 'default',
+      theme: 'light',
       ...opts.initState,
     };
 

app/scripts/controllers/preferences.test.js

@@ -353,14 +353,14 @@ describe('preferences controller', function () {
   });
 
   describe('setTheme', function () {
-    it('should default to value "default"', function () {
+    it('should default to value "light"', function () {
       const state = preferencesController.store.getState();
-      assert.equal(state.theme, 'default');
+      assert.equal(state.theme, 'light');
     });
 
     it('should set the setTheme property in state', function () {
       const state = preferencesController.store.getState();
-      assert.equal(state.theme, 'default');
+      assert.equal(state.theme, 'light');
       preferencesController.setTheme('dark');
       assert.equal(preferencesController.store.getState().theme, 'dark');
     });

test/helpers/setup-helper.js

@@ -70,6 +70,10 @@ Object.assign(window, { fetch, Headers, Request, Response });
 window.localStorage = {
   removeItem: () => null,
 };
+
+// used for native dark/light mode detection
+window.matchMedia = () => true;
+
 // override @metamask/logo
 window.requestAnimationFrame = () => undefined;
 

ui/pages/routes/routes.component.js

@@ -70,6 +70,7 @@ import ConfirmationPage from '../confirmation';
 import OnboardingFlow from '../onboarding-flow/onboarding-flow';
 import QRHardwarePopover from '../../components/app/qr-hardware-popover';
 import { SEND_STAGES } from '../../ducks/send';
+import { THEME_TYPE } from '../settings/experimental-tab/experimental-tab.constant';
 
 export default class Routes extends Component {
   static propTypes = {
@@ -104,10 +105,23 @@ export default class Routes extends Component {
     metricsEvent: PropTypes.func,
   };
 
+  handleOsTheme() {
+    const osTheme = window?.matchMedia('(prefers-color-scheme: dark)')?.matches
+      ? THEME_TYPE.DARK
+      : THEME_TYPE.LIGHT;
+
+    document.documentElement.setAttribute('data-theme', osTheme);
+  }
+
   componentDidUpdate(prevProps) {
     const { theme } = this.props;
+
     if (theme !== prevProps.theme) {
-      document.documentElement.setAttribute('data-theme', theme);
+      if (theme === THEME_TYPE.OS) {
+        this.handleOsTheme();
+      } else {
+        document.documentElement.setAttribute('data-theme', theme);
+      }
     }
   }
 
@@ -128,7 +142,11 @@ export default class Routes extends Component {
         pageChanged(locationObj.pathname);
       }
     });
-    document.documentElement.setAttribute('data-theme', theme);
+    if (theme === THEME_TYPE.OS) {
+      this.handleOsTheme();
+    } else {
+      document.documentElement.setAttribute('data-theme', theme);
+    }
   }
 
   renderRoutes() {

ui/pages/settings/experimental-tab/experimental-tab.component.js

@@ -7,7 +7,6 @@ import {
 } from '../../../helpers/utils/settings-search';
 import Dropdown from '../../../components/ui/dropdown';
 import { EVENT } from '../../../../shared/constants/metametrics';
-
 import { THEME_TYPE } from './experimental-tab.constant';
 
 export default class ExperimentalTab extends PureComponent {
@@ -239,13 +238,17 @@ export default class ExperimentalTab extends PureComponent {
 
     const themesOptions = [
       {
-        name: t('defaultTheme'),
-        value: THEME_TYPE.DEFAULT,
+        name: t('lightTheme'),
+        value: THEME_TYPE.LIGHT,
       },
       {
         name: t('darkTheme'),
         value: THEME_TYPE.DARK,
       },
+      {
+        name: t('osTheme'),
+        value: THEME_TYPE.OS,
+      },
     ];
 
     const onChange = (newTheme) => {

ui/pages/settings/experimental-tab/experimental-tab.constant.js

@@ -1,4 +1,5 @@
 export const THEME_TYPE = {
-  DEFAULT: 'default',
+  LIGHT: 'light',
   DARK: 'dark',
+  OS: 'os',
 };