Add theme3 body class helper

changelog.d/theme3-body-class.add

@@ -0,0 +1 @@
+Indicate currently active V3 theme as a body element class

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