From 78d474e03c829af728d7354c54d10edc99d24cb2 Mon Sep 17 00:00:00 2001
From: SethBurkart123 <hi25S.burkart@hills.adventist.edu.au>
Date: Wed, 13 Dec 2023 20:38:09 +1100
Subject: [PATCH] fix occassional light flash when loading seqta

---
 src/SEQTA.ts            | 11 +++++------
 src/seqta/ui/Loading.ts | 22 +++++++++++++++++++++-
 2 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/SEQTA.ts b/src/SEQTA.ts
index 48273bac..edc98f42 100644
--- a/src/SEQTA.ts
+++ b/src/SEQTA.ts
@@ -716,15 +716,15 @@ function main(storedSetting: SettingsState) {
     if (DarkMode) {
       document.documentElement.classList.add('dark');
     }
-
-    InjectStyles();
-    InjectCustomIcons();
-    loading();
+    
     updateAllColors(storedSetting);
+    InjectStyles();
+    loading();
+    InjectCustomIcons();
     HideMenuItems();
     CheckLoadOnPeriods();
     tryLoad();
-
+    
     window.addEventListener('load', tryLoad);
   } else {
     handleDisabled()
@@ -870,7 +870,6 @@ function addExtensionSettings() {
 
 function saveNewOrder(sortable: any) {
   var order = sortable.toArray();
-  console.log("Order: ", order);
   browser.storage.local.set({ menuorder: order });
 }
 
diff --git a/src/seqta/ui/Loading.ts b/src/seqta/ui/Loading.ts
index fbac1fbe..a0c93768 100644
--- a/src/seqta/ui/Loading.ts
+++ b/src/seqta/ui/Loading.ts
@@ -20,8 +20,28 @@ export function AppendLoadingSymbol(givenID: any, position: any) {
 export default function loading() {
   let loadinghtml = stringToHTML(
     String.raw`
-    <div class="bkloading" id="loading" style="background-color: var(--theme-secondary, var(--background-secondary)); color: var(--text-primary); width: 100%;overflow: hidden;opacity: 1;transition: 1s;height: 100%;transition: color 1ms linear, opacity 1s ease-in-out;top: 0;position: absolute;left: 0;z-index: 1000000;">
+    <div class="bkloading" id="loading">
     <style>
+      .bkloading {
+        transition: color 1ms linear, opacity 1s ease-in-out;
+        background-color: rgb(229, 231, 235);
+        color: black;
+        width: 100%;
+        overflow: hidden;
+        opacity: 1;
+        transition: 1s;
+        height: 100%;
+        z-index: 1000000;
+        position: absolute;
+        left: 0;
+        top: 0;
+      }
+
+      .dark .bkloading {
+        background-color: rgb(26, 26, 26);
+        color: white;
+      }
+
       .svg {
         transform-origin: center;
         position: absolute;