fix: iframe theming

package.json

@@ -15,10 +15,10 @@
   "author": "",
   "license": "MIT",
   "devDependencies": {
-    "@parcel/config-webextension": "^2.10.3",
+    "@parcel/config-webextension": "^2.11.0",
     "@parcel/optimizer-data-url": "^2.11.0",
     "@parcel/transformer-inline-string": "^2.11.0",
-    "@parcel/transformer-sass": "^2.11.0",
+    "@parcel/transformer-sass": "2.11.0",
     "assert": "^2.0.0",
     "browserify-zlib": "^0.2.0",
     "crypto-browserify": "^3.12.0",

src/SEQTA.ts

@@ -24,10 +24,10 @@ import browser from 'webextension-polyfill'
 import coursesicon from './seqta/icons/coursesIcon'
 import { delay } from "./seqta/utils/delay"
 import { enableCurrentTheme } from './seqta/ui/Themes'
-import iframeCSS from "url:./css/iframe.scss"
+import iframeCSS from "bundle-text:./css/iframe.scss"
 import { onError } from './seqta/utils/onError'
 import stringToHTML from './seqta/utils/stringToHTML'
-import { updateAllColors } from './seqta/ui/colors/Manager'
+import { getDarkMode, updateAllColors } from './seqta/ui/colors/Manager'
 import { updateBgDurations } from './seqta/ui/Animation'
 
 declare global {
@@ -413,6 +413,7 @@ function removeThemeTagsFromNotices () {
 async function updateIframesWithDarkMode(): Promise<void> {
   // Load the CSS file to overwrite iFrame default CSS
   const cssLink = document.createElement('style')
+  cssLink.classList.add('iframecss')
   const cssContent = document.createTextNode(iframeCSS)
   cssLink.appendChild(cssContent)
 
@@ -423,16 +424,14 @@ async function updateIframesWithDarkMode(): Promise<void> {
           const iframe = node as HTMLIFrameElement
           try {
             const settings = await browser.storage.local.get('DarkMode') as SettingsState
-            if (settings.DarkMode) {
-              applyDarkModeToIframe(iframe, cssLink)
-            }
+            applyDarkModeToIframe(iframe, cssLink, settings.DarkMode);
           } catch (error) {
             console.error('Error applying dark mode:', error)
           }
         }
       }
     }
-  })
+  });
 
   if (document.body) {
     observer.observe(document.body, {
@@ -449,17 +448,14 @@ async function updateIframesWithDarkMode(): Promise<void> {
   }
 }
 
-function applyDarkModeToIframe(iframe: HTMLIFrameElement, cssLink: HTMLStyleElement): void {
+function applyDarkModeToIframe(iframe: HTMLIFrameElement, cssLink: HTMLStyleElement, DarkMode: boolean): void {
   const iframeDocument = iframe.contentDocument
   if (!iframeDocument) return
 
-  const body = iframeDocument.body
-  if (body && body.style.color !== 'white') {
-    body.style.color = 'white'
-  }
+  if (DarkMode) iframeDocument.body.classList.add('dark')
 
   const head = iframeDocument.head
-  if (head && !head.innerHTML.includes('iframe.css')) {
+  if (head && !head.innerHTML.includes('iframecss')) {
     head.appendChild(cssLink)
   }
 }

src/css/iframe.scss

@@ -15,89 +15,99 @@
  * along with EvenBetterSEQTA.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-html, p, div, span {
-  color: white !important;
-  text-shadow: 1px 1px 2px #161616, 0 0 1em #161616;
+ body {
+  background: transparent;
 }
 
-body {
-  background-color: transparent !important;
-}
+.dark {
+  p,
+  div,
+  span {
+    color: white !important;
+    text-shadow: 1px 1px 2px #161616, 0 0 1em #161616;
+  }
 
-blockquote.forward > .preamble {
-  color: rgba(255, 255, 255, 0.7) !important;
-  
-  > .date > .value, blockquote.forward > .preamble > .sender > .value {
+  body {
+    background-color: transparent !important;
+  }
+
+  blockquote.forward > .preamble {
+    color: rgba(255, 255, 255, 0.7) !important;
+
+    > p,
+    div,
+    span {
+      background: transparent !important;
+    }
+
+    > .date > .value,
+    blockquote.forward > .preamble > .sender > .value {
+      color: rgba(255, 255, 255, 0.7) !important;
+    }
+
+    > .date > .label,
+    blockquote.forward > .preamble > .sender > .label {
+      color: rgba(255, 255, 255, 0.7) !important;
+    }
+  }
+
+  [bgcolor="#ffffff"] > * {
+    color: black !important;
+    text-shadow: none !important;
+  }
+
+  table th {
+    background-color: #161616;
+  }
+
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+    transition: 1s;
+  }
+
+  ::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 10rem !important;
+  }
+
+  ::-webkit-scrollbar-corner {
+    background: none;
+  }
+
+  .forward {
+    border-radius: 1rem;
+  }
+
+  .preamble {
+    border-top-left-radius: 1rem;
+    border-top-right-radius: 1rem;
+  }
+
+  blockquote.forward > .preamble {
     color: rgba(255, 255, 255, 0.7) !important;
   }
-  
-  > .date > .label, blockquote.forward > .preamble > .sender > .label {
+
+  blockquote.forward > .preamble > .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 {
     color: rgba(255, 255, 255, 0.7) !important;
   }
-}
 
-[bgcolor="#ffffff"] {
-  color: black;
-}
+  #backgroundTable > * {
+    background-color: #161616;
+    border: none;
+  }
 
-table th {
-  background-color: #161616;
-}
-
-::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-  transition: 1s;
-}
-
-::-webkit-scrollbar-track {
-  background-color: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  border-radius: 10rem !important;
-}
-
-::-webkit-scrollbar-corner {
-  background: none;
-}
-
-.forward {
-  border-radius: 1rem;
-}
-
-.preamble {
-  border-top-left-radius: 1rem;
-  border-top-right-radius: 1rem;
-}
-
-html, p, div, span {
-  color: white !important;
-  background-color: #232323
-}
-body {
-  background-color: #232323;
-}
-blockquote.forward > .preamble {
-  color: rgba(255, 255, 255, 0.7) !important;
-}
-
-blockquote.forward > .preamble > .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 {
-  color: rgba(255, 255, 255, 0.7) !important;
-}
-
-#backgroundTable > * {
-  background-color: #161616;
-  border: none;
-}
-
-.userHTML>div>a:not(.resource) {
-	color: #06b4fc;
-	text-decoration: underline;
-	transition: text-shadow 0.5s;
+  .userHTML > div > a:not(.resource) {
+    color: #06b4fc;
+    text-decoration: underline;
+    transition: text-shadow 0.5s;
+  }
 }

src/css/iframe.ts

@@ -1 +0,0 @@
-import './iframe.scss';

src/seqta/ui/colors/Manager.ts

@@ -6,7 +6,6 @@ import { SettingsState } from '../../../types/storage';
 
 import darkLogo from 'url:../../../resources/icons/betterseqta-light-full.png';
 import lightLogo from 'url:../../../resources/icons/betterseqta-dark-full.png';
-import iFrameCSS from 'url:../../../css/iframe.scss';
 
 // Helper functions
 const setCSSVar = (varName: any, value: any) => document.documentElement.style.setProperty(varName, value);
@@ -71,7 +70,6 @@ export function updateAllColors(storedSetting: any, newColor = null) {
   }
 
   let alliframes = document.getElementsByTagName('iframe');
-  let fileref = iFrameCSS;
 
   for (let i = 0; i < alliframes.length; i++) {
     const element = alliframes[i];
@@ -80,11 +78,11 @@ export function updateAllColors(storedSetting: any, newColor = null) {
       continue;
     }
     
-    (element.contentDocument!.documentElement.childNodes[1] as HTMLIFrameElement).style.color =
-      DarkMode ? 'white' : 'black';
-    element.contentDocument!.documentElement.firstChild!.appendChild(
-      fileref,
-    );
+    if (DarkMode) {
+      element.contentDocument?.body.classList.add('dark');
+    } else {
+      element.contentDocument?.body.classList.remove('dark');
+    }
   }
 }