From 3d7e1a61e429eeb2e45186736966dc6f697db4c1 Mon Sep 17 00:00:00 2001
From: Ewan Croft <git@ewancroft.uk>
Date: Thu, 16 Jul 2026 16:50:04 +0100
Subject: [PATCH] fix(theme): refresh seasonal colours live

---
 .../components/SeasonalThemeUpdater.svelte    | 40 +++++++++++++++++++
 src/routes/+layout.svelte                     |  2 +
 src/routes/api/theme/+server.ts               | 10 +++++
 3 files changed, 52 insertions(+)
 create mode 100644 src/lib/components/SeasonalThemeUpdater.svelte
 create mode 100644 src/routes/api/theme/+server.ts

diff --git a/src/lib/components/SeasonalThemeUpdater.svelte b/src/lib/components/SeasonalThemeUpdater.svelte
new file mode 100644
index 0000000..43c1af5
--- /dev/null
+++ b/src/lib/components/SeasonalThemeUpdater.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	const REFRESH_INTERVAL_MS = 60 * 60 * 1000;
+
+	async function refreshTheme() {
+		try {
+			const response = await fetch('/api/theme', {
+				cache: 'no-store',
+				headers: { accept: 'text/css' }
+			});
+			if (!response.ok) return;
+
+			const css = await response.text();
+			let style = document.querySelector<HTMLStyleElement>('#sabbat-dynamic-theme');
+			if (!style) {
+				style = document.createElement('style');
+				style.id = 'sabbat-dynamic-theme';
+				document.head.append(style);
+			}
+			style.textContent = css;
+		} catch {
+			// Keep the last server-rendered palette if a background refresh fails.
+		}
+	}
+
+	onMount(() => {
+		void refreshTheme();
+		const interval = setInterval(refreshTheme, REFRESH_INTERVAL_MS);
+		const handleVisibility = () => {
+			if (document.visibilityState === 'visible') void refreshTheme();
+		};
+		document.addEventListener('visibilitychange', handleVisibility);
+
+		return () => {
+			clearInterval(interval);
+			document.removeEventListener('visibilitychange', handleVisibility);
+		};
+	});
+</script>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 2fa12c6..1e00a4f 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -6,6 +6,7 @@
 	import Footer from '$lib/components/Footer.svelte';
 	import SabbatBackground from '$lib/components/SabbatBackground.svelte';
 	import WolfPawTrail from '$lib/components/WolfPawTrail.svelte';
+	import SeasonalThemeUpdater from '$lib/components/SeasonalThemeUpdater.svelte';
 	import MondayEgg from '$lib/components/ostara-eggs/MondayEgg.svelte';
 	import IdleEgg from '$lib/components/ostara-eggs/IdleEgg.svelte';
 	import ThreeToast from '$lib/components/ostara-eggs/ThreeToast.svelte';
@@ -37,6 +38,7 @@
 <svelte:head><link rel="icon" href="/favicon.svg" /></svelte:head>
 
 <SabbatBackground />
+<SeasonalThemeUpdater />
 <WolfPawTrail />
 <MondayEgg />
 <IdleEgg />
diff --git a/src/routes/api/theme/+server.ts b/src/routes/api/theme/+server.ts
new file mode 100644
index 0000000..f080521
--- /dev/null
+++ b/src/routes/api/theme/+server.ts
@@ -0,0 +1,10 @@
+import { getDynamicThemeCSS } from "$lib/server/theme";
+
+export const GET = () => {
+  return new Response(getDynamicThemeCSS(), {
+    headers: {
+      "content-type": "text/css; charset=utf-8",
+      "cache-control": "no-store, max-age=0",
+    },
+  });
+};
-- 
2.51.2