fix: add dark-theme to iframes that has srcDoc attribute

tutorindigo/templates/indigo/env.config.jsx

@@ -23,10 +23,39 @@ const AddDarkTheme = () => {
     return options;
   };
 
+  const addDarkThemeToIframes = () => {
+    const iframes = document.getElementsByTagName('iframe');
+    const iframesLength = iframes.length;
+    if (iframesLength > 0) {
+      Array.from({ length: iframesLength }).forEach((_, ind) => {
+        const style = document.createElement('style');
+        style.textContent = `
+          body{
+            background-color: #0D0D0E;
+            color: #ccc;
+          }
+          a {color: #ccc;}
+          a:hover{color: #d3d3d3;}
+          `;
+        if (iframes[ind].contentDocument) { iframes[ind].contentDocument.head.appendChild(style); }
+      });
+    }
+  };
+
   useEffect(() => {
-    const theme =  cookies.get(themeCookie);
+    const theme = cookies.get(themeCookie);
     if (isThemeToggleEnabled && theme === 'dark') {
       document.body.classList.add('indigo-dark-theme');
+
+      // When page load, Footer load before than MFE content which says that there is no iframe on page
+      // hence, not append any class. MutationObserver observes changes in DOM and hence appended dark
+      // attributes when iframe added. After 10 sec, we destroy this observer.
+      const observer = new MutationObserver(() => {
+        addDarkThemeToIframes();
+      });
+      observer.observe(document.body, { childList: true, subtree: true });
+      setTimeout(() => observer.disconnect(), 10000); // clear after 10 sec to avoid resource usage
+
       cookies.set(themeCookie, theme, getCookieOptions());      //  on page load, update expiry
     }
   }, []);
@@ -64,4 +93,4 @@ const config = {
   },
 };
 
-export default config;
+export default config;