fixed build

micro-frontends/sample/package.json

@@ -10,10 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "i18next": "^23.11.5",
-
-    "i18next-http-backend": "^2.5.2",
-    "idb": "^8.0.0",
+    "i18next": "23.11.5",
+    "axios":"1.7.2",
+    "i18next-http-backend": "2.5.2",
+    "idb": "8.0.0",
     "react": "19.0.0-beta-26f2496093-20240514",
     "react-dom": "19.0.0-beta-26f2496093-20240514",
     "react-hook-form": "7.52.0",

micro-frontends/sample/src/examples/Theme.jsx

@@ -1,14 +1,24 @@
-import { createContext, useState, use } from 'react';
+import { createContext, useState, use,useEffect } from 'react';
 
 export const ThemeContext = createContext();
 
 const ThemeProvider = ({ children }) => {
-  const [theme, setTheme] = useState('light');
+  const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light');
+
+  useEffect(() => {
+    localStorage.setItem('theme', theme);
+    if (theme === 'dark') {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  }, [theme]);
 
   const toggleTheme = () => {
-    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
+    setTheme(theme === 'light' ? 'dark' : 'light');
   };
 
+
   return (
     <ThemeContext.Provider value={{ theme, toggleTheme }}>
       {children}
@@ -29,18 +39,15 @@ const Card = ({ children }) => {
 
   return (
     <div
-      className={`max-w-l mx-auto rounded-lg p-6 ${
-        theme === 'light' ? 'bg-gray-100' : 'bg-gray-800'
-      }`}
+      className={`max-w-l mx-auto rounded-lg p-6
+       bg-white dark:bg-gray-800`}
     >
       <h1
-        className={`text-2xl my-3 ${
-          theme === 'light' ? 'text-gray-800' : 'text-white'
-        }`}
+        className={`text-2xl my-3  text-black dark:text-white`}
       >
         Theme Card
       </h1>
-      <p className={theme === 'light' ? 'text-gray-800' : 'text-white'}>
+      <p className={ 'text-black dark:text-white'}>
        Hello!! use() hook
       </p>
       {children}

micro-frontends/sample/tailwind.config.js

@@ -2,6 +2,8 @@
 const themeSwapper = require('tailwindcss-theme-swapper')
 
 export default {
+  darkMode: 'class', // Enable dark mode based on a class
+
   content: [
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",