From 86d75d91beff95c7a12725234339b56a055de8c4 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Fri, 8 May 2026 17:35:46 +0200
Subject: [PATCH] fix(dashboard): use bg-surface instead of bg-white in
 ReaderHeaderBar for dark mode

bg-white is hardcoded #fff and only flips via the Tailwind dark: media-query variant.
bg-surface uses a CSS variable (--c-surface) that responds to both the media query
and the [data-theme='dark'] attribute, matching how all other cards on the page work.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/lib/shared/dashboard/ReaderHeaderBar.svelte     | 2 +-
 .../src/lib/shared/dashboard/ReaderHeaderBar.svelte.spec.ts  | 5 ++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/shared/dashboard/ReaderHeaderBar.svelte b/frontend/src/lib/shared/dashboard/ReaderHeaderBar.svelte
index b585669d..234b69fd 100644
--- a/frontend/src/lib/shared/dashboard/ReaderHeaderBar.svelte
+++ b/frontend/src/lib/shared/dashboard/ReaderHeaderBar.svelte
@@ -20,7 +20,7 @@ const timeLabel = $derived.by(() => {
 </script>
 
 <header
-	class="flex flex-col items-start gap-4 rounded-sm border border-line bg-white px-4 py-3 sm:flex-row sm:items-center dark:border-white/8 dark:bg-surface"
+	class="flex flex-col items-start gap-4 rounded-sm border border-line bg-surface px-4 py-3 sm:flex-row sm:items-center dark:border-white/8"
 >
 	<!-- Greeting -->
 	<div class="min-w-0 flex-1">
diff --git a/frontend/src/lib/shared/dashboard/ReaderHeaderBar.svelte.spec.ts b/frontend/src/lib/shared/dashboard/ReaderHeaderBar.svelte.spec.ts
index c9d81c9b..86589d88 100644
--- a/frontend/src/lib/shared/dashboard/ReaderHeaderBar.svelte.spec.ts
+++ b/frontend/src/lib/shared/dashboard/ReaderHeaderBar.svelte.spec.ts
@@ -81,12 +81,11 @@ describe('ReaderHeaderBar', () => {
 		await expect.element(welcome).toBeInTheDocument();
 	});
 
-	it('wrapper has dark mode classes', async () => {
+	it('wrapper uses bg-surface (CSS-variable-backed, dark-mode-aware)', async () => {
 		render(ReaderHeaderBar, { name: 'Anna', documents: 1, persons: 1, stories: 1 });
 		const wrapper = page.getByRole('banner');
 		const cls = ((await wrapper.element()) as HTMLElement).className;
-		expect(cls).toMatch(/dark:bg-surface/);
-		expect(cls).toMatch(/dark:border-white\/8/);
+		expect(cls).toMatch(/\bbg-surface\b/);
 	});
 
 	it('renders a vertical divider with bg-line class', async () => {