fix: iframes not enabling dark mdoe

src/SEQTA.ts

@@ -24,7 +24,7 @@ import browser from 'webextension-polyfill'
 import coursesicon from './seqta/icons/coursesIcon'
 import { delay } from "./seqta/utils/delay"
 import { enableCurrentTheme } from './seqta/ui/Themes'
-import * as iframeCSS from "bundle-text:./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'
@@ -455,7 +455,14 @@ function applyDarkModeToIframe(iframe: HTMLIFrameElement, cssLink: HTMLStyleElem
   const iframeDocument = iframe.contentDocument
   if (!iframeDocument) return
 
-  if (DarkMode) iframeDocument.body.classList.add('dark')
+  if (iframeDocument.readyState !== 'complete') {
+    iframe.onload = () => {
+      applyDarkModeToIframe(iframe, cssLink, DarkMode)
+    }
+    return
+  }
+  
+  if (DarkMode) iframeDocument.documentElement.classList.add('dark')
 
   const head = iframeDocument.head
   if (head && !head.innerHTML.includes('iframecss')) {
@@ -521,8 +528,6 @@ async function LoadPageElements(): Promise<void> {
         } else if (node.classList.contains('dashboard')) {
           let ranOnce = false;
           waitForElm('.dashlet').then(() => {
-            if (ranOnce) return;
-            ranOnce = true;
             animate(
               '.dashboard > *',
               { opacity: [0, 1], y: [10, 0] },
@@ -532,6 +537,8 @@ async function LoadPageElements(): Promise<void> {
                 easing: [.22, .03, .26, 1]  
               }
             )
+            if (ranOnce) return;
+            ranOnce = true;
           })
         } else if (node.classList.contains('documents')) {
           let ranOnce = false;

src/css/iframe.scss

@@ -22,7 +22,8 @@
 .dark {
   p,
   div,
-  span {
+  span,
+  body {
     color: white !important;
     text-shadow: 1px 1px 2px #161616, 0 0 1em #161616;
   }

src/css/injected.scss

@@ -318,6 +318,9 @@ ol:has(.MessageList__avatar___2wxyb svg) {
   border: none !important;
   border-radius: 16px !important;
 }
+.actions .uiButton {
+  color: var(--text-primary) !important;
+}
 .singleSelect {
   border-radius: 16px !important;
   padding: 4px !important;
@@ -1515,6 +1518,17 @@ div.bar.flat {
   z-index: 10;
 }
 
+.dashlet {
+  .cke_contents {
+    background: var(--background-secondary) !important;
+  }
+
+  .cke_button,
+  .cke_combo_button {
+    background: var(--background-secondary) !important;
+  }
+}
+
 .formattedText > .wrapper > .cke > .cke_inner > .cke_contents {
   background: var(--background-primary);
   border-radius: 1rem;
@@ -1582,6 +1596,13 @@ div.bar.flat {
 .cke_toolbox > .cke_toolbar .cke_button_on {
   background-color: #797979 !important;
 }
+.dark {
+  .cke_toolbox > .cke_toolbar .cke_combo_on > .cke_combo_button,
+  .cke_toolbox > .cke_toolbar .cke_button_on {
+    background-color: #3d3d3e !important;
+  }
+
+}
 .legacy-root input.singleSelect:focus {
   background: var(--auto-background);
   color: var(--text-primary) !important;