feature/IO-1113-Online-Dark-Mode - Initial Commit

client/src/App/App.container.jsx

@@ -2,14 +2,14 @@ import { ApolloProvider } from "@apollo/client";
 import { SplitFactoryProvider, useSplitClient } from "@splitsoftware/splitio-react";
 import { ConfigProvider } from "antd";
 import enLocale from "antd/es/locale/en_US";
-import { useEffect } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
 import GlobalLoadingBar from "../components/global-loading-bar/global-loading-bar.component";
 import client from "../utils/GraphQLClient";
 import App from "./App";
 import * as Sentry from "@sentry/react";
-import themeProvider from "./themeProvider";
+import getTheme from "./themeProvider";
 import { CookiesProvider } from "react-cookie";
 
 // Base Split configuration
@@ -24,19 +24,24 @@ const config = {
 function SplitClientProvider({ children }) {
   const imexshopid = useSelector((state) => state.user.imexshopid); // Access imexshopid from Redux store
   const splitClient = useSplitClient({ key: imexshopid || "anon" }); // Use imexshopid or fallback to "anon"
-
   useEffect(() => {
     if (splitClient && imexshopid) {
-      // Log readiness for debugging; no need for ready() since isReady is available
       console.log(`Split client initialized with key: ${imexshopid}, isReady: ${splitClient.isReady}`);
     }
   }, [splitClient, imexshopid]);
-
   return children;
 }
 
 function AppContainer() {
   const { t } = useTranslation();
+  const [isDarkMode, setIsDarkMode] = useState(true); // Manage dark mode state
+  const theme = useMemo(() => getTheme(isDarkMode), [isDarkMode]); // Memoize theme
+
+  // Set data-theme attribute on document root
+  useEffect(() => {
+    document.documentElement.setAttribute("data-theme", isDarkMode ? "dark" : "light");
+    return () => document.documentElement.removeAttribute("data-theme"); // Cleanup
+  }, [isDarkMode]);
 
   return (
     <CookiesProvider>
@@ -44,10 +49,9 @@ function AppContainer() {
         <ConfigProvider
           input={{ autoComplete: "new-password" }}
           locale={enLocale}
-          theme={themeProvider}
+          theme={theme}
           form={{
             validateMessages: {
-              // eslint-disable-next-line no-template-curly-in-string
               required: t("general.validation.required", { label: "${label}" })
             }
           }}
@@ -56,6 +60,10 @@ function AppContainer() {
           <SplitFactoryProvider config={config}>
             <SplitClientProvider>
               <App />
+              {/* Optional: Button to toggle dark mode for testing */}
+              <button onClick={() => setIsDarkMode(!isDarkMode)}>
+                {t("general.toggleDarkMode")}
+              </button>
             </SplitClientProvider>
           </SplitFactoryProvider>
         </ConfigProvider>