fix(theme): make the header readable on the dark backdrop

e2e/theme.spec.ts

@@ -17,4 +17,32 @@ test.describe('Backdrop', () => {
 		await expect(page.locator('.modal-mask')).toBeVisible()
 		await expect(page.locator('.modal-mask--light')).toHaveCount(0)
 	})
+
+	test('puts readable text on that dark backdrop', async ({ page }) => {
+		// The test above checks the backdrop went dark and says nothing about
+		// what sits on it. It did not: the header kept the light theme's
+		// #222 and the title rendered at 1.32:1 against black, which is a
+		// filename nobody can read.
+		const viewer = new ViewerPage(page)
+		await viewer.open('photo.jpg')
+		await viewer.waitForOpen()
+
+		const contrast = await page.evaluate(() => {
+			const channel = (value: number) => {
+				const part = value / 255
+				return part <= 0.03928 ? part / 12.92 : ((part + 0.055) / 1.055) ** 2.4
+			}
+			const luminance = (colour: string) => {
+				const [red, green, blue] = colour.match(/\d+/g)!.slice(0, 3).map(Number).map(channel)
+				return 0.2126 * red! + 0.7152 * green! + 0.0722 * blue!
+			}
+			const name = document.querySelector('.viewer__modal .modal-header__name')!
+			const front = luminance(getComputedStyle(name).color)
+			const back = luminance(getComputedStyle(document.querySelector('.viewer__modal')!).backgroundColor)
+			return (Math.max(front, back) + 0.05) / (Math.min(front, back) + 0.05)
+		})
+
+		// What WCAG asks of normal text
+		expect(contrast).toBeGreaterThanOrEqual(4.5)
+	})
 })

lib/views/Viewer.vue

@@ -1300,14 +1300,31 @@ defineExpose<ViewerAPI>({
 
 <style scoped lang="scss">
 .viewer__modal {
+	// The backdrop is dark whatever theme the server runs, so what sits on
+	// it has to come from the dark palette too. Without this the header
+	// inherits the light theme's #222 and lands at 1.3:1 against black,
+	// which is a title nobody can read. A handler that asked for a light
+	// backdrop keeps the theme's own colours.
+	&:not(.modal-mask--light) {
+		--color-main-text: #ffffff;
+		--color-text-maxcontrast: #d8d8d8;
+		--color-main-background: #171717;
+
+		color: var(--color-main-text);
+	}
+
 	:deep(.modal-container__content) {
 		display: flex;
 		justify-content: center;
 		align-items: center;
 	}
 
 	:deep(.modal-container) {
-		top: var(--header-height) !important;
+		// A little air under the header, so the picture is not touching the
+		// bar above it. The band below is left as it was: the one above now
+		// holds the header and this gap, which is what stops the picture
+		// reading as pushed up against the top of the window.
+		top: calc(var(--header-height) + 8px) !important;
 		bottom: var(--header-height) !important;
 		height: auto !important;
 		background-color: transparent !important;