Dark Mode: Implement Metrics (#14455)

app/scripts/controllers/metametrics.js

@@ -560,6 +560,7 @@ export default class MetaMetricsController {
       [TRAITS.NUMBER_OF_TOKENS]: this._getNumberOfTokens(metamaskState),
       [TRAITS.OPENSEA_API_ENABLED]: metamaskState.openSeaEnabled,
       [TRAITS.THREE_BOX_ENABLED]: metamaskState.threeBoxSyncingAllowed,
+      [TRAITS.THEME]: metamaskState.theme || 'default',
     };
 
     if (!this.previousTraits) {

app/scripts/controllers/metametrics.test.js

@@ -681,6 +681,7 @@ describe('MetaMetricsController', function () {
         openSeaEnabled: true,
         threeBoxSyncingAllowed: false,
         useCollectibleDetection: false,
+        theme: 'default',
       });
 
       assert.deepEqual(traits, {
@@ -693,6 +694,7 @@ describe('MetaMetricsController', function () {
         [TRAITS.NUMBER_OF_TOKENS]: 5,
         [TRAITS.OPENSEA_API_ENABLED]: true,
         [TRAITS.THREE_BOX_ENABLED]: false,
+        [TRAITS.THEME]: 'default',
       });
     });
 
@@ -713,6 +715,7 @@ describe('MetaMetricsController', function () {
         identities: [{}, {}],
         threeBoxSyncingAllowed: false,
         useCollectibleDetection: false,
+        theme: 'default',
       });
 
       const updatedTraits = metaMetricsController._buildUserTraitsObject({
@@ -732,6 +735,7 @@ describe('MetaMetricsController', function () {
         identities: [{}, {}, {}],
         threeBoxSyncingAllowed: false,
         useCollectibleDetection: false,
+        theme: 'default',
       });
 
       assert.deepEqual(updatedTraits, {
@@ -759,6 +763,7 @@ describe('MetaMetricsController', function () {
         identities: [{}, {}],
         threeBoxSyncingAllowed: false,
         useCollectibleDetection: true,
+        theme: 'default',
       });
 
       const updatedTraits = metaMetricsController._buildUserTraitsObject({
@@ -776,6 +781,7 @@ describe('MetaMetricsController', function () {
         identities: [{}, {}],
         threeBoxSyncingAllowed: false,
         useCollectibleDetection: true,
+        theme: 'default',
       });
 
       assert.equal(updatedTraits, null);

shared/constants/metametrics.js

@@ -176,6 +176,7 @@
  * we identify the opensea_api_enabled trait
  * @property {'three_box_enabled'} THREE_BOX_ENABLED - when 3box feature is
  *  toggled we identify the 3box_enabled trait
+ * @property {'theme'} THEME - when the user's theme changes we identify the theme trait
  */
 
 /**
@@ -193,6 +194,7 @@ export const TRAITS = {
   NUMBER_OF_TOKENS: 'number_of_tokens',
   OPENSEA_API_ENABLED: 'opensea_api_enabled',
   THREE_BOX_ENABLED: 'three_box_enabled',
+  THEME: 'theme',
 };
 
 /**
@@ -215,6 +217,7 @@ export const TRAITS = {
  *  API enabled?
  * @property {boolean} [three_box_enabled] - does the user have 3box sync
  *  enabled?
+ * @property {string} [theme] - which theme the user has selected
  */
 
 // Mixpanel converts the zero address value to a truly anonymous event, which

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

@@ -247,6 +247,17 @@ export default class ExperimentalTab extends PureComponent {
       },
     ];
 
+    const onChange = (newTheme) => {
+      this.context.trackEvent({
+        category: 'Settings',
+        event: 'Theme Changed',
+        properties: {
+          theme_selected: newTheme,
+        },
+      });
+      setTheme(newTheme);
+    };
+
     return (
       <div className="settings-page__content-row">
         <div className="settings-page__content-item">
@@ -261,7 +272,7 @@ export default class ExperimentalTab extends PureComponent {
               id="select-theme"
               options={themesOptions}
               selectedOption={theme}
-              onChange={async (newTheme) => setTheme(newTheme)}
+              onChange={onChange}
             />
           </div>
         </div>