diff --git a/package-lock.json b/package-lock.json
index 417ff779b2e..cc7094d2c46 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,7 @@
         "@nextcloud/upload": "^1.5.0",
         "@nextcloud/vue": "^8.17.1",
         "@vueuse/components": "^11.0.3",
+        "@vueuse/core": "^11.0.1",
         "blurhash": "^2.0.5",
         "crypto-js": "^4.2.0",
         "debounce": "^2.1.0",
@@ -3540,6 +3541,53 @@
         "vue": "^2.7.16"
       }
     },
+    "node_modules/@nextcloud/dialogs/node_modules/@vueuse/core": {
+      "version": "10.11.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.11.1.tgz",
+      "integrity": "sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.20",
+        "@vueuse/metadata": "10.11.1",
+        "@vueuse/shared": "10.11.1",
+        "vue-demi": ">=0.14.8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@nextcloud/dialogs/node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@nextcloud/dialogs/node_modules/@vueuse/metadata": {
+      "version": "10.11.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.11.1.tgz",
+      "integrity": "sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/@nextcloud/eslint-config": {
       "version": "8.4.1",
       "resolved": "https://registry.npmjs.org/@nextcloud/eslint-config/-/eslint-config-8.4.1.tgz",
@@ -3860,6 +3908,53 @@
         "vue": "^2.7.16"
       }
     },
+    "node_modules/@nextcloud/upload/node_modules/@vueuse/core": {
+      "version": "10.11.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.11.1.tgz",
+      "integrity": "sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.20",
+        "@vueuse/metadata": "10.11.1",
+        "@vueuse/shared": "10.11.1",
+        "vue-demi": ">=0.14.8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@nextcloud/upload/node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@nextcloud/upload/node_modules/@vueuse/metadata": {
+      "version": "10.11.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.11.1.tgz",
+      "integrity": "sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/@nextcloud/vue": {
       "version": "8.17.1",
       "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-8.17.1.tgz",
@@ -3947,89 +4042,6 @@
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.0.tgz",
       "integrity": "sha512-MFETx3tbTjE7Uk6vvnWINA/1iJ7LuMdO4fcq8UfF0pRbj01aGLduVvQcRyswuACJdpnHgg8E3rQLhaRdNEJS0w=="
     },
-    "node_modules/@nextcloud/vue/node_modules/@vueuse/core": {
-      "version": "11.0.1",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-11.0.1.tgz",
-      "integrity": "sha512-YTrekI18WwEyP3h168Fir94G/HNC27wvXJI21Alm0sPOwvhihfkrvHIe+5PNJq+MpgWdRcsjvE/38JaoKrgZhQ==",
-      "dependencies": {
-        "@types/web-bluetooth": "^0.0.20",
-        "@vueuse/metadata": "11.0.1",
-        "@vueuse/shared": "11.0.1",
-        "vue-demi": ">=0.14.10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/@nextcloud/vue/node_modules/@vueuse/core/node_modules/vue-demi": {
-      "version": "0.14.10",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
-      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
-      "hasInstallScript": true,
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@nextcloud/vue/node_modules/@vueuse/metadata": {
-      "version": "11.0.1",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-11.0.1.tgz",
-      "integrity": "sha512-dTFvuHFAjLYOiSd+t9Sk7xUiuL6jbfay/eX+g+jaipXXlwKur2VCqBCZX+jfu+2vROUGcUsdn3fJR9KkpadIOg==",
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/@nextcloud/vue/node_modules/@vueuse/shared": {
-      "version": "11.0.1",
-      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-11.0.1.tgz",
-      "integrity": "sha512-eAPf5CQB3HR0S76HqrhjBqFYstZfiHWZq8xF9EQmobGBkrhPfErJEhr8aMNQMqd6MkENIx2pblIEfJGlHpClug==",
-      "dependencies": {
-        "vue-demi": ">=0.14.10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/@nextcloud/vue/node_modules/@vueuse/shared/node_modules/vue-demi": {
-      "version": "0.14.10",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
-      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
-      "hasInstallScript": true,
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@nextcloud/vue/node_modules/ansi-regex": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
@@ -5309,23 +5321,34 @@
       }
     },
     "node_modules/@vueuse/core": {
-      "version": "10.11.1",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.11.1.tgz",
-      "integrity": "sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==",
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-11.0.1.tgz",
+      "integrity": "sha512-YTrekI18WwEyP3h168Fir94G/HNC27wvXJI21Alm0sPOwvhihfkrvHIe+5PNJq+MpgWdRcsjvE/38JaoKrgZhQ==",
       "dependencies": {
         "@types/web-bluetooth": "^0.0.20",
-        "@vueuse/metadata": "10.11.1",
-        "@vueuse/shared": "10.11.1",
-        "vue-demi": ">=0.14.8"
+        "@vueuse/metadata": "11.0.1",
+        "@vueuse/shared": "11.0.1",
+        "vue-demi": ">=0.14.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/@vueuse/shared": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-11.0.1.tgz",
+      "integrity": "sha512-eAPf5CQB3HR0S76HqrhjBqFYstZfiHWZq8xF9EQmobGBkrhPfErJEhr8aMNQMqd6MkENIx2pblIEfJGlHpClug==",
+      "dependencies": {
+        "vue-demi": ">=0.14.10"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/@vueuse/core/node_modules/vue-demi": {
-      "version": "0.14.8",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.8.tgz",
-      "integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==",
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
       "hasInstallScript": true,
       "bin": {
         "vue-demi-fix": "bin/vue-demi-fix.js",
@@ -5348,9 +5371,9 @@
       }
     },
     "node_modules/@vueuse/metadata": {
-      "version": "10.11.1",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.11.1.tgz",
-      "integrity": "sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==",
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-11.0.1.tgz",
+      "integrity": "sha512-dTFvuHFAjLYOiSd+t9Sk7xUiuL6jbfay/eX+g+jaipXXlwKur2VCqBCZX+jfu+2vROUGcUsdn3fJR9KkpadIOg==",
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
@@ -23461,6 +23484,32 @@
         "toastify-js": "^1.12.0",
         "vue-frag": "^1.4.3",
         "webdav": "^5.7.1"
+      },
+      "dependencies": {
+        "@vueuse/core": {
+          "version": "10.11.1",
+          "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.11.1.tgz",
+          "integrity": "sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==",
+          "requires": {
+            "@types/web-bluetooth": "^0.0.20",
+            "@vueuse/metadata": "10.11.1",
+            "@vueuse/shared": "10.11.1",
+            "vue-demi": ">=0.14.8"
+          },
+          "dependencies": {
+            "vue-demi": {
+              "version": "0.14.10",
+              "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+              "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+              "requires": {}
+            }
+          }
+        },
+        "@vueuse/metadata": {
+          "version": "10.11.1",
+          "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.11.1.tgz",
+          "integrity": "sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw=="
+        }
       }
     },
     "@nextcloud/eslint-config": {
@@ -23674,6 +23723,30 @@
             "vue-frag": "^1.4.3",
             "webdav": "^5.7.1"
           }
+        },
+        "@vueuse/core": {
+          "version": "10.11.1",
+          "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.11.1.tgz",
+          "integrity": "sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==",
+          "requires": {
+            "@types/web-bluetooth": "^0.0.20",
+            "@vueuse/metadata": "10.11.1",
+            "@vueuse/shared": "10.11.1",
+            "vue-demi": ">=0.14.8"
+          },
+          "dependencies": {
+            "vue-demi": {
+              "version": "0.14.10",
+              "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+              "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+              "requires": {}
+            }
+          }
+        },
+        "@vueuse/metadata": {
+          "version": "10.11.1",
+          "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.11.1.tgz",
+          "integrity": "sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw=="
         }
       }
     },
@@ -23749,46 +23822,6 @@
           "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.0.tgz",
           "integrity": "sha512-MFETx3tbTjE7Uk6vvnWINA/1iJ7LuMdO4fcq8UfF0pRbj01aGLduVvQcRyswuACJdpnHgg8E3rQLhaRdNEJS0w=="
         },
-        "@vueuse/core": {
-          "version": "11.0.1",
-          "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-11.0.1.tgz",
-          "integrity": "sha512-YTrekI18WwEyP3h168Fir94G/HNC27wvXJI21Alm0sPOwvhihfkrvHIe+5PNJq+MpgWdRcsjvE/38JaoKrgZhQ==",
-          "requires": {
-            "@types/web-bluetooth": "^0.0.20",
-            "@vueuse/metadata": "11.0.1",
-            "@vueuse/shared": "11.0.1",
-            "vue-demi": ">=0.14.10"
-          },
-          "dependencies": {
-            "vue-demi": {
-              "version": "0.14.10",
-              "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
-              "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
-              "requires": {}
-            }
-          }
-        },
-        "@vueuse/metadata": {
-          "version": "11.0.1",
-          "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-11.0.1.tgz",
-          "integrity": "sha512-dTFvuHFAjLYOiSd+t9Sk7xUiuL6jbfay/eX+g+jaipXXlwKur2VCqBCZX+jfu+2vROUGcUsdn3fJR9KkpadIOg=="
-        },
-        "@vueuse/shared": {
-          "version": "11.0.1",
-          "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-11.0.1.tgz",
-          "integrity": "sha512-eAPf5CQB3HR0S76HqrhjBqFYstZfiHWZq8xF9EQmobGBkrhPfErJEhr8aMNQMqd6MkENIx2pblIEfJGlHpClug==",
-          "requires": {
-            "vue-demi": ">=0.14.10"
-          },
-          "dependencies": {
-            "vue-demi": {
-              "version": "0.14.10",
-              "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
-              "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
-              "requires": {}
-            }
-          }
-        },
         "ansi-regex": {
           "version": "6.0.1",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
@@ -24812,28 +24845,36 @@
       }
     },
     "@vueuse/core": {
-      "version": "10.11.1",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.11.1.tgz",
-      "integrity": "sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==",
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-11.0.1.tgz",
+      "integrity": "sha512-YTrekI18WwEyP3h168Fir94G/HNC27wvXJI21Alm0sPOwvhihfkrvHIe+5PNJq+MpgWdRcsjvE/38JaoKrgZhQ==",
       "requires": {
         "@types/web-bluetooth": "^0.0.20",
-        "@vueuse/metadata": "10.11.1",
-        "@vueuse/shared": "10.11.1",
-        "vue-demi": ">=0.14.8"
+        "@vueuse/metadata": "11.0.1",
+        "@vueuse/shared": "11.0.1",
+        "vue-demi": ">=0.14.10"
       },
       "dependencies": {
+        "@vueuse/shared": {
+          "version": "11.0.1",
+          "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-11.0.1.tgz",
+          "integrity": "sha512-eAPf5CQB3HR0S76HqrhjBqFYstZfiHWZq8xF9EQmobGBkrhPfErJEhr8aMNQMqd6MkENIx2pblIEfJGlHpClug==",
+          "requires": {
+            "vue-demi": ">=0.14.10"
+          }
+        },
         "vue-demi": {
-          "version": "0.14.8",
-          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.8.tgz",
-          "integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==",
+          "version": "0.14.10",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+          "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
           "requires": {}
         }
       }
     },
     "@vueuse/metadata": {
-      "version": "10.11.1",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.11.1.tgz",
-      "integrity": "sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw=="
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-11.0.1.tgz",
+      "integrity": "sha512-dTFvuHFAjLYOiSd+t9Sk7xUiuL6jbfay/eX+g+jaipXXlwKur2VCqBCZX+jfu+2vROUGcUsdn3fJR9KkpadIOg=="
     },
     "@vueuse/shared": {
       "version": "10.11.1",
diff --git a/package.json b/package.json
index dd069dab0a9..8a57fb6e294 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "@nextcloud/upload": "^1.5.0",
     "@nextcloud/vue": "^8.17.1",
     "@vueuse/components": "^11.0.3",
+    "@vueuse/core": "^11.0.1",
     "blurhash": "^2.0.5",
     "crypto-js": "^4.2.0",
     "debounce": "^2.1.0",
diff --git a/src/components/AvatarWrapper/AvatarWrapper.vue b/src/components/AvatarWrapper/AvatarWrapper.vue
index 273eeecba67..80909f1d10b 100644
--- a/src/components/AvatarWrapper/AvatarWrapper.vue
+++ b/src/components/AvatarWrapper/AvatarWrapper.vue
@@ -20,7 +20,7 @@
 			:alt="name"
 			class="avatar icon">
 		<NcAvatar v-else
-			:key="id"
+			:key="id + (isDarkTheme ? '-dark' : '-light')"
 			:user="id"
 			:display-name="name"
 			:menu-container="menuContainerWithFallback"
@@ -52,9 +52,9 @@ import { t } from '@nextcloud/l10n'
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 
+import { useIsDarkTheme } from '../../composables/useIsDarkTheme.ts'
 import { ATTENDEE, AVATAR } from '../../constants.js'
 import { getUserProxyAvatarOcsUrl } from '../../services/avatarService.ts'
-import { isDarkTheme } from '../../utils/isDarkTheme.js'
 
 export default {
 
@@ -133,6 +133,14 @@ export default {
 			default: false,
 		},
 	},
+
+	setup() {
+		const isDarkTheme = useIsDarkTheme()
+		return {
+			isDarkTheme,
+		}
+	},
+
 	computed: {
 		// Determines which icon is displayed
 		iconClass() {
@@ -159,7 +167,7 @@ export default {
 		},
 		avatarClass() {
 			return {
-				'avatar-wrapper--dark': isDarkTheme,
+				'avatar-wrapper--dark': this.isDarkTheme,
 				'avatar-wrapper--offline': this.offline,
 				'avatar-wrapper--condensed': this.condensed,
 				'avatar-wrapper--highlighted': this.highlighted,
@@ -197,7 +205,7 @@ export default {
 			return this.menuContainer ?? this.$store.getters.getMainContainerSelector()
 		},
 		avatarUrl() {
-			return getUserProxyAvatarOcsUrl(this.token, this.id, isDarkTheme, this.size > AVATAR.SIZE.MEDIUM ? 512 : 64)
+			return getUserProxyAvatarOcsUrl(this.token, this.id, this.isDarkTheme, this.size > AVATAR.SIZE.MEDIUM ? 512 : 64)
 		},
 	},
 
diff --git a/src/components/ConversationIcon.vue b/src/components/ConversationIcon.vue
index 82372abbc28..069972eb772 100644
--- a/src/components/ConversationIcon.vue
+++ b/src/components/ConversationIcon.vue
@@ -31,7 +31,7 @@
 		<!-- Using key on NcAvatar forces NcAvatar re-mount and solve the problem, could not really optimal -->
 		<!-- TODO: Check if props update support in NcAvatar is more performant -->
 		<NcAvatar v-else
-			:key="item.token"
+			:key="item.token + (isDarkTheme ? '-dark' : '-light')"
 			:size="size"
 			:user="item.name"
 			:disable-menu="disableMenu"
@@ -62,10 +62,10 @@ import { t } from '@nextcloud/l10n'
 
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 
+import { useIsDarkTheme } from '../composables/useIsDarkTheme.ts'
 import { AVATAR, CONVERSATION } from '../constants.js'
 import { getConversationAvatarOcsUrl } from '../services/avatarService.ts'
 import { hasTalkFeature } from '../services/CapabilitiesManager.ts'
-import { isDarkTheme } from '../utils/isDarkTheme.js'
 
 const supportsAvatar = hasTalkFeature('local', 'avatar')
 
@@ -133,6 +133,14 @@ export default {
 		},
 	},
 
+	setup() {
+		const isDarkTheme = useIsDarkTheme()
+
+		return {
+			isDarkTheme,
+		}
+	},
+
 	computed: {
 		showCall() {
 			return !this.hideCall && this.item.hasCall
@@ -209,7 +217,7 @@ export default {
 		},
 
 		themeClass() {
-			return `conversation-icon--${isDarkTheme ? 'dark' : 'bright'}`
+			return `conversation-icon--${this.isDarkTheme ? 'dark' : 'bright'}`
 		},
 
 		isOneToOne() {
@@ -218,9 +226,9 @@ export default {
 
 		conversationType() {
 			if (this.item.remoteServer) {
-				return { icon: WebIcon, label: t('spreed', 'Federated conversation') }
+				return { key: 'federated', icon: WebIcon, label: t('spreed', 'Federated conversation') }
 			} else if (this.item.type === CONVERSATION.TYPE.PUBLIC) {
-				return { icon: LinkVariantIcon, label: t('spreed', 'Public conversation') }
+				return { key: 'public', icon: LinkVariantIcon, label: t('spreed', 'Public conversation') }
 			}
 			return null
 		},
@@ -230,7 +238,7 @@ export default {
 				return undefined
 			}
 
-			return getConversationAvatarOcsUrl(this.item.token, isDarkTheme, this.item.avatarVersion)
+			return getConversationAvatarOcsUrl(this.item.token, this.isDarkTheme, this.item.avatarVersion)
 		},
 	},
 
diff --git a/src/components/ConversationSettings/ConversationAvatarEditor.vue b/src/components/ConversationSettings/ConversationAvatarEditor.vue
index c3956ecb475..c589de5583c 100644
--- a/src/components/ConversationSettings/ConversationAvatarEditor.vue
+++ b/src/components/ConversationSettings/ConversationAvatarEditor.vue
@@ -123,8 +123,8 @@ import NcEmojiPicker from '@nextcloud/vue/dist/Components/NcEmojiPicker.js'
 
 import ConversationIcon from '../ConversationIcon.vue'
 
+import { useIsDarkTheme } from '../../composables/useIsDarkTheme.ts'
 import { AVATAR } from '../../constants.js'
-import { isDarkTheme } from '../../utils/isDarkTheme.js'
 
 // eslint-disable-next-line n/no-extraneous-import
 import 'cropperjs/dist/cropper.css'
@@ -173,7 +173,9 @@ export default {
 	emits: ['avatar-edited'],
 
 	setup() {
+		const isDarkTheme = useIsDarkTheme()
 		return {
+			isDarkTheme,
 			AVATAR,
 			validMimeTypes,
 		}
@@ -209,7 +211,7 @@ export default {
 		},
 
 		themeClass() {
-			return `avatar__preview-emoji--${isDarkTheme ? 'dark' : 'bright'}`
+			return `avatar__preview-emoji--${this.isDarkTheme ? 'dark' : 'bright'}`
 		},
 
 		showControls() {
@@ -220,7 +222,7 @@ export default {
 			return [{
 				label: t('spreed', 'Choose'),
 				callback: (nodes) => this.handleFileChoose(nodes),
-				type: 'primary'
+				type: 'primary',
 			}]
 		},
 	},
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Mention.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Mention.vue
index 6204f721bed..3774dbfe627 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Mention.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Mention.vue
@@ -6,6 +6,7 @@
 <template>
 	<span ref="mention" class="mention">
 		<NcUserBubble v-if="size"
+			:key="isDarkTheme ? 'dark' : 'light'"
 			:display-name="name"
 			:avatar-image="avatarUrl"
 			:user="id"
@@ -19,8 +20,8 @@ import { loadState } from '@nextcloud/initial-state'
 
 import NcUserBubble from '@nextcloud/vue/dist/Components/NcUserBubble.js'
 
+import { useIsDarkTheme } from '../../../../../composables/useIsDarkTheme.ts'
 import { getConversationAvatarOcsUrl, getUserProxyAvatarOcsUrl } from '../../../../../services/avatarService.ts'
-import { isDarkTheme } from '../../../../../utils/isDarkTheme.js'
 
 export default {
 	name: 'Mention',
@@ -52,6 +53,14 @@ export default {
 		},
 	},
 
+	setup() {
+		const isDarkTheme = useIsDarkTheme()
+
+		return {
+			isDarkTheme,
+		}
+	},
+
 	data() {
 		return {
 			size: null,
@@ -101,7 +110,7 @@ export default {
 		avatarUrl() {
 			if (this.isRemoteUser) {
 				return this.token
-					? getUserProxyAvatarOcsUrl(this.token, this.id + '@' + this.server, isDarkTheme, 64)
+					? getUserProxyAvatarOcsUrl(this.token, this.id + '@' + this.server, this.isDarkTheme, 64)
 					: 'icon-user-forced-white'
 			} else if (this.isGroupMention) {
 				return 'icon-group-forced-white'
@@ -111,7 +120,7 @@ export default {
 				return undefined
 			}
 
-			return getConversationAvatarOcsUrl(this.id, isDarkTheme)
+			return getConversationAvatarOcsUrl(this.id, this.isDarkTheme)
 		},
 	},
 
diff --git a/src/components/NewMessage/NewMessage.vue b/src/components/NewMessage/NewMessage.vue
index 9c32a2f5661..eb0b83db8b3 100644
--- a/src/components/NewMessage/NewMessage.vue
+++ b/src/components/NewMessage/NewMessage.vue
@@ -200,6 +200,7 @@ import NewMessagePollEditor from './NewMessagePollEditor.vue'
 import NewMessageTypingIndicator from './NewMessageTypingIndicator.vue'
 import Quote from '../Quote.vue'
 
+import { useIsDarkTheme } from '../../composables/useIsDarkTheme.ts'
 import { ATTENDEE, CONVERSATION, PARTICIPANT, PRIVACY } from '../../constants.js'
 import { getConversationAvatarOcsUrl, getUserProxyAvatarOcsUrl } from '../../services/avatarService.ts'
 import BrowserStorage from '../../services/BrowserStorage.js'
@@ -211,7 +212,6 @@ import { useBreakoutRoomsStore } from '../../stores/breakoutRooms.ts'
 import { useChatExtrasStore } from '../../stores/chatExtras.js'
 import { useSettingsStore } from '../../stores/settings.js'
 import { fetchClipboardContent } from '../../utils/clipboard.js'
-import { isDarkTheme } from '../../utils/isDarkTheme.js'
 import { parseSpecialSymbols } from '../../utils/textParse.ts'
 
 export default {
@@ -289,8 +289,9 @@ export default {
 
 	setup(props) {
 		const supportTypingStatus = getTalkConfig(props.token, 'chat', 'typing-privacy') !== undefined
-
+		const isDarkTheme = useIsDarkTheme()
 		return {
+			isDarkTheme,
 			breakoutRoomsStore: useBreakoutRoomsStore(),
 			chatExtrasStore: useChatExtrasStore(),
 			settingsStore: useSettingsStore(),
@@ -909,7 +910,7 @@ export default {
 				// Set icon for candidate mentions that are not for users.
 				if (possibleMention.source === 'calls') {
 					possibleMention.icon = 'icon-user-forced-white'
-					possibleMention.iconUrl = getConversationAvatarOcsUrl(this.token, isDarkTheme)
+					possibleMention.iconUrl = getConversationAvatarOcsUrl(this.token, this.isDarkTheme)
 					possibleMention.subline = possibleMention?.details ? possibleMention.details : t('spreed', 'Everyone')
 				} else if (possibleMention.source === ATTENDEE.ACTOR_TYPE.GROUPS) {
 					possibleMention.icon = 'icon-group-forced-white'
@@ -919,14 +920,14 @@ export default {
 					possibleMention.subline = t('spreed', 'Guest')
 				} else if (possibleMention.source === ATTENDEE.ACTOR_TYPE.FEDERATED_USERS) {
 					possibleMention.icon = 'icon-user-forced-white'
-					possibleMention.iconUrl = getUserProxyAvatarOcsUrl(this.token, possibleMention.id, isDarkTheme, 64)
+					possibleMention.iconUrl = getUserProxyAvatarOcsUrl(this.token, possibleMention.id, this.isDarkTheme, 64)
 				} else {
 					// The avatar is automatically shown for users, but an icon
 					// is nevertheless required as fallback.
 					possibleMention.icon = 'icon-user-forced-white'
 					if (possibleMention.source === ATTENDEE.ACTOR_TYPE.USERS && possibleMention.id !== possibleMention.mentionId) {
 						// Prevent local users avatars in federated room to be overwritten
-						possibleMention.iconUrl = generateUrl('avatar/{userId}/64' + (isDarkTheme ? '/dark' : '') + '?v=0', { userId: possibleMention.id })
+						possibleMention.iconUrl = generateUrl('avatar/{userId}/64' + (this.isDarkTheme ? '/dark' : '') + '?v=0', { userId: possibleMention.id })
 					}
 					// Convert status properties to an object.
 					if (possibleMention.status) {
diff --git a/src/components/NewMessage/NewMessageAbsenceInfo.vue b/src/components/NewMessage/NewMessageAbsenceInfo.vue
index a150a80b043..2ca64a2c1b2 100644
--- a/src/components/NewMessage/NewMessageAbsenceInfo.vue
+++ b/src/components/NewMessage/NewMessageAbsenceInfo.vue
@@ -19,7 +19,8 @@
 		<div v-if="userAbsence.replacementUserId" class="absence-reminder__replacement">
 			<!-- TRANSLATORS An acting person during the period of absence of the main contact -->
 			<p>{{ t('spreed','Replacement: ') }}</p>
-			<NcUserBubble class="absence-reminder__replacement__bubble"
+			<NcUserBubble :key="isDarkTheme ? 'dark' : 'light'"
+				class="absence-reminder__replacement__bubble"
 				:title="t('spreed','Open conversation')"
 				:display-name="userAbsence.replacementUserDisplayName"
 				:user="userAbsence.replacementUserId"
@@ -48,6 +49,7 @@ import NcUserBubble from '@nextcloud/vue/dist/Components/NcUserBubble.js'
 
 import AvatarWrapper from '../AvatarWrapper/AvatarWrapper.vue'
 
+import { useIsDarkTheme } from '../../composables/useIsDarkTheme.ts'
 import { AVATAR } from '../../constants.js'
 
 export default {
@@ -74,7 +76,11 @@ export default {
 	},
 
 	setup() {
-		return { AVATAR }
+		const isDarkTheme = useIsDarkTheme()
+		return {
+			AVATAR,
+			isDarkTheme,
+		}
 	},
 
 	data() {
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index fbc57b98c88..2081693ceb7 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -5,9 +5,10 @@
 
 <template>
 	<div class="top-bar"
-		:class="{ 'top-bar--sidebar': isSidebar}"
-		:style="topBarStyle"
-		:data-theme-dark="isInCall">
+		:class="{
+			'top-bar--sidebar': isSidebar,
+			'top-bar--in-call': isInCall,
+		}">
 		<ConversationIcon :key="conversation.token"
 			class="conversation-icon"
 			:offline="isPeerInactive"
@@ -17,96 +18,99 @@
 			show-user-online-status
 			:hide-favorite="false"
 			:hide-call="false" />
-		<!-- conversation header -->
-		<a role="button"
-			class="conversation-header"
-			@click="openConversationSettings">
-			<div class="conversation-header__text"
-				:class="{'conversation-header__text--offline': isPeerInactive}">
-				<p class="title">
-					{{ conversation.displayName }}
-				</p>
-				<p v-if="showUserStatusAsDescription"
-					class="description"
-					:class="{'description__in-chat' : !isInCall }">
-					{{ statusMessage }}
-				</p>
-				<template v-if="conversation.description">
-					<p v-tooltip.bottom="{
-							content: renderedDescription,
-							delay: { show: 500, hide: 500 },
-							autoHide: false,
-							html: true,
-						}"
+
+		<div class="top-bar__wrapper" :data-theme-dark="isInCall">
+			<!-- conversation header -->
+			<a role="button"
+				class="conversation-header"
+				@click="openConversationSettings">
+				<div class="conversation-header__text"
+					:class="{'conversation-header__text--offline': isPeerInactive}">
+					<p class="title">
+						{{ conversation.displayName }}
+					</p>
+					<p v-if="showUserStatusAsDescription"
 						class="description"
 						:class="{'description__in-chat' : !isInCall }">
-						{{ conversation.description }}
+						{{ statusMessage }}
 					</p>
+					<template v-if="conversation.description">
+						<p v-tooltip.bottom="{
+								content: renderedDescription,
+								delay: { show: 500, hide: 500 },
+								autoHide: false,
+								html: true,
+							}"
+							class="description"
+							:class="{'description__in-chat' : !isInCall }">
+							{{ conversation.description }}
+						</p>
+					</template>
+				</div>
+			</a>
+
+			<TasksCounter v-if="conversation.type === CONVERSATION.TYPE.NOTE_TO_SELF" />
+
+			<!-- Upcoming event -->
+			<a v-if="showUpcomingEvent"
+				class="upcoming-event"
+				:href="nextEvent.calendarAppUrl"
+				:title="t('spreed', 'Open Calendar')"
+				target="_blank">
+				<div class="icon">
+					<CalendarBlank :size="20" />
+				</div>
+				<div class="event-info">
+					<p class="event-info__header">
+						{{ t('spreed', 'Next call') }}
+					</p>
+					<p> {{ eventInfo }} </p>
+				</div>
+			</a>
+
+			<!-- Call time -->
+			<CallTime v-if="isInCall"
+				:start="conversation.callStartTime" />
+
+			<!-- Participants counter -->
+			<NcButton v-if="isInCall && !isOneToOneConversation && isModeratorOrUser"
+				:title="participantsInCallAriaLabel"
+				:aria-label="participantsInCallAriaLabel"
+				type="tertiary"
+				@click="openSidebar('participants')">
+				<template #icon>
+					<AccountMultiple :size="20" />
 				</template>
-			</div>
-		</a>
-
-		<TasksCounter v-if="conversation.type === CONVERSATION.TYPE.NOTE_TO_SELF" />
-
-		<!-- Upcoming event -->
-		<a v-if="showUpcomingEvent"
-			class="upcoming-event"
-			:href="nextEvent.calendarAppUrl"
-			:title="t('spreed', 'Open Calendar')"
-			target="_blank">
-			<div class="icon">
-				<CalendarBlank :size="20" />
-			</div>
-			<div class="event-info">
-				<p class="event-info__header">
-					{{ t('spreed', 'Next call') }}
-				</p>
-				<p> {{ eventInfo }} </p>
-			</div>
-		</a>
-
-		<!-- Call time -->
-		<CallTime v-if="isInCall"
-			:start="conversation.callStartTime" />
-
-		<!-- Participants counter -->
-		<NcButton v-if="isInCall && !isOneToOneConversation && isModeratorOrUser"
-			:title="participantsInCallAriaLabel"
-			:aria-label="participantsInCallAriaLabel"
-			type="tertiary"
-			@click="openSidebar('participants')">
-			<template #icon>
-				<AccountMultiple :size="20" />
-			</template>
-			{{ participantsInCall }}
-		</NcButton>
-
-		<!-- Reactions menu -->
-		<ReactionMenu v-if="isInCall && hasReactionSupport"
-			:token="token"
-			:supported-reactions="supportedReactions"
-			:local-call-participant-model="localCallParticipantModel" />
-
-		<!-- Local media controls -->
-		<TopBarMediaControls v-if="isInCall"
-			:token="token"
-			:model="localMediaModel"
-			:is-sidebar="isSidebar"
-			:local-call-participant-model="localCallParticipantModel" />
-
-		<!-- TopBar menu -->
-		<TopBarMenu :token="token"
-			:show-actions="!isSidebar"
-			:is-sidebar="isSidebar"
-			:model="localMediaModel"
-			@open-breakout-rooms-editor="showBreakoutRoomsEditor = true" />
-
-		<CallButton shrink-on-mobile :hide-text="isSidebar" :is-screensharing="!!localMediaModel.attributes.localScreen" />
-
-		<!-- Breakout rooms editor -->
-		<BreakoutRoomsEditor v-if="showBreakoutRoomsEditor"
-			:token="token"
-			@close="showBreakoutRoomsEditor = false" />
+				{{ participantsInCall }}
+			</NcButton>
+
+			<!-- Reactions menu -->
+			<ReactionMenu v-if="isInCall && hasReactionSupport"
+				:token="token"
+				:supported-reactions="supportedReactions"
+				:local-call-participant-model="localCallParticipantModel" />
+
+			<!-- Local media controls -->
+			<TopBarMediaControls v-if="isInCall"
+				:token="token"
+				:model="localMediaModel"
+				:is-sidebar="isSidebar"
+				:local-call-participant-model="localCallParticipantModel" />
+
+			<!-- TopBar menu -->
+			<TopBarMenu :token="token"
+				:show-actions="!isSidebar"
+				:is-sidebar="isSidebar"
+				:model="localMediaModel"
+				@open-breakout-rooms-editor="showBreakoutRoomsEditor = true" />
+
+			<CallButton shrink-on-mobile :hide-text="isSidebar" :is-screensharing="!!localMediaModel.attributes.localScreen" />
+
+			<!-- Breakout rooms editor -->
+			<BreakoutRoomsEditor v-if="showBreakoutRoomsEditor"
+				:token="token"
+				@close="showBreakoutRoomsEditor = false" />
+		</div>
 	</div>
 </template>
 
@@ -279,13 +283,6 @@ export default {
 			return this.isInCall && this.supportedReactions?.length > 0
 		},
 
-		topBarStyle() {
-			return {
-				'--original-color-main-text': window.getComputedStyle(document.body).getPropertyValue('--color-main-text'),
-				'--original-color-main-background': window.getComputedStyle(document.body).getPropertyValue('--color-main-background')
-			}
-		},
-
 		nextEvent() {
 			return this.chatExtrasStore.getNextEvent(this.token)
 		},
@@ -365,12 +362,14 @@ export default {
 <style lang="scss" scoped>
 .top-bar {
 	--border-width: 1px;
+
 	display: flex;
 	flex-wrap: wrap;
-	z-index: 10;
 	gap: 3px;
 	align-items: center;
 	justify-content: flex-end;
+
+	z-index: 10;
 	min-height: calc(var(--border-width) + 2 * (2 * var(--default-grid-baseline)) + var(--default-clickable-area));
 	padding-block: var(--default-grid-baseline);
 	// Reserve space for the sidebar toggle button
@@ -378,11 +377,7 @@ export default {
 	background-color: var(--color-main-background);
 	border-bottom: var(--border-width) solid var(--color-border);
 
-	.talk-sidebar-callview & {
-		margin-right: var(--default-clickable-area);
-	}
-
-	&[data-theme-dark="true"] {
+	&--in-call {
 		right: 0;
 		border: none;
 		position: absolute;
@@ -391,6 +386,10 @@ export default {
 		background-color: transparent;
 	}
 
+	.talk-sidebar-callview & {
+		margin-right: var(--default-clickable-area);
+	}
+
 	&--sidebar {
 		padding: calc(2 * var(--default-grid-baseline));
 
@@ -400,6 +399,15 @@ export default {
 	}
 }
 
+.top-bar__wrapper {
+	flex: 1 0;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 3px;
+	align-items: center;
+	justify-content: flex-end;
+}
+
 .conversation-icon {
 	margin-left: 48px;
 }
@@ -442,12 +450,6 @@ export default {
 	}
 }
 
-:deep(.conversation-icon__type) {
-	color: var(--original-color-main-text) !important;
-	border-color: var(--original-color-main-background) !important;
-	background-color: var(--original-color-main-background) !important;
-}
-
 .icon {
 	display: flex;
 }
diff --git a/src/components/TopBar/TopBarMenu.vue b/src/components/TopBar/TopBarMenu.vue
index 50e76a7b845..5f999b88496 100644
--- a/src/components/TopBar/TopBarMenu.vue
+++ b/src/components/TopBar/TopBarMenu.vue
@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<div class="top-bar__wrapper">
+	<div class="top-bar-menu">
 		<TransitionExpand v-if="isInCall" :show="isHandRaised" direction="horizontal">
 			<NcButton v-tooltip="raiseHandButtonLabel"
 				:aria-label="raiseHandButtonLabel"
@@ -530,7 +530,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.top-bar__wrapper {
+.top-bar-menu {
 	display: flex;
 }
 </style>
diff --git a/src/components/UIShared/LoadingPlaceholder.vue b/src/components/UIShared/LoadingPlaceholder.vue
index 5ce753b3dbe..1241262d7ea 100644
--- a/src/components/UIShared/LoadingPlaceholder.vue
+++ b/src/components/UIShared/LoadingPlaceholder.vue
@@ -4,8 +4,7 @@
 -->
 
 <template>
-	<ul :class="'placeholder-list placeholder-list--' + type"
-		:style="{ '--colorPlaceholderLight': colorPlaceholderLight, '--colorPlaceholderDark': colorPlaceholderDark }">
+	<ul :class="'placeholder-list placeholder-list--' + type">
 		<li v-for="(item, index) in placeholderData" :key="index" class="placeholder-item">
 			<div class="placeholder-item__avatar" :style="{ '--avatar-size': item.avatarSize }">
 				<div class="placeholder-item__avatar-circle" />
@@ -21,10 +20,6 @@
 <script>
 import { AVATAR } from '../../constants.js'
 
-const bodyStyles = window.getComputedStyle(document.body)
-const colorPlaceholderDark = bodyStyles.getPropertyValue('--color-placeholder-dark')
-const colorPlaceholderLight = bodyStyles.getPropertyValue('--color-placeholder-light')
-
 export default {
 	name: 'LoadingPlaceholder',
 
@@ -42,13 +37,6 @@ export default {
 		},
 	},
 
-	setup() {
-		return {
-			colorPlaceholderDark,
-			colorPlaceholderLight,
-		}
-	},
-
 	computed: {
 		placeholderData() {
 			const data = []
@@ -172,7 +160,7 @@ export default {
 .placeholder-item__content-line,
 .placeholder-item__info {
 	background-size: 200vw;
-	background-image: linear-gradient(90deg, var(--colorPlaceholderDark) 65%, var(--colorPlaceholderLight) 70%, var(--colorPlaceholderDark) 75%);
+	background-image: linear-gradient(90deg, var(--color-placeholder-dark) 65%, var(--color-placeholder-light) 70%, var(--color-placeholder-dark) 75%);
 	animation: loading-animation 3s forwards infinite linear;
 	will-change: background-position;
 }
diff --git a/src/composables/useIsDarkTheme.ts b/src/composables/useIsDarkTheme.ts
new file mode 100644
index 00000000000..0a348e3a9fa
--- /dev/null
+++ b/src/composables/useIsDarkTheme.ts
@@ -0,0 +1,41 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { createSharedComposable, useMutationObserver, usePreferredDark } from '@vueuse/core'
+import { readonly, ref, watch } from 'vue'
+import type { Ref, DeepReadonly } from 'vue'
+
+import { checkIfDarkTheme } from '../utils/isDarkTheme.ts'
+
+/**
+ * Check whether the dark theme is enabled on a specific element.
+ * If you need to check an entire page, use `useIsDarkTheme` instead.
+ * Reacts on element attributes changes and system theme changes.
+ * @param el - The element to check for the dark theme enabled on
+ * @return {DeepReadonly<Ref<boolean>>} - computed boolean whether the dark theme is enabled
+ */
+export function useIsDarkThemeElement(el: HTMLElement = document.body): DeepReadonly<Ref<boolean>> {
+	const isDarkTheme = ref(checkIfDarkTheme(el))
+	const isDarkSystemTheme = usePreferredDark()
+
+	/** Update the isDarkTheme */
+	function updateIsDarkTheme() {
+		isDarkTheme.value = checkIfDarkTheme(el)
+	}
+
+	// Watch for element changes to handle data-theme* attributes change
+	useMutationObserver(el, updateIsDarkTheme, { attributes: true })
+	// Watch for system theme changes for the default theme
+	watch(isDarkSystemTheme, updateIsDarkTheme, { immediate: true })
+
+	return readonly(isDarkTheme)
+}
+
+/**
+ * Shared composable to check whether the dark theme is enabled on the page.
+ * Reacts on body data-theme-* attributes changes and system theme changes.
+ * @return {DeepReadonly<Ref<boolean>>} - computed boolean whether the dark theme is enabled
+ */
+export const useIsDarkTheme = createSharedComposable(() => useIsDarkThemeElement())
diff --git a/src/utils/isDarkTheme.js b/src/utils/isDarkTheme.js
deleted file mode 100644
index 60ecf120ee0..00000000000
--- a/src/utils/isDarkTheme.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-/**
- * Check if dark theme is used
- *
- * @return {boolean}
- */
-function checkIfDarkTheme() {
-	// Nextcloud uses --background-invert-if-dark for dark theme filters in CSS
-	// Values:
-	// - 'invert(100%)' for dark theme
-	// - 'no' for light theme
-	return window.getComputedStyle(document.body).getPropertyValue('--background-invert-if-dark') === 'invert(100%)'
-}
-
-/**
- * Is Dark Theme enabled
- * We do not support dark/light theme update without reload the page, so the value can be computed once
- *
- * @type {boolean}
- */
-export const isDarkTheme = checkIfDarkTheme()
diff --git a/src/utils/isDarkTheme.ts b/src/utils/isDarkTheme.ts
new file mode 100644
index 00000000000..555a785aa7c
--- /dev/null
+++ b/src/utils/isDarkTheme.ts
@@ -0,0 +1,24 @@
+/**
+ * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+/**
+ * Check if dark theme is used on a specific element
+ * @param el - Element to check for dark theme, default is document.body, which is used for data-theme-* settings
+ * @return {boolean} - Whether the dark theme is enabled via Nextcloud theme
+ */
+export function checkIfDarkTheme(el: HTMLElement = document.body): boolean {
+	// Nextcloud uses --background-invert-if-dark for dark theme filters in CSS
+	// Values:
+	// - 'invert(100%)' for dark theme
+	// - 'no' for light theme
+	// This is the most reliable way to check for dark theme, including custom themes
+	const backgroundInvertIfDark = window.getComputedStyle(el).getPropertyValue('--background-invert-if-dark')
+	if (backgroundInvertIfDark !== undefined) {
+		return backgroundInvertIfDark === 'invert(100%)'
+	}
+
+	// There is no theme? Fallback to the light theme
+	return false
+}