Merge branch 'theme3-body-class' into 'develop'

Add theme3 body class helper

See merge request pleroma/pleroma-fe!1966

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,17 @@ export default {
     themeApplied () {
       return useInterfaceStore().themeApplied
     },
+    currentTheme () {
+      if (useInterfaceStore().styleDataUsed) {
+        const styleMeta = useInterfaceStore().styleDataUsed.find(x => x.component === '@meta')
+
+        if (styleMeta !== undefined) {
+          return styleMeta.directives.name.replaceAll(" ", "-").toLowerCase()
+        }
+      }
+
+      return 'stock'
+    },
     layoutModalClass () {
       return '-' + this.layoutType
     },
@@ -172,6 +187,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')

src/stores/interface.js

@@ -521,16 +521,18 @@ export const useInterfaceStore = defineStore('interface', {
         theme3hacks
       } = window.vuex.state.config
       this.themeChangeInProgress = true
-      // If we're not not forced to recompile try using
+      // If we're not forced to recompile try using
       // cache (tryLoadCache return true if load successful)
 
       const forceRecompile = forceThemeRecompilation || recompile
+
+      await this.getThemeData()
+
       if (!forceRecompile && !themeDebug && await tryLoadCache()) {
         this.themeChangeInProgress = false
         return this.setThemeApplied()
       }
       window.splashUpdate('splash.theme')
-      await this.getThemeData()
 
       try {
         const paletteIss = (() => {