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);