feat(settings): Add light mode support to buttons in settings menu

src/css/injected.scss

@@ -257,7 +257,16 @@ ul.magicDelete > li.deleting {
   background: transparent !important;
   color: var(--text-color) !important;
 }
+#media-container {
+  width: 100%;
+  height: 100%;
+}
 
+#media-container video, #media-container img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
 #menu li,
 #menu section {
   margin: 8px auto !important;

src/seqta/ui/AddBetterSEQTAElements.ts

@@ -17,7 +17,7 @@ export async function AddBetterSEQTAElements() {
     handleStudentData();
     createNewsButton();
     setupEventListeners();
-    appendBackgroundToUI();
+    await appendBackgroundToUI();
     await addDarkLightToggle();
     customizeMenuToggle();
   }

src/seqta/ui/ImageBackgrounds.ts

@@ -2,14 +2,6 @@ import { getDataById, isIndexedDBSupported } from '@/svelte-interface/hooks/Back
 
 export async function appendBackgroundToUI() {
   const parent = document.getElementById('container');
-
-  // embed background.html - old method
-  /* const background = document.createElement('iframe');
-  background.id = 'background';
-  background.classList.add('imageBackground');
-  background.setAttribute('excludeDarkCheck', 'true');
-  background.src = browser.runtime.getURL('seqta/ui/background/background.html');
-  parent!.appendChild(background); */
   if (!parent) return;
 
   const backgroundContainer = document.createElement('div');
@@ -21,25 +13,8 @@ export async function appendBackgroundToUI() {
   backgroundContainer.appendChild(mediaContainer);
 
   parent.appendChild(backgroundContainer);
-
-  // Add styles
-  const style = document.createElement('style');
-  style.textContent = `
-    #media-container {
-      width: 100%;
-      height: 100%;
-    }
-
-    #media-container video, #media-container img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-  `;
-  document.head.appendChild(style);
-
-  // Load and display the background
   await loadBackground();
+  return;
 }
 
 export async function loadBackground() {

src/svelte-interface/pages/settings/shortcuts.svelte

@@ -104,7 +104,7 @@
       transition={springTransition}
     >
       <button
-        class="w-full px-4 py-2 mb-4 text-[13px] text-white transition rounded-xl bg-zinc-700/50"
+        class="w-full px-4 py-2 mb-4 text-[13px] dark:text-white transition rounded-xl bg-zinc-200 dark:bg-zinc-700/50"
         onclick={isFormVisible ? addNewCustomShortcut : toggleForm}
       >
         {#if isFormVisible}

src/svelte-interface/pages/settings/theme.svelte

@@ -13,8 +13,8 @@
 <div class="py-4">
   <button
     onclick={() => selectNoBackground()}
-    class="w-full px-4 py-2 mb-4 text-[13px] text-white transition rounded-xl bg-zinc-700/50">
-    { clearTheme ? 'Clear Theme' : 'Select Theme' }
+    class="w-full px-4 py-2 mb-4 text-[13px] dark:text-white transition rounded-xl bg-zinc-200 dark:bg-zinc-700/50">
+    { clearTheme ? 'Clear Theme' : 'Select a Theme' }
   </button>
   <BackgroundSelector isEditMode={editMode} bind:selectedBackground={selectedBackground} bind:selectNoBackground={selectNoBackground} />
   <ThemeSelector isEditMode={editMode} />