diff --git a/src/scripts/libs/settings.js b/src/scripts/libs/settings.js index 67bc5855..a505f331 100644 --- a/src/scripts/libs/settings.js +++ b/src/scripts/libs/settings.js @@ -628,7 +628,7 @@ export default class Settings { valueElem.textContent = this.getSettingListDisplayText(setting) if(setting.name === 'theme') { - this.ambientlight.theming.updateTheme() + this.ambientlight.theming.updateTheme(true) return } diff --git a/src/scripts/libs/theming.js b/src/scripts/libs/theming.js index 7396f2fb..85e3817d 100644 --- a/src/scripts/libs/theming.js +++ b/src/scripts/libs/theming.js @@ -14,18 +14,18 @@ export default class Theming { initListeners() { // Appearance (theme) changes initiated by the YouTube menu - this.originalTheme = this.isDarkTheme() ? 1 : -1 + this.youtubeTheme = this.isDarkTheme() ? 1 : -1 on(document, 'yt-action', async (e) => { if (!this.settings.enabled) return const name = e?.detail?.actionName if (name === 'yt-signal-action-toggle-dark-theme-off') { - this.originalTheme = await this.prefCookieToTheme() + this.youtubeTheme = await this.prefCookieToTheme() this.updateTheme() } else if(name === 'yt-signal-action-toggle-dark-theme-on') { - this.originalTheme = await this.prefCookieToTheme() + this.youtubeTheme = await this.prefCookieToTheme() this.updateTheme() } else if(name === 'yt-signal-action-toggle-dark-theme-device') { - this.originalTheme = await this.prefCookieToTheme() + this.youtubeTheme = await this.prefCookieToTheme() this.updateTheme() } else if(name === 'yt-forward-redux-action-to-live-chat-iframe') { // Let YouTube change the theme to an incorrect color in this process @@ -45,13 +45,13 @@ export default class Theming { for(const change of e.changed) { if(change.name !== 'PREF') continue - this.originalTheme = await this.prefCookieToTheme(change.value) + this.youtubeTheme = await this.prefCookieToTheme(change.value) this.updateTheme() } }, true)); } matchMedia('(prefers-color-scheme: dark)').addEventListener('change', wrapErrorHandler(async () => { - this.originalTheme = await this.prefCookieToTheme() + this.youtubeTheme = await this.prefCookieToTheme() this.updateTheme() }, true)) } catch(ex) { @@ -72,7 +72,7 @@ export default class Theming { attributeFilter: ['dark'] }) - this.initLiveChat() // Depends on this.originalTheme set in initListeners + this.initLiveChat() // Depends on this.youtubeTheme set in initListeners } prefCookieToTheme = async (cookieValue) => { @@ -95,7 +95,9 @@ export default class Theming { isDarkTheme = () => (html.getAttribute('dark') !== null) shouldBeDarkTheme = () => { - const toTheme = ((!this.settings.enabled || this.ambientlight.isHidden || this.settings.theme === THEME_DEFAULT) ? this.originalTheme : this.settings.theme) + const toTheme = (!this.settings.enabled || this.ambientlight.isHidden || this.settings.theme === THEME_DEFAULT) + ? this.youtubeTheme + : this.settings.theme return (toTheme === THEME_DARK) } @@ -107,9 +109,12 @@ export default class Theming { ) } - updateTheme = wrapErrorHandler(async function updateTheme() { - if(this.updatingTheme) return - if(!this.shouldToggleTheme()) return + updateTheme = wrapErrorHandler(async function updateTheme(fromSettings = false) { + if( + this.updatingTheme || + (!fromSettings && this.settings.theme === THEME_DEFAULT) || + !this.shouldToggleTheme() + ) return this.updatingTheme = true