feat: add system/light/dark theme switcher

web/shared/layout/layout.templ

@@ -12,6 +12,11 @@ templ Layout(title string, showHeader bool) {
 			<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
 			<link rel="stylesheet" href="/dist/tailwind.css"/>
 			<script src="https://unpkg.com/htmx.org@1.9.11" integrity="sha384-0gxUXCCR8yv9FM2b+U3FDbsKthCI66oH5IA9fHppQq9DDMHuMauqq1ZHBpJxQ0J0" crossorigin="anonymous"></script>
+			<script>
+				var t = localStorage.getItem('theme');
+				if (t === 'light' || t === 'dark') document.documentElement.setAttribute('data-theme', t);
+			</script>
+			<script src="/dist/theme.js" defer></script>
 			<script src="/dist/discover.js" defer></script>
 			<script src="/dist/anime.js" defer></script>
 			<script src="/dist/timezone.js" defer></script>
@@ -77,6 +82,18 @@ templ Layout(title string, showHeader bool) {
 									></div>
 							</form>
 						</div>
+						<button
+							id="theme-toggle"
+							type="button"
+							class="inline-flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center border-0 bg-transparent text-(--text-muted) hover:text-(--text)"
+							aria-label="Toggle theme"
+							title="Toggle theme"
+						>
+							<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+								<rect x="2" y="3" width="20" height="14" rx="2"/>
+								<path d="M8 21h8M12 17v4"/>
+							</svg>
+						</button>
 					</div>
 				</header>
 			}