fix: add dark-theme to iframes that has srcDoc attribute (#112)

changelog.d/20241205_224820_hina.khadim_dark_theme_course_handouts.md

@@ -0,0 +1 @@
+- [BugFix] Add dark-theme for Course Handouts and Course Updates that appears on Learning MFE Course Outline Page (by @hinakhadim)

tutorindigo/templates/indigo/env.config.jsx

@@ -23,12 +23,49 @@ const AddDarkTheme = () => {
     return options;
   };
 
+  const addDarkThemeToIframes = () => {
+    const iframes = document.getElementsByTagName('iframe');
+    const iframesLength = iframes.length;
+    if (iframesLength > 0) {
+      Array.from({ length: iframesLength }).forEach((_, index) => {
+        const style = document.createElement('style');
+        style.textContent = `
+          body{
+            background-color: #0D0D0E;
+            color: #ccc;
+          }
+          a {color: #ccc;}
+          a:hover{color: #d3d3d3;}
+          `;
+        if (iframes[index].contentDocument) { iframes[index].contentDocument.head.appendChild(style); }
+      });
+    }
+  };
+
   useEffect(() => {
-    const theme =  cookies.get(themeCookie);
+    const theme = cookies.get(themeCookie);
+
+    // - When page loads, Footer loads before MFE content. Since there is no iframe on page,
+    // it does not append any class. MutationObserver observes changes in DOM and hence appends dark
+    // attributes when iframe is added. After 15 sec, this observer is destroyed to conserve resources. 
+    // - It has been added outside dark-theme condition so that it can be removed on Component Unmount.
+    // - Observer can be passed to `addDarkThemeToIframes` function and disconnected after observing Iframe.
+    // This approach has a limitation: the observer first detects the iframe and then detects the docSrc. 
+    // We need to wait for docSrc to fully load before appending the style tag.
+    const observer = new MutationObserver(() => {
+      addDarkThemeToIframes();
+    });
+
     if (isThemeToggleEnabled && theme === 'dark') {
       document.body.classList.add('indigo-dark-theme');
+
+      observer.observe(document.body, { childList: true, subtree: true });
+      setTimeout(() => observer?.disconnect(), 15000); // clear after 15 sec to avoid resource usage
+
       cookies.set(themeCookie, theme, getCookieOptions());      //  on page load, update expiry
     }
+
+    return () => observer?.disconnect();
   }, []);
 
   return (<div />);