fix css not being applied to iframes

src/SEQTA.ts

@@ -402,74 +402,47 @@ function removeThemeTagsFromNotices () {
   }
 }
 
-function CheckiFrameItems() {
+async function updateIframesWithDarkMode(): Promise<void> {
-  // Injecting CSS File to the webpage to overwrite iFrame default CSS
+  // Load the CSS file to overwrite iFrame default CSS
-  const fileref = document.createElement('link')
+  const cssLink = document.createElement('style');
-  fileref.setAttribute('rel', 'stylesheet')
+  const cssContent = document.createTextNode(iframeCSS);
-  fileref.setAttribute('type', 'text/css')
+  cssLink.appendChild(cssContent);
-  fileref.innerHTML = iframeCSS
 
-  const observer = new MutationObserver(function (mutations_list) {
+  const observer = new MutationObserver(async (mutationsList) => {
-    mutations_list.forEach(function (mutation) {
+    for (const mutation of mutationsList) {
-      mutation.addedNodes.forEach(function (added_node) {
+      for (const node of mutation.addedNodes) {
-        const node = added_node as HTMLElement
+        if (node.nodeName === 'IFRAME') {
-        if (node.tagName == 'IFRAME') {
+          const iframe = node as HTMLIFrameElement;
-          const result = browser.storage.local.get('DarkMode') as Promise<SettingsState>;
+          try {
-          function open (result: any) {
+            const settings = await browser.storage.local.get('DarkMode') as SettingsState;
-            DarkMode = result.DarkMode;
+            if (settings.DarkMode) {
-            const node = added_node as HTMLIFrameElement
+              //await delay(1);
-            if (DarkMode) {
+              applyDarkModeToIframe(iframe, cssLink);
-              RunColourCheck(node);
+            }
-              const childNode = node.contentDocument!.documentElement.childNodes[1] as HTMLElement
+          } catch (error) {
-              if (
+            console.error('Error applying dark mode:', error);
-                childNode.style
-                  .color != 'white'
-              ) {
-                childNode.style.color =
-                  'white';
           }
-              const innerHTMLNode = node.contentDocument!.documentElement.firstChild! as HTMLElement
-              if (
-                !innerHTMLNode.innerHTML.includes(
-                  'iframe.css',
-                )
-              ) {
-                innerHTMLNode.append(
-                  fileref,
-                );
-              }
-              node.addEventListener('load', function () {
-                const childNode = node.contentDocument!.documentElement.childNodes[1] as HTMLElement
-                const innerHTMLNode = node.contentDocument!.documentElement.firstChild! as HTMLElement
-                if (
-                  childNode.style
-                    .color != 'white'
-                ) {
-                  childNode.style.color =
-                    'white';
-                }
-                if (
-                  !innerHTMLNode.innerHTML.includes(
-                    'iframe.css',
-                  )
-                ) {
-                  innerHTMLNode.append(
-                    fileref,
-                  );
-                }
-              });
         }
       }
-          result.then(open, onError)
     }
-      });
-    });
   });
 
-  observer.observe(document.body, {
+  observer.observe(document.body, { subtree: true, childList: true });
-    subtree: true,
+}
-    childList: true,
+
-  });
+function applyDarkModeToIframe(iframe: HTMLIFrameElement, cssLink: HTMLStyleElement): void {
+  const iframeDocument = iframe.contentDocument;
+  if (!iframeDocument) return;
+
+  const body = iframeDocument.body;
+  if (body && body.style.color !== 'white') {
+    body.style.color = 'white';
+  }
+
+  const head = iframeDocument.head;
+  if (head && !head.innerHTML.includes('iframe.css')) {
+    head.appendChild(cssLink);
+  }
 }
 
 function SortMessagePageItems(messagesParentElement: any) {
@@ -612,7 +585,7 @@ export function tryLoad() {
   document.addEventListener(
     'load',
     function () {
-      CheckiFrameItems();
+      updateIframesWithDarkMode();
       removeThemeTagsFromNotices();
       documentTextColor();
     },
@@ -1639,14 +1612,15 @@ function callHomeTimetable(date: string, change?: any) {
           });
         }
       } else {
-        if (DayContainer.innerHTML || change) {
+        console.log(DayContainer);
-          DayContainer.innerHTML = '';
+        if (DayContainer.innerText || change) {
+          DayContainer.innerText = '';
           var dummyDay = document.createElement('div');
           dummyDay.classList.add('day-empty');
           let img = document.createElement('img');
           img.src = browser.runtime.getURL('icons/betterseqta-light-icon.png');
           let text = document.createElement('p');
-          text.innerHTML = 'No lessons available.';
+          text.innerText = 'No lessons available.';
           dummyDay.append(img);
           dummyDay.append(text);
           DayContainer.append(dummyDay);

src/css/iframe.scss

@@ -26,15 +26,19 @@ body {
 
 blockquote.forward > .preamble {
   color: rgba(255, 255, 255, 0.7) !important;
-}
   
-blockquote.forward > .preamble > .date > .value, blockquote.forward > .preamble > .sender > .value {
+  > .date > .value, blockquote.forward > .preamble > .sender > .value {
     color: rgba(255, 255, 255, 0.7) !important;
   }
   
-blockquote.forward > .preamble > .date > .label, blockquote.forward > .preamble > .sender > .label {
+  > .date > .label, blockquote.forward > .preamble > .sender > .label {
     color: rgba(255, 255, 255, 0.7) !important;
   }
+}
+
+[bgcolor="#ffffff"] {
+  color: black;
+}
 
 table th {
   background-color: #161616;