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 () => {