How to measure whether your users prefer dark mode or light mode with Google Analytics (GA4)

Dark mode has become increasingly popular in recent years, since it helps reduce eye strain and save battery on devices. If you have a website or an app, you might want to know whether your users use dark mode, so you can better understand their preferences and adapt your content accordingly.

To measure the user's dark mode setting, we'll use Google Analytics 4 (GA4) and Google Tag Manager (GTM). The process involves setting up GTM, creating a custom dimension in GA, and finally putting together a report with the data collected.

Here are the steps to create a custom variable in GTM that records whether the user is using dark or light mode:

1. In your GTM account, go to the "Variables" section and click the "New" button.
2. On the "Create Variable" page, choose "Custom JavaScript" as the variable type and name it "User Color Mode".
3. In the "Custom JavaScript" field, enter a function that returns "dark" or "light" based on the user's dark mode setting.
4. Click the "Save" button to save the custom variable.

Note: window.matchMedia('(prefers-color-scheme: dark)') reflects the user's preference based on their operating system setting (for example, light or dark mode) or user agent. If you want to measure it based on the option the user has chosen within your app instead, you can extend this approach by adding the GA user data programmatically (see the GA documentation).

Once you've created the custom variable in GTM that records the dark mode setting, you can create a custom tag in GTM that sends that data to GA4 as an event. To create it, follow these steps:

1. In your GTM account, go to the "Tags" section and click the "New" button.
2. On the "Create Tag" page, choose "Google Analytics: GA4 Event" as the tag type.
3. In the "Google Analytics Settings" section, select the correct GA4 property from the "Configuration Tag" dropdown. Make sure you choose the property that corresponds to your website or app.
4. In the "Event Parameters" section, enter the following values:
   • Event name: "page_view"
   • Event parameters: { "color_mode": {{User Color Mode}} }
5. Add the "Initialization - All pages" trigger
6. Click "Save"

Now, to see the results in Google Analytics (GA4), you need to add a custom dimension. You can create a custom dimension called "User Color Mode" with the user property value "color_mode". Here are the steps:

1. Sign in to your Google Analytics account and go to the Configure section.
2. Click Custom Definitions, then Custom Dimensions.
3. Click the "New Custom Dimension" button.
4. In the "Name" field, type "User Color Mode" as the name of the custom dimension.
5. In the "Scope" field, choose "User" as the scope for this custom dimension. This way, the dimension will be tied to each individual user of your website.
6. In the "Event Parameter" field, type "color_mode" as the event parameter that will set the value of this custom dimension.
7. In the "Active" field, make sure to check the box to activate this custom dimension.
8. Click the "Create" button to save the new custom dimension.

Once set up, you can see the stats immediately on the "Reports" → "Realtime" page. However, on other pages, such as "Explore", you'll need to wait 24 hours before you can start using this new user property.

Summary

Now you know how to set up Google Analytics 4 and GTM to measure whether your users use dark mode or light mode. Analyzing this data will help you decide whether it's worth implementing dark mode on your website or app for your audience.