From 2d8f99f86bee37c07f0d33f3fb76a03942469483 Mon Sep 17 00:00:00 2001
From: Pleromian <66706-pleromian@users.noreply.git.pleroma.social>
Date: Mon, 6 Jan 2025 01:08:17 +0100
Subject: [PATCH 1/3] Add theme3 body class helper

---
 changelog.d/theme3-body-class.add |  1 +
 src/App.js                        | 26 ++++++++++++++++++++++++++
 2 files changed, 27 insertions(+)
 create mode 100644 changelog.d/theme3-body-class.add

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

From dc65bbc0514a6a8140345053733d34c468c185f9 Mon Sep 17 00:00:00 2001
From: Pleromian <66706-pleromian@users.noreply.git.pleroma.social>
Date: Sun, 13 Apr 2025 21:16:09 +0200
Subject: [PATCH 2/3] Fetch theme info from @meta

---
 src/App.js              | 8 +++++++-
 src/stores/interface.js | 6 ++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/App.js b/src/App.js
index d1628f34f..611a40cf7 100644
--- a/src/App.js
+++ b/src/App.js
@@ -87,7 +87,13 @@ export default {
       return useInterfaceStore().themeApplied
     },
     currentTheme () {
-      return this.mergedConfig.style || this.$store.state.instance.style
+      if (useInterfaceStore().styleDataUsed) {
+        const themeName = useInterfaceStore().styleDataUsed.find(x => x.component === '@meta').directives.name
+
+        return themeName.replaceAll(" ", "-").toLowerCase()
+      } else {
+        return 'stock'
+      }
     },
     layoutModalClass () {
       return '-' + this.layoutType
diff --git a/src/stores/interface.js b/src/stores/interface.js
index c8fc40392..b2aa9d8e6 100644
--- a/src/stores/interface.js
+++ b/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 = (() => {

From 7981473b23466c8dbd97b02f7932eb4ee3773748 Mon Sep 17 00:00:00 2001
From: Pleromian <66706-pleromian@users.noreply.git.pleroma.social>
Date: Sun, 13 Apr 2025 21:26:14 +0200
Subject: [PATCH 3/3] Guard against missing meta section

---
 src/App.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/App.js b/src/App.js
index 611a40cf7..013ea323c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -88,12 +88,14 @@ export default {
     },
     currentTheme () {
       if (useInterfaceStore().styleDataUsed) {
-        const themeName = useInterfaceStore().styleDataUsed.find(x => x.component === '@meta').directives.name
+        const styleMeta = useInterfaceStore().styleDataUsed.find(x => x.component === '@meta')
 
-        return themeName.replaceAll(" ", "-").toLowerCase()
-      } else {
-        return 'stock'
+        if (styleMeta !== undefined) {
+          return styleMeta.directives.name.replaceAll(" ", "-").toLowerCase()
+        }
       }
+
+      return 'stock'
     },
     layoutModalClass () {
       return '-' + this.layoutType