From c312281317bc99b6e7ba2699fa2850b7a4427df7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rcia=20Esteves?=
 <43220251+MEsteves22@users.noreply.github.com>
Date: Fri, 5 Apr 2024 17:53:41 +0100
Subject: [PATCH] chore: fix charts theme not updating in app

---
 apps/app/src/pages/layout/navigation.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/apps/app/src/pages/layout/navigation.tsx b/apps/app/src/pages/layout/navigation.tsx
index af7990e19a..ca102861f2 100644
--- a/apps/app/src/pages/layout/navigation.tsx
+++ b/apps/app/src/pages/layout/navigation.tsx
@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import { Outlet } from "react-router-dom";
 import { HvProvider, useTheme } from "@hitachivantara/uikit-react-core";
 
@@ -24,6 +25,13 @@ const Navigation = () => {
     setCurrentStep,
   } = useGeneratorContext();
 
+  // Hack to update the charts theme
+  const theme = useMemo(() => {
+    const cusTheme = structuredClone(customTheme);
+    cusTheme.name = Math.random().toString();
+    return cusTheme;
+  }, [customTheme]);
+
   return (
     <div
       id="gen-root"
@@ -33,7 +41,7 @@ const Navigation = () => {
         classNameKey="gen-root"
         rootElementId="gen-root"
         cssTheme="scoped"
-        themes={[customTheme]}
+        themes={[theme]}
         colorMode={selectedMode}
         cssBaseline="none" // the main provider already applies the baseline styles globally
       >