fix: set light backdrop according to theme

Required to fix regression with Text in Viewer in Nextcloud 30, where we
still want a white viewer header.

Also fixes the header color for PDFs with light theme.

Fixes: nextcloud/text#6386

Signed-off-by: Jonas <[email protected]>

package.json

@@ -53,7 +53,7 @@
     "@nextcloud/paths": "^2.2.1",
     "@nextcloud/router": "^3.0.1",
     "@nextcloud/typings": "^1.9.1",
-    "@nextcloud/vue": "^8.18.0",
+    "@nextcloud/vue": "^8.19.0",
     "@skjnldsv/vue-plyr": "^7.5.0",
     "camelcase": "^8.0.0",
     "debounce": "^2.1.1",

src/views/Viewer.vue

@@ -52,6 +52,7 @@
 		:clear-view-delay="-1 /* disable fade-out because of accessibility reasons */"
 		:close-button-contained="false"
 		:dark="true"
+		:light-backdrop="lightBackdrop"
 		:data-handler="handlerId"
 		:enable-slideshow="hasPrevious || hasNext"
 		:slideshow-paused="editing"
@@ -285,6 +286,7 @@ export default {
 			canSwipe: true,
 			isStandalone: false,
 			theme: null,
+			lightBackdrop: null,
 			root: davRemoteURL,
 			handlerId: '',
 
@@ -698,6 +700,8 @@ export default {
 			}
 
 			this.theme = handler.theme ?? 'dark'
+			const defaultThemeIsLight = window.getComputedStyle(document.body).getPropertyValue('--background-invert-if-dark') !== 'invert(100%)'
+			this.lightBackdrop = handler.theme === 'light' || defaultThemeIsLight
 			this.handlerId = handler.id
 
 			// check if part of a group, if so retrieve full files list