diff --git a/changelog.d/theme3-body-class.add b/changelog.d/theme3-body-class.add new file mode 100644 index 000000000..f3d36fd70 --- /dev/null +++ b/changelog.d/theme3-body-class.add @@ -0,0 +1 @@ +Indicate currently active V3 theme as a body element class diff --git a/src/App.js b/src/App.js index 6bb9ba04b..d1628f34f 100644 --- a/src/App.js +++ b/src/App.js @@ -52,6 +52,9 @@ export default { themeApplied () { this.removeSplash() }, + currentTheme () { + this.setThemeBodyClass() + }, layoutType () { document.getElementById('modal').classList = ['-' + this.layoutType] } @@ -71,6 +74,7 @@ export default { this.scrollParent.addEventListener('scroll', this.updateScrollState) if (useInterfaceStore().themeApplied) { + this.setThemeBodyClass() this.removeSplash() } }, @@ -82,6 +86,9 @@ export default { themeApplied () { return useInterfaceStore().themeApplied }, + currentTheme () { + return this.mergedConfig.style || this.$store.state.instance.style + }, layoutModalClass () { return '-' + this.layoutType }, @@ -172,6 +179,25 @@ export default { this.$refs.appContentRef.classList.remove(['-scrolled']) } }, + setThemeBodyClass () { + const themeName = this.currentTheme + const classList = Array.from(document.body.classList) + const oldTheme = classList.filter(c => c.startsWith('theme-')) + + if (themeName !== null && themeName !== '') { + const newTheme = `theme-${themeName.toLowerCase()}` + + // remove old theme reference if there are any + if (oldTheme.length) { + document.body.classList.replace(oldTheme[0], newTheme) + } else { + document.body.classList.add(newTheme) + } + } else { + // remove theme reference if non-V3 theme is used + document.body.classList.remove(...oldTheme) + } + }, removeSplash () { document.querySelector('#status').textContent = this.$t('splash.fun_' + Math.ceil(Math.random() * 4)) const splashscreenRoot = document.querySelector('#splash')