From adb4fa4e700770f8bd2bcbf48ed892e359e3d74b Mon Sep 17 00:00:00 2001
From: Hina Khadim <hina.khadim@arbisoft.com>
Date: Fri, 6 Dec 2024 12:32:07 +0500
Subject: [PATCH] fix: add dark-theme to iframes that has srcDoc attribute
 (#112)

---
 ..._hina.khadim_dark_theme_course_handouts.md |  1 +
 tutorindigo/templates/indigo/env.config.jsx   | 39 ++++++++++++++++++-
 2 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 changelog.d/20241205_224820_hina.khadim_dark_theme_course_handouts.md

diff --git a/changelog.d/20241205_224820_hina.khadim_dark_theme_course_handouts.md b/changelog.d/20241205_224820_hina.khadim_dark_theme_course_handouts.md
new file mode 100644
index 00000000..e262f50a
--- /dev/null
+++ b/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)
\ No newline at end of file
diff --git a/tutorindigo/templates/indigo/env.config.jsx b/tutorindigo/templates/indigo/env.config.jsx
index 035e3b0f..ca3b7044 100644
--- a/tutorindigo/templates/indigo/env.config.jsx
+++ b/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 />);