From d279b7b23a7fab80c529675683c168a4b8b69604 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Mon, 20 Oct 2025 12:48:17 +0200
Subject: [PATCH 1/2] Add theme prop

---
 components/src/SwrHeader/SwrHeader.stories.svelte | 1 +
 components/src/SwrHeader/SwrHeader.svelte         | 9 ++++++---
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/components/src/SwrHeader/SwrHeader.stories.svelte b/components/src/SwrHeader/SwrHeader.stories.svelte
index 2945be39..b6009cdc 100644
--- a/components/src/SwrHeader/SwrHeader.stories.svelte
+++ b/components/src/SwrHeader/SwrHeader.stories.svelte
@@ -36,6 +36,7 @@
 			title="Große Pläne: Wie Städte klimaneutral heizen wollen"
 			eyebrow="Wärmewende in Baden-Württemberg"
 			updated="01-10-2025"
+			theme="light"
 			bylines={[
 				{ name: 'Katharina Forstmair', image: './test/forstmair.jpg' },
 				{ name: 'Tom Burggraf', image: './test/burggraf.jpg' }
diff --git a/components/src/SwrHeader/SwrHeader.svelte b/components/src/SwrHeader/SwrHeader.svelte
index 85e84b8a..828491e2 100644
--- a/components/src/SwrHeader/SwrHeader.svelte
+++ b/components/src/SwrHeader/SwrHeader.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
-	import { getContext, type Snippet } from 'svelte';
+	import { type Snippet } from 'svelte';
 
 	import Caption from '../Caption/Caption.svelte';
+	import isDarkMode from '../isDarkMode';
 
 	interface Byline {
 		name: string;
@@ -15,22 +16,24 @@
 		imageModules?: Record<string, any>;
 		updated?: Date | string;
 		bylines?: Byline[];
+		theme?: 'light' | 'dark' | 'auto';
 	}
 
-	let theme = getContext('theme');
 	const {
 		title,
 		subtitle,
 		eyebrow,
 		imageModules,
 		updated,
+		theme = 'auto',
 		bylines = []
 	}: SwrHeaderProps = $props();
 
+	let _theme = theme === 'auto' ? (isDarkMode() ? 'dark' : 'light') : theme;
 	const updated_on = updated ? (updated instanceof Date ? updated : new Date(updated)) : null;
 </script>
 
-<header class={`container theme-${theme}`}>
+<header class={`container theme-${_theme}`}>
 	{#if eyebrow}
 		<p class="eyebrow">{eyebrow}</p>
 	{/if}

From 234a47afc52fb56f228b25d8ca66b81287ee3242 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Mon, 20 Oct 2025 15:01:12 +0200
Subject: [PATCH 2/2] Drop theme prop

---
 components/src/SwrHeader/SwrHeader.stories.svelte |  2 +-
 components/src/SwrHeader/SwrHeader.svelte         | 13 ++-----------
 2 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/components/src/SwrHeader/SwrHeader.stories.svelte b/components/src/SwrHeader/SwrHeader.stories.svelte
index b6009cdc..d1ca910c 100644
--- a/components/src/SwrHeader/SwrHeader.stories.svelte
+++ b/components/src/SwrHeader/SwrHeader.stories.svelte
@@ -30,7 +30,7 @@
 		});
 	}}
 >
-	<DesignTokens theme="light">
+	<DesignTokens theme="dark">
 		<SwrHeader
 			{imageModules}
 			title="Große Pläne: Wie Städte klimaneutral heizen wollen"
diff --git a/components/src/SwrHeader/SwrHeader.svelte b/components/src/SwrHeader/SwrHeader.svelte
index 828491e2..e8a95076 100644
--- a/components/src/SwrHeader/SwrHeader.svelte
+++ b/components/src/SwrHeader/SwrHeader.svelte
@@ -2,7 +2,6 @@
 	import { type Snippet } from 'svelte';
 
 	import Caption from '../Caption/Caption.svelte';
-	import isDarkMode from '../isDarkMode';
 
 	interface Byline {
 		name: string;
@@ -16,7 +15,6 @@
 		imageModules?: Record<string, any>;
 		updated?: Date | string;
 		bylines?: Byline[];
-		theme?: 'light' | 'dark' | 'auto';
 	}
 
 	const {
@@ -25,15 +23,13 @@
 		eyebrow,
 		imageModules,
 		updated,
-		theme = 'auto',
 		bylines = []
 	}: SwrHeaderProps = $props();
 
-	let _theme = theme === 'auto' ? (isDarkMode() ? 'dark' : 'light') : theme;
 	const updated_on = updated ? (updated instanceof Date ? updated : new Date(updated)) : null;
 </script>
 
-<header class={`container theme-${_theme}`}>
+<header class="container">
 	{#if eyebrow}
 		<p class="eyebrow">{eyebrow}</p>
 	{/if}
@@ -76,11 +72,7 @@
 		margin: 0 auto;
 		margin-bottom: 1rem;
 		max-width: 44rem;
-		text-shadow: 0 0 4px white;
-
-		&.theme-dark {
-			text-shadow: 0 0 8px rgba(black, 0.5);
-		}
+		text-shadow: 0 0 6px var(--color-pageFill);
 	}
 	.eyebrow {
 		font-size: var(--fs-small-1);
@@ -102,7 +94,6 @@
 		line-height: 1.4;
 		font-size: var(--fs-base);
 		font-weight: 400;
-		text-shadow: none;
 		hyphens: auto;
 	}
 	.meta {