From 645333cad04881989d7a53e2ebd15ecaf18b7cc7 Mon Sep 17 00:00:00 2001
From: sethburkart123 <seth.burkart@hills.adventist.edu.au>
Date: Sun, 9 Jun 2024 13:30:46 +1000
Subject: [PATCH] fix: darkmode not applying correctly

---
 src/seqta/ui/colors/Manager.ts              | 24 ++++++++++-----------
 src/seqta/utils/listeners/StorageChanges.ts |  5 +++++
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/seqta/ui/colors/Manager.ts b/src/seqta/ui/colors/Manager.ts
index eedf0390..c070b83f 100644
--- a/src/seqta/ui/colors/Manager.ts
+++ b/src/seqta/ui/colors/Manager.ts
@@ -32,20 +32,18 @@ export function updateAllColors(storedSetting: any, newColor = null) {
 
   // Mode-based properties, applied if storedSetting is provided
   let modeProps = {};
-  if (settingsState.DarkMode) {
-    modeProps = settingsState.DarkMode ? {
-      '--betterseqta-logo': `url(${browser.runtime.getURL(darkLogo)})`
-    } : {
-      '--better-pale': lightenAndPaleColor(selectedColor),
-      '--betterseqta-logo': `url(${browser.runtime.getURL(lightLogo)})`
-    };
+  modeProps = settingsState.DarkMode ? {
+    '--betterseqta-logo': `url(${browser.runtime.getURL(darkLogo)})`
+  } : {
+    '--better-pale': lightenAndPaleColor(selectedColor),
+    '--betterseqta-logo': `url(${browser.runtime.getURL(lightLogo)})`
+  };
 
-    if (settingsState.DarkMode) {
-      document.documentElement.style.removeProperty('--better-pale');
-      document.documentElement.classList.add('dark');
-    } else {
-      document.documentElement.classList.remove('dark');
-    }
+  if (settingsState.DarkMode) {
+    document.documentElement.style.removeProperty('--better-pale');
+    document.documentElement.classList.add('dark');
+  } else {
+    document.documentElement.classList.remove('dark');
   }
 
   // Dynamic properties, always applied
diff --git a/src/seqta/utils/listeners/StorageChanges.ts b/src/seqta/utils/listeners/StorageChanges.ts
index 864a0398..0b01499f 100644
--- a/src/seqta/utils/listeners/StorageChanges.ts
+++ b/src/seqta/utils/listeners/StorageChanges.ts
@@ -21,6 +21,7 @@ export class StorageChangeHandler {
   private registerHandlers() {
     console.log(settingsState.onoff);
     settingsState.register('selectedColor', this.handleSelectedColorChange.bind(this));
+    settingsState.register('DarkMode', this.handleDarkModeChange.bind(this));
     settingsState.register('onoff', this.handleOnOffChange.bind(this));
     settingsState.register('shortcuts', this.handleShortcutsChange.bind(this));
     settingsState.register('customshortcuts', this.handleCustomShortcutsChange.bind(this));
@@ -30,6 +31,10 @@ export class StorageChangeHandler {
     settingsState.register('transparencyEffects', this.handleTransparencyEffectsChange.bind(this));
   }
 
+  private handleDarkModeChange() {
+    updateAllColors(settingsState.selectedColor);
+  }
+
   private handleSelectedColorChange(newColor: any) {
     try {
       updateAllColors(newColor);