fix: lock dark mode toggle with theme settings

src/seqta/ui/AddBetterSEQTAElements.ts

@@ -4,6 +4,7 @@ import { appendBackgroundToUI } from "./ImageBackgrounds";
 import stringToHTML from "../utils/stringToHTML";
 import { settingsState } from "../utils/listeners/SettingsState";
 import { updateAllColors } from "./colors/Manager";
+import { delay } from "../utils/delay";
 
 export async function AddBetterSEQTAElements() {
   if (settingsState.onoff) {    
@@ -247,11 +248,22 @@ async function addDarkLightToggle() {
   updateAllColors();
   
   document.getElementById('LightDarkModeButton')!.addEventListener('click', async () => {
+    const darklightText = document.getElementById('darklighttooliptext');
+
+    if (settingsState.originalDarkMode) {
+      darklightText!.innerText = 'Locked by current theme';
+
+      await delay(1000)
+
+      darklightText!.innerText = GetLightDarkModeString();
+
+      return
+    }
+    
     settingsState.DarkMode = !settingsState.DarkMode;
     
     updateAllColors();
     
-    const darklightText = document.getElementById('darklighttooliptext');
     darklightText!.innerText = GetLightDarkModeString();
   });
 }

src/seqta/ui/themes/applyTheme.ts

@@ -3,14 +3,15 @@ import { settingsState } from '../../utils/listeners/SettingsState';
 import { applyCustomCSS } from './Themes';
 
 
-export const applyTheme = async (theme: CustomTheme) => {
+export const applyTheme = async (theme: CustomTheme, reEnable?: boolean) => {
   let CustomCSS = '';
   let CustomImages: CustomImage[] = [];
 
   if (theme?.CustomCSS) CustomCSS = theme.CustomCSS;
   if (theme?.CustomImages) CustomImages = theme.CustomImages;
-  if (theme?.forceDark) {
-    settingsState.originalDarkMode = settingsState.DarkMode
+  if (theme?.forceDark != undefined) {
+    if (!reEnable) settingsState.originalDarkMode = settingsState.DarkMode
+
     settingsState.DarkMode = theme.forceDark
   }
 

src/seqta/ui/themes/enableCurrent.ts

@@ -8,7 +8,7 @@ export const enableCurrentTheme = async () => {
   if (settingsState.selectedTheme) {
     const theme = await localforage.getItem(settingsState.selectedTheme) as CustomTheme;
     if (theme) {
-      await applyTheme(theme);
+      await applyTheme(theme, true);
     }
   }
 };