feat: add light/dark mode with toggle

src/_components/global/footer.webc

@@ -10,9 +10,18 @@
 			width: unset;
 		}
 	}
+
+	.light-only { display: inline; }
+	.dark-only { display: none; }
+	picture:has(.light-only) { display: inline; }
+	picture:has(.dark-only) { display: none; }
+	[data-theme="dark"] .light-only { display: none; }
+	[data-theme="dark"] .dark-only { display: inline; }
+	[data-theme="dark"] picture:has(.light-only) { display: none; }
+	[data-theme="dark"] picture:has(.dark-only) { display: inline; }
 </style>
 <footer>
-	<a rel="external noreferrer" href="https://github.com/adobin" target="_blank"><img class="mark" src="/static/GitHubMark.png" alt="GitHub" title="github.com/adobin" /></a>
+	<a rel="external noreferrer" href="https://github.com/adobin" target="_blank"><img class="mark light-only" src="/static/GitHubMark.png" alt="GitHub" title="github.com/adobin" /><img class="mark dark-only" src="/static/GitHubMark-light.svg" alt="GitHub" title="github.com/adobin" /></a>
 	&nbsp;
 	<a rel="external noreferrer me" href="https://social.alexdobin.com/@alex" target="_blank"><img class="mark" src="/static/mastodon-mark.svg" alt="Mastodon" title="social.alexdobin.com/@alex" /></a>
 	&nbsp;

src/_includes/components/prism-onedark.css

@@ -0,0 +1,82 @@
+/**
+ * One Dark inspired theme for PrismJS
+ * Scoped to dark mode via [data-theme="dark"]
+ */
+
+[data-theme="dark"] code[class*="language-"],
+[data-theme="dark"] pre[class*="language-"] {
+	color: #abb2bf;
+}
+
+[data-theme="dark"] pre[class*="language-"]::-moz-selection,
+[data-theme="dark"] pre[class*="language-"] ::-moz-selection,
+[data-theme="dark"] code[class*="language-"]::-moz-selection,
+[data-theme="dark"] code[class*="language-"] ::-moz-selection {
+	background: #3e4451;
+}
+
+[data-theme="dark"] pre[class*="language-"]::selection,
+[data-theme="dark"] pre[class*="language-"] ::selection,
+[data-theme="dark"] code[class*="language-"]::selection,
+[data-theme="dark"] code[class*="language-"] ::selection {
+	background: #3e4451;
+}
+
+[data-theme="dark"] pre[class*="language-"] {
+	border-color: #3a3a4e;
+	background-color: #282c34;
+}
+
+[data-theme="dark"] :not(pre) > code[class*="language-"] {
+	background: #2c313a;
+	border-color: #3a3a4e;
+}
+
+[data-theme="dark"] .token.comment,
+[data-theme="dark"] .token.prolog,
+[data-theme="dark"] .token.doctype,
+[data-theme="dark"] .token.cdata {
+	color: #5c6370;
+}
+
+[data-theme="dark"] .token.punctuation,
+[data-theme="dark"] .token.operator {
+	color: #abb2bf;
+}
+
+[data-theme="dark"] .token.string,
+[data-theme="dark"] .token.attr-value {
+	color: #98c379;
+}
+
+[data-theme="dark"] .token.entity,
+[data-theme="dark"] .token.url,
+[data-theme="dark"] .token.symbol,
+[data-theme="dark"] .token.number,
+[data-theme="dark"] .token.boolean,
+[data-theme="dark"] .token.variable,
+[data-theme="dark"] .token.constant,
+[data-theme="dark"] .token.property,
+[data-theme="dark"] .token.regex,
+[data-theme="dark"] .token.inserted {
+	color: #d19a66;
+}
+
+[data-theme="dark"] .token.atrule,
+[data-theme="dark"] .token.keyword,
+[data-theme="dark"] .token.attr-name,
+[data-theme="dark"] .language-autohotkey .token.selector {
+	color: #c678dd;
+}
+
+[data-theme="dark"] .token.function,
+[data-theme="dark"] .token.deleted,
+[data-theme="dark"] .language-autohotkey .token.tag {
+	color: #e06c75;
+}
+
+[data-theme="dark"] .token.tag,
+[data-theme="dark"] .token.selector,
+[data-theme="dark"] .language-autohotkey .token.keyword {
+	color: #61afef;
+}

src/_includes/layouts/base.webc

@@ -22,29 +22,99 @@
 		<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
 		<meta name="msapplication-TileColor" content="#da532c">
 		<meta name="theme-color" content="#ffffff">
+		<script webc:raw webc:keep>
+			(function() {
+				var saved = localStorage.getItem('theme');
+				var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+				var theme = saved || (prefersDark ? 'dark' : 'light');
+				document.documentElement.dataset.theme = theme;
+				if (theme === 'dark') {
+					document.querySelector('meta[name="theme-color"]').content = '#1a1a2e';
+				}
+			})();
+		</script>
 		<style webc:keep @html="this.getCSS(this.page.url)"></style>
 		<script webc:keep @html="this.getJS(this.page.url)"></script>
 		<script webc:raw webc:keep defer data-domain="alexdobin.com" src="https://plausible.alexdobin.com/js/plausible.js"></script>
 	</head>
 	<body>
-		<nav class="nav-bar" @html="eleventyNavigationToHtml(eleventyNavigation($data.collections.all), { activeKey: activeKey($data), activeListItemClass: 'current-nav' })"></nav>
+		<nav class="nav-bar">
+			<template webc:nokeep @html="eleventyNavigationToHtml(eleventyNavigation($data.collections.all), { activeKey: activeKey($data), activeListItemClass: 'current-nav' })"></template>
+			<button id="theme-toggle" class="theme-toggle" aria-label="Toggle dark mode">Dark Mode</button>
+		</nav>
 		<main><template webc:nokeep @html="this.content"></template></main>
 		<footer webc:nokeep></footer>
+		<script webc:raw webc:keep>
+			(function() {
+				var toggle = document.getElementById('theme-toggle');
+				var meta = document.querySelector('meta[name="theme-color"]');
+
+				function getTheme() {
+					return document.documentElement.dataset.theme || 'light';
+				}
+
+				function updateToggleLabel() {
+					toggle.textContent = getTheme() === 'dark' ? 'Light Mode' : 'Dark Mode';
+				}
+
+				function setTheme(theme, save) {
+					document.documentElement.dataset.theme = theme;
+					meta.content = theme === 'dark' ? '#1a1a2e' : '#ffffff';
+					updateToggleLabel();
+					if (save) localStorage.setItem('theme', theme);
+				}
+
+				updateToggleLabel();
+				document.documentElement.classList.add('theme-ready');
+
+				toggle.addEventListener('click', function() {
+					setTheme(getTheme() === 'dark' ? 'light' : 'dark', true);
+				});
+
+				window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
+					if (!localStorage.getItem('theme')) {
+						setTheme(e.matches ? 'dark' : 'light', false);
+					}
+				});
+			})();
+		</script>
 	</body>
 </html>
 
 <style>
+	:root,
+	[data-theme="light"] {
+		--color-bg: #ffffff;
+		--color-text: #333333;
+		--color-accent: rgb(255, 62, 0);
+		--color-accent-subtle: rgba(255, 62, 0, 0.1);
+		--color-border: #dddddd;
+	}
+
+	[data-theme="dark"] {
+		--color-bg: #1a1a2e;
+		--color-text: #e0e0e0;
+		--color-accent: rgb(255, 107, 53);
+		--color-accent-subtle: rgba(255, 107, 53, 0.15);
+		--color-border: #3a3a4e;
+	}
+
 	@view-transition {
 		navigation: auto;
 	}
 
+	html.theme-ready body {
+		transition: background-color 0.3s ease, color 0.3s ease;
+	}
+
 	body {
 		margin: 0;
 		font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen,
 			Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 		font-size: 14px;
 		line-height: 1.5;
-		color: #333;
+		color: var(--color-text);
+		background-color: var(--color-bg);
 	}
 
 	h1,
@@ -79,20 +149,23 @@
 	main {
 		position: relative;
 		max-width: 56em;
-		background-color: white;
+		background-color: var(--color-bg);
 		padding: 2em;
 		margin: 0 auto;
 		box-sizing: border-box;
 	}
 
 	.nav-bar {
-		border-bottom: 1px solid rgba(255, 62, 0, 0.1);
+		border-bottom: 1px solid var(--color-accent-subtle);
 		font-weight: 300;
 		padding: 0 1em;
+		display: flex;
+		align-items: center;
 
 		ul {
 			margin: 0;
 			padding: 0;
+			flex: 1;
 		}
 
 		/* clearfix */
@@ -124,11 +197,28 @@
 				content: '';
 				width: calc(100% - 1em);
 				height: 2px;
-				background-color: rgb(255, 62, 0);
+				background-color: var(--color-accent);
 				display: block;
 				bottom: -1px;
 			}
 		}
 
 	}
+
+	.theme-toggle {
+		background: none;
+		border: 1px solid var(--color-border);
+		color: var(--color-text);
+		padding: 0.4em 0.8em;
+		border-radius: 4px;
+		cursor: pointer;
+		font-size: 0.85em;
+		white-space: nowrap;
+		transition: border-color 0.3s ease, color 0.3s ease;
+	}
+
+	.theme-toggle:hover {
+		border-color: var(--color-accent);
+		color: var(--color-accent);
+	}
 </style>

src/_includes/layouts/post.vto

@@ -2,6 +2,7 @@
 layout: layouts/base.webc
 ---
 <style>{{ include "components/prism-ghcolors.css" }}</style>
+<style>{{ include "components/prism-onedark.css" }}</style>
 {{ set dateTimeFormatter = new Intl.DateTimeFormat('en-US', { dateStyle: "long" }) }}
 
 <h1>{{ title }}</h1>