bug fixes to help with build

src/SEQTA.ts

@@ -30,6 +30,10 @@ import stringToHTML from './seqta/utils/stringToHTML'
 import { updateAllColors } from './seqta/ui/colors/Manager'
 import { updateBgDurations } from './seqta/ui/Animation'
 
+/* import injected from 'url:./css/injected.scss';
+ */ /* import documentLoad from 'url:./css/documentload.scss'; */
+
+
 declare global {
   interface Window {
     chrome?: any
@@ -62,8 +66,18 @@ document.addEventListener(
       import('./css/injected.scss')
       import('./css/documentload.scss')
 
-        /* const link = GetCSSElement()
-      document.getElementsByTagName('html')[0].appendChild(link); */
+      /* const injectedCSS = document.createElement('link')
+      injectedCSS.setAttribute('rel', 'stylesheet')
+      injectedCSS.setAttribute('type', 'text/css')
+      injectedCSS.setAttribute('href', injected) */
+
+      /* const documentLoadCSS = document.createElement('link')
+      documentLoadCSS.setAttribute('rel', 'stylesheet')
+      documentLoadCSS.setAttribute('type', 'text/css')
+      documentLoadCSS.setAttribute('href', documentLoad) */
+
+      /* document.head.appendChild(documentLoadCSS) */
+      /* document.head.appendChild(injectedCSS) */
 
       enableCurrentTheme()
       try {

src/css/injected.scss

@@ -525,7 +525,7 @@ div > ol:has(.uiFileHandlerWrapper) {
 #menu ul {
   width: 280px; // TODO: I know its 10px larger than its parent, but for some reason there is a 10px right padding that doesn't show up properly in devtools???
 }
-.student #menu > ul::before {
+/* .student #menu > ul::before {
   background-image: url(data-url:../resources/icons/betterseqta-dark-full.png);
   position: -webkit-sticky;
   position: sticky;
@@ -536,7 +536,7 @@ div > ol:has(.uiFileHandlerWrapper) {
 }
 .dark .student #menu > ul::before {
   background-image: url(data-url:../resources/icons/betterseqta-light-full.png);
-}
+} */
 
 .assessmentsWrapper .message {
   display: none;
@@ -685,12 +685,9 @@ div > ol:has(.uiFileHandlerWrapper) {
   left: 0;
   width: 100%;
 }
-.dark #title::before {
-  background-image: url(data-url:../resources/icons/betterseqta-light-full.png);
-}
 
 #title::before {
-  background-image: url(data-url:../resources/icons/betterseqta-dark-full.png);
+  background-image: var(--betterseqta-logo);
   background-position: left;
   background-repeat: no-repeat;
   background-size: auto 48px;
@@ -1682,7 +1679,7 @@ li.MessageList__unread___3imtO {
   content: "";
   width: 14px;
   height: 12px;
-  background-image: url("data-url:../resources/icons/betterseqta-light-outline.png");
+  background-image: url("../resources/icons/betterseqta-light-outline.png");
   display: inline-block;
   background-size: 18px 18px;
   color: #fff;

src/seqta/ui/colors/Manager.ts

@@ -4,6 +4,8 @@ import { lightenAndPaleColor } from './lightenAndPaleColor';
 import ColorLuminance from './ColorLuminance';
 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
@@ -37,9 +39,12 @@ export function updateAllColors(storedSetting: any, newColor = null) {
   // Mode-based properties, applied if storedSetting is provided
   let modeProps = {};
   if (DarkMode !== null) {
-    if (!DarkMode) {
-      modeProps = { '--better-pale': lightenAndPaleColor(selectedColor) };
-    }
+    modeProps = DarkMode ? {
+      '--betterseqta-logo': `url(${darkLogo})`
+    } : {
+      '--better-pale': lightenAndPaleColor(selectedColor),
+      '--betterseqta-logo': `url(${lightLogo})`
+    };
 
     if (DarkMode) {
       document.documentElement.style.removeProperty('--better-pale');