From f70b5ae6bda0f6212a913e4dc6c5d8d35ada6892 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Tue, 31 Mar 2026 13:30:00 +0200
Subject: [PATCH] fix(dark-mode): address PR #168 review blockers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- AuthHeader: bg-brand-navy → bg-header (semantic token, responds to dark mode)
- header.spec.ts: add forgot-password AuthHeader tests (bg + axe)
- header.spec.ts: fix BRAND_NAVY comment — references --c-header, not --c-primary

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/e2e/header.spec.ts           | 24 +++++++++++++++++++++++-
 frontend/src/routes/AuthHeader.svelte |  2 +-
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/frontend/e2e/header.spec.ts b/frontend/e2e/header.spec.ts
index 8317c742..813316a7 100644
--- a/frontend/e2e/header.spec.ts
+++ b/frontend/e2e/header.spec.ts
@@ -1,7 +1,7 @@
 import { test, expect } from '@playwright/test';
 import AxeBuilder from '@axe-core/playwright';
 
-// #012851 — brand-navy, defined as --c-primary in layout.css
+// #012851 — brand-navy, set as --c-header in layout.css (both light and dark mode)
 const BRAND_NAVY = 'rgb(1, 40, 81)';
 
 test.describe('Header — brand-navy background', () => {
@@ -94,3 +94,25 @@ test.describe('Login page — AuthHeader', () => {
 		expect(results.violations).toEqual([]);
 	});
 });
+
+test.describe('Forgot-password page — AuthHeader', () => {
+	test.use({ storageState: { cookies: [], origins: [] } });
+
+	test('forgot-password page has brand-navy header', async ({ page }) => {
+		await page.goto('/forgot-password');
+
+		const header = page.locator('header');
+		await expect(header).toBeVisible();
+
+		const bg = await header.evaluate((el) => getComputedStyle(el).backgroundColor);
+		expect(bg).toBe(BRAND_NAVY);
+	});
+
+	test('forgot-password page header passes accessibility audit', async ({ page }) => {
+		await page.goto('/forgot-password');
+		await expect(page.locator('header')).toBeVisible();
+
+		const results = await new AxeBuilder({ page }).include('header').analyze();
+		expect(results.violations).toEqual([]);
+	});
+});
diff --git a/frontend/src/routes/AuthHeader.svelte b/frontend/src/routes/AuthHeader.svelte
index 6e8aafd6..5520bf8f 100644
--- a/frontend/src/routes/AuthHeader.svelte
+++ b/frontend/src/routes/AuthHeader.svelte
@@ -2,7 +2,7 @@
 import LanguageSwitcher from '$lib/components/LanguageSwitcher.svelte';
 </script>
 
-<header class="bg-brand-navy">
+<header class="bg-header">
 	<div class="h-1 bg-accent"></div>
 	<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
 		<div class="flex h-12 items-center justify-between">