Skip to content
This repository was archived by the owner on Aug 5, 2026. It is now read-only.

Commit 03165b0

Browse files
author
Kien Ngo
authored
Fix theme=system (#116)
1 parent 38f9704 commit 03165b0

5 files changed

Lines changed: 35 additions & 5 deletions

File tree

‎src/embeds/erc1155.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,13 @@ const App: React.FC = () => {
7777
const biconomyApiKey = urlParams.get("biconomyApiKey") || "";
7878
const biconomyApiId = urlParams.get("biconomyApiId") || "";
7979

80-
const colorScheme = urlParams.get("theme") === "dark" ? "dark" : "light";
80+
let _theme = urlParams.get("theme");
81+
if (_theme === "system") {
82+
_theme = window.matchMedia("(prefers-color-scheme: dark)").matches
83+
? "dark"
84+
: "light";
85+
}
86+
const colorScheme = _theme === "dark" ? "dark" : "light";
8187
const primaryColor = urlParams.get("primaryColor") || "purple";
8288

8389
const sdkOptions = useGasless(relayerUrl, biconomyApiKey, biconomyApiId);

‎src/embeds/erc20.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,13 @@ const App: React.FC = () => {
7171
const biconomyApiKey = urlParams.get("biconomyApiKey") || "";
7272
const biconomyApiId = urlParams.get("biconomyApiId") || "";
7373

74-
const colorScheme = urlParams.get("theme") === "dark" ? "dark" : "light";
74+
let _theme = urlParams.get("theme");
75+
if (_theme === "system") {
76+
_theme = window.matchMedia("(prefers-color-scheme: dark)").matches
77+
? "dark"
78+
: "light";
79+
}
80+
const colorScheme = _theme === "dark" ? "dark" : "light";
7581
const primaryColor = urlParams.get("primaryColor") || "purple";
7682

7783
const sdkOptions = useGasless(relayerUrl, biconomyApiKey, biconomyApiId);

‎src/embeds/erc721.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,13 @@ const App: React.FC = () => {
7272
const biconomyApiKey = urlParams.get("biconomyApiKey") || "";
7373
const biconomyApiId = urlParams.get("biconomyApiId") || "";
7474

75-
const colorScheme = urlParams.get("theme") === "dark" ? "dark" : "light";
75+
let _theme = urlParams.get("theme");
76+
if (_theme === "system") {
77+
_theme = window.matchMedia("(prefers-color-scheme: dark)").matches
78+
? "dark"
79+
: "light";
80+
}
81+
const colorScheme = _theme === "dark" ? "dark" : "light";
7682
const primaryColor = urlParams.get("primaryColor") || "purple";
7783

7884
const sdkOptions = useGasless(relayerUrl, biconomyApiKey, biconomyApiId);

‎src/embeds/marketplace-v3.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -686,7 +686,13 @@ const App: React.FC = () => {
686686
const relayerUrl = urlParams.get("relayUrl") || "";
687687
const biconomyApiKey = urlParams.get("biconomyApiKey") || "";
688688
const biconomyApiId = urlParams.get("biconomyApiId") || "";
689-
const colorScheme = urlParams.get("theme") === "dark" ? "dark" : "light";
689+
let _theme = urlParams.get("theme");
690+
if (_theme === "system") {
691+
_theme = window.matchMedia("(prefers-color-scheme: dark)").matches
692+
? "dark"
693+
: "light";
694+
}
695+
const colorScheme = _theme === "dark" ? "dark" : "light";
690696
const primaryColor = urlParams.get("primaryColor") || "purple";
691697
const secondaryColor = urlParams.get("secondaryColor") || "orange";
692698

‎src/embeds/marketplace.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -660,7 +660,13 @@ const App: React.FC = () => {
660660
const relayerUrl = urlParams.get("relayUrl") || "";
661661
const biconomyApiKey = urlParams.get("biconomyApiKey") || "";
662662
const biconomyApiId = urlParams.get("biconomyApiId") || "";
663-
const colorScheme = urlParams.get("theme") === "dark" ? "dark" : "light";
663+
let _theme = urlParams.get("theme");
664+
if (_theme === "system") {
665+
_theme = window.matchMedia("(prefers-color-scheme: dark)").matches
666+
? "dark"
667+
: "light";
668+
}
669+
const colorScheme = _theme === "dark" ? "dark" : "light";
664670
const primaryColor = urlParams.get("primaryColor") || "purple";
665671
const secondaryColor = urlParams.get("secondaryColor") || "orange";
666672

0 commit comments

Comments
 (0)