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

Co-authored-by: Jonas <jonas@freesources.org>

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

[skip ci]

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

@@ -51,6 +51,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"
@@ -286,6 +287,7 @@ export default {
 			canSwipe: true,
 			isStandalone: false,
 			theme: null,
+			lightBackdrop: null,
 			root: davRemoteURL,
 			handlerId: '',
 
@@ -687,6 +689,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' || (handler.theme === 'default' && defaultThemeIsLight)
 			this.handlerId = handler.id
 
 			// check if part of a group, if so retrieve full files list