Track user preferred theme

Author: UnsignedArduino

src/components/Analytics/specific.ts

@@ -31,4 +31,12 @@ export namespace AnalyticEvents {
       variationId,
     });
   }
+
+  export function setUserPreferredTheme(
+    theme: "light" | "dark" | "auto light" | "auto dark",
+  ) {
+    // https://ithoughthecamewithyou.com/post/user-scoped-custom-dimensions-in-google-analytics-4-using-gtag
+    // console.log(`Setting user preferred theme to ${theme}`);
+    window.gtag("set", "user_properties", { theme: theme });
+  }
 }

src/components/Navbar/ThemePicker/themePicker.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { AnalyticEvents } from "@/components/Analytics/specific";
 
 export type Theme = "Light" | "Dark";
 export type ThemeOptions = Theme | "Auto";
@@ -175,6 +176,16 @@ export function ThemeProxy({
         }),
       );
       window.localStorage.setItem("theme", dropdownTheme);
+
+      if (dropdownTheme === "Auto") {
+        AnalyticEvents.setUserPreferredTheme(
+          osWantsDark.matches ? "auto dark" : "auto light",
+        );
+      } else {
+        AnalyticEvents.setUserPreferredTheme(
+          dropdownTheme.toLowerCase() as "light" | "dark",
+        );
+      }
     }
   }, [dropdownTheme, loadedPreferredTheme]);