Fix theme=system (#116)

Author: Kien Ngo

src/embeds/erc1155.tsx

@@ -77,7 +77,13 @@ const App: React.FC = () => {
   const biconomyApiKey = urlParams.get("biconomyApiKey") || "";
   const biconomyApiId = urlParams.get("biconomyApiId") || "";
 
-  const colorScheme = urlParams.get("theme") === "dark" ? "dark" : "light";
+  let _theme = urlParams.get("theme");
+  if (_theme === "system") {
+    _theme = window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? "dark"
+      : "light";
+  }
+  const colorScheme = _theme === "dark" ? "dark" : "light";
   const primaryColor = urlParams.get("primaryColor") || "purple";
 
   const sdkOptions = useGasless(relayerUrl, biconomyApiKey, biconomyApiId);

src/embeds/erc20.tsx

@@ -71,7 +71,13 @@ const App: React.FC = () => {
   const biconomyApiKey = urlParams.get("biconomyApiKey") || "";
   const biconomyApiId = urlParams.get("biconomyApiId") || "";
 
-  const colorScheme = urlParams.get("theme") === "dark" ? "dark" : "light";
+  let _theme = urlParams.get("theme");
+  if (_theme === "system") {
+    _theme = window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? "dark"
+      : "light";
+  }
+  const colorScheme = _theme === "dark" ? "dark" : "light";
   const primaryColor = urlParams.get("primaryColor") || "purple";
 
   const sdkOptions = useGasless(relayerUrl, biconomyApiKey, biconomyApiId);

src/embeds/erc721.tsx

@@ -72,7 +72,13 @@ const App: React.FC = () => {
   const biconomyApiKey = urlParams.get("biconomyApiKey") || "";
   const biconomyApiId = urlParams.get("biconomyApiId") || "";
 
-  const colorScheme = urlParams.get("theme") === "dark" ? "dark" : "light";
+  let _theme = urlParams.get("theme");
+  if (_theme === "system") {
+    _theme = window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? "dark"
+      : "light";
+  }
+  const colorScheme = _theme === "dark" ? "dark" : "light";
   const primaryColor = urlParams.get("primaryColor") || "purple";
 
   const sdkOptions = useGasless(relayerUrl, biconomyApiKey, biconomyApiId);

src/embeds/marketplace-v3.tsx

@@ -686,7 +686,13 @@ const App: React.FC = () => {
   const relayerUrl = urlParams.get("relayUrl") || "";
   const biconomyApiKey = urlParams.get("biconomyApiKey") || "";
   const biconomyApiId = urlParams.get("biconomyApiId") || "";
-  const colorScheme = urlParams.get("theme") === "dark" ? "dark" : "light";
+  let _theme = urlParams.get("theme");
+  if (_theme === "system") {
+    _theme = window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? "dark"
+      : "light";
+  }
+  const colorScheme = _theme === "dark" ? "dark" : "light";
   const primaryColor = urlParams.get("primaryColor") || "purple";
   const secondaryColor = urlParams.get("secondaryColor") || "orange";
 

src/embeds/marketplace.tsx

@@ -660,7 +660,13 @@ const App: React.FC = () => {
   const relayerUrl = urlParams.get("relayUrl") || "";
   const biconomyApiKey = urlParams.get("biconomyApiKey") || "";
   const biconomyApiId = urlParams.get("biconomyApiId") || "";
-  const colorScheme = urlParams.get("theme") === "dark" ? "dark" : "light";
+  let _theme = urlParams.get("theme");
+  if (_theme === "system") {
+    _theme = window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? "dark"
+      : "light";
+  }
+  const colorScheme = _theme === "dark" ? "dark" : "light";
   const primaryColor = urlParams.get("primaryColor") || "purple";
   const secondaryColor = urlParams.get("secondaryColor") || "orange";