Detect theme mode for embedded applications

dapp/src/DApp.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { ChakraProvider, Button, Box } from "@chakra-ui/react"
-import { useEmbedFeatureFlag } from "./hooks"
+import { useEmbedFeatureFlag, useDetectThemeMode } from "./hooks"
 import { LedgerWalletAPIProvider } from "./providers"
 import { getThemeConfig } from "./theme/utils/utils"
 import theme from "./theme/index"
@@ -32,8 +32,7 @@ function DApp() {
 }
 
 function DAppProviders() {
-  const params = new URLSearchParams(window.location.search)
-  const themeMode = params.get("theme")
+  const themeMode = useDetectThemeMode()
 
   return (
     <ChakraProvider

dapp/src/constants/local-storage.ts

@@ -1,2 +1,2 @@
-// eslint-disable-next-line import/prefer-default-export
 export const LOCAL_STORAGE_EMBED = "embed"
+export const LOCAL_STORAGE_CHAKRA_COLOR_MODE = "chakra-ui-color-mode"

dapp/src/hooks/helpers-hooks.ts

@@ -0,0 +1,16 @@
+import { useEffect } from "react"
+import { LOCAL_STORAGE_CHAKRA_COLOR_MODE } from "../constants"
+
+// eslint-disable-next-line import/prefer-default-export
+export function useDetectThemeMode(): string | null {
+  const params = new URLSearchParams(window.location.search)
+  const themeMode = params.get("theme")
+
+  useEffect(() => {
+    // For the ledger live app, we should clear the localStorage and set the theme mode again.
+    // As a result, we will detect an update when a user's settings change in the live ledger.
+    if (themeMode) localStorage.removeItem(LOCAL_STORAGE_CHAKRA_COLOR_MODE)
+  }, [themeMode])
+
+  return themeMode
+}

dapp/src/hooks/index.ts

@@ -1,2 +1,3 @@
 export * from "./dom-hooks"
 export * from "./feature-hooks"
+export * from "./helpers-hooks"