Add theme toggle functionality and improve theme management

src/components/Header.astro

@@ -59,6 +59,21 @@ const switchHref = await resolveSwitchHref();
 			<HeaderLink href={categoriesHref}>{t(locale, 'nav.categories')}</HeaderLink>
 			<HeaderLink href={tagsHref}>{t(locale, 'nav.tags')}</HeaderLink>
 		</div>
+		<div class="toolbar">
+		<button class="theme-toggle" type="button" aria-label="Toggle theme">
+			<span class="theme-toggle__thumb" aria-hidden="true"></span>
+			<span class="theme-toggle__icon theme-toggle__icon--sun" aria-hidden="true">
+				<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+					<circle cx="12" cy="12" r="4"></circle>
+					<path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"></path>
+				</svg>
+			</span>
+			<span class="theme-toggle__icon theme-toggle__icon--moon" aria-hidden="true">
+				<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+					<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+				</svg>
+			</span>
+		</button>
 		<a
 			class={`lang-toggle lang-toggle--${locale}`}
 			href={switchHref}
@@ -70,22 +85,47 @@ const switchHref = await resolveSwitchHref();
 			<span class={`lang-toggle__label${locale === 'de' ? ' is-active' : ''}`}>DE</span>
 			<span class={`lang-toggle__label${locale === 'en' ? ' is-active' : ''}`}>EN</span>
 		</a>
+		</div>
 	</nav>
 </header>
 
 <script>
+	import { navigate } from 'astro:transitions/client';
 	function wireLangToggle() {
 		const toggle = document.querySelector<HTMLAnchorElement>('.lang-toggle');
-		toggle?.addEventListener('click', () => toggle.classList.add('is-switching'), { once: true });
+		if (!toggle || toggle.dataset.wired) return;
+		toggle.dataset.wired = '1';
+		toggle.addEventListener('click', (e) => {
+			if (e.metaKey || e.ctrlKey || e.shiftKey || (e as MouseEvent).button === 1) return;
+			const href = toggle.getAttribute('href');
+			if (!href) return;
+			e.preventDefault();
+			toggle.classList.add('is-switching');
+			window.setTimeout(() => navigate(href), 280);
+		});
+	}
+	function wireThemeToggle() {
+		const btn = document.querySelector<HTMLButtonElement>('.theme-toggle');
+		if (!btn || btn.dataset.wired) return;
+		btn.dataset.wired = '1';
+		btn.addEventListener('click', () => {
+			const next = document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark';
+			document.documentElement.dataset.theme = next;
+			localStorage.setItem('theme', next);
+		});
 	}
 	wireLangToggle();
-	document.addEventListener('astro:page-load', wireLangToggle);
+	wireThemeToggle();
+	document.addEventListener('astro:page-load', () => {
+		wireLangToggle();
+		wireThemeToggle();
+	});
 </script>
 <style>
 	header {
 		margin: 0;
 		padding: 0 1em;
-		background: white;
+		background: rgb(var(--surface));
 		box-shadow: 0 2px 8px rgba(var(--black), 5%);
 	}
 	h2 {
@@ -178,4 +218,66 @@ const switchHref = await resolveSwitchHref();
 			transition: none;
 		}
 	}
+	.toolbar {
+		display: flex;
+		align-items: center;
+		gap: 0.6em;
+	}
+	.theme-toggle {
+		position: relative;
+		display: inline-flex;
+		align-items: stretch;
+		padding: 3px;
+		margin: 0;
+		border: 0;
+		background: rgba(var(--gray-light), 0.7);
+		border-radius: 999px;
+		cursor: pointer;
+		line-height: 1;
+		user-select: none;
+		font: inherit;
+	}
+	.theme-toggle:hover {
+		background: rgba(var(--gray-light), 1);
+	}
+	.theme-toggle__thumb {
+		position: absolute;
+		top: 3px;
+		bottom: 3px;
+		left: 3px;
+		width: calc(50% - 3px);
+		border-radius: 999px;
+		background: var(--accent);
+		box-shadow: 0 1px 3px rgba(var(--black), 0.18);
+	}
+	:global(:root[data-theme-ready]) .theme-toggle__thumb {
+		transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
+	}
+	:global(:root[data-theme='dark']) .theme-toggle__thumb {
+		transform: translateX(100%);
+	}
+	.theme-toggle__icon {
+		position: relative;
+		z-index: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 1.8em;
+		height: 1.8em;
+		font-size: 0.9em;
+		color: rgb(var(--gray));
+	}
+	:global(:root[data-theme-ready]) .theme-toggle__icon {
+		transition: color 280ms ease;
+	}
+	:global(:root:not([data-theme='dark'])) .theme-toggle__icon--sun,
+	:global(:root[data-theme='dark']) .theme-toggle__icon--moon {
+		color: white;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.theme-toggle__thumb,
+		.theme-toggle__icon {
+			transition: none;
+		}
+	}
 </style>

src/layouts/BaseLayout.astro

@@ -33,11 +33,36 @@ const {
 <html lang={locale}>
 	<head>
 		<BaseHead title={title} description={description} image={image} locale={locale} />
+		<script is:inline>
+			(() => {
+				const root = document.documentElement;
+				const apply = () => {
+					const stored = localStorage.getItem('theme');
+					const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+					const theme = stored === 'dark' || stored === 'light' ? stored : prefersDark ? 'dark' : 'light';
+					root.dataset.theme = theme;
+				};
+				apply();
+				const enableTransitions = () => {
+					requestAnimationFrame(() =>
+						requestAnimationFrame(() => root.setAttribute('data-theme-ready', '')),
+					);
+				};
+				enableTransitions();
+				document.addEventListener('astro:before-swap', () => {
+					root.removeAttribute('data-theme-ready');
+				});
+				document.addEventListener('astro:after-swap', () => {
+					apply();
+					enableTransitions();
+				});
+			})();
+		</script>
 		<ClientRouter />
 		<slot name="head" />
 	</head>
 	<body class={bodyClass}>
-		<Header locale={locale} entry={entry} transition:persist />
+		<Header locale={locale} entry={entry} />
 		<main transition:animate="fade">
 			<slot />
 		</main>

src/styles/global.css

@@ -11,10 +11,29 @@
 	--gray: 96, 115, 159;
 	--gray-light: 229, 233, 240;
 	--gray-dark: 34, 41, 57;
-	--gray-gradient: rgba(var(--gray-light), 50%), #fff;
+	--surface: 255, 255, 255;
+	--gray-gradient: rgba(var(--gray-light), 50%), rgb(var(--surface));
 	--box-shadow:
 		0 2px 6px rgba(var(--gray), 25%), 0 8px 24px rgba(var(--gray), 33%),
 		0 16px 32px rgba(var(--gray), 33%);
+	color-scheme: light;
+}
+:root[data-theme='dark'] {
+	--accent: #8c96ff;
+	--accent-dark: #c2c8ff;
+	--black: 230, 233, 240;
+	--gray: 150, 160, 190;
+	--gray-light: 38, 42, 56;
+	--gray-dark: 220, 225, 235;
+	--surface: 17, 20, 28;
+	--gray-gradient: rgba(var(--gray-light), 50%), rgb(var(--surface));
+	color-scheme: dark;
+}
+html {
+	background: rgb(var(--surface));
+	transition:
+		background-color 300ms ease,
+		color 300ms ease;
 }
 body {
 	font-family: var(--font-atkinson);