diff --git a/.gitignore b/.gitignore
index 516fdcc..02a754d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -108,3 +108,4 @@ dist
 
 # Generated content
 public/
+src/functions/sprite.svg
diff --git a/src/App.svelte b/src/App.svelte
index 2802a3b..b16552a 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,7 +1,4 @@
 <script>
-	// UTILS
-	import { setContext } from "svelte";
-
 	// COMPONENTS
 	import Header from "./components/Header.svelte";
 	import Contact from "./components/Contact.svelte";
diff --git a/src/components/About.svelte b/src/components/About.svelte
index 31061f3..7e62db3 100644
--- a/src/components/About.svelte
+++ b/src/components/About.svelte
@@ -66,7 +66,9 @@
 		align-items: start;
 		gap: var(--gap);
 		flex-wrap: wrap;
+		transition: background-color var(--speed-transition) ease-in-out;
 	}
+
 	.bio {
 		flex: 4 4 25rem;
 	}
@@ -76,8 +78,10 @@
 
 	.work {
 		flex: 1 1 20rem;
+		align-self: stretch;
 		padding: var(--gap);
 		background: var(--color-apricot-light);
+		transition: background var(--speed-transition) ease-in-out;
 	}
 
 	.work ul {
@@ -85,6 +89,26 @@
 		margin: 0;
 		padding: 0;
 	}
+
+	/* DARK MODE ---------- */
+	:global(.dark) .about {
+		background-color: var(--color-slate);
+		gap: calc(2 * var(--gap));
+	}
+
+	:global(.dark) .work {
+		background: rgba(0, 0, 0, 0.35);
+	}
+
+	@media screen and (prefers-color-scheme: dark) {
+		.about {
+			background-color: var(--color-slate);
+			gap: calc(2 * var(--gap));
+		}
+		.work {
+			background: rgba(0, 0, 0, 0.35);
+		}
+	}
 </style>
 
 <section aria-labelledby="about-header" class="about container">
diff --git a/src/components/Contact.svelte b/src/components/Contact.svelte
index 7586826..d2bb2b7 100644
--- a/src/components/Contact.svelte
+++ b/src/components/Contact.svelte
@@ -102,7 +102,7 @@
 	<ul class="contact__social">
 		{#each networks as { label, icon, url, rel = null, target = null }}
 			<li class="contact__link contact__link--{label}">
-				<a href={url} {target} {rel}>
+				<a href={url} {target} {rel} tabindex="0">
 					<span class="visually-hidden">Visit me on {label}</span>
 					<svg class="icon">
 						<title>{label} icon</title>
diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index c4ceb4e..e22a5a3 100644
--- a/src/components/Header.svelte
+++ b/src/components/Header.svelte
@@ -1,4 +1,28 @@
-<script></script>
+<script>
+	import { onMount } from "svelte";
+	import Switcher from "./Switcher.svelte";
+
+	let displayModeSwitcher = false;
+	let darkMode = false;
+	$: modeLabel = `Dark mode ${darkMode ? "is" : "is not"} active. Press to toggle it ${
+		darkMode ? "off" : "on."
+	}`;
+
+	onMount(() => {
+		// Initially set our darkmode state based on user preference.
+		// This will default to light mode, which is _my_ preference.
+		darkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+		// On load, switch to dark if needed.
+		if (darkMode) document.body.classList.add("dark");
+
+		// We are using JS and should display the toggle
+		displayModeSwitcher = true;
+	});
+	function handleModeSwitch(e) {
+		document.body.classList.toggle("dark");
+	}
+</script>
 
 <style>
 	.header {
@@ -119,6 +143,7 @@
 	<picture>
 		<source srcset="/img/header-background--desktop.jpg" media="(min-width: 768px)" />
 		<img
+			fetchpriority="high"
 			class="header__image"
 			src="/img/header-background--thumb.jpg"
 			alt="An overhead view of Ryan Marx, smiling while he works, sitting at his desk. The walls of his cubicle are covered in small posters and family photos. Ryan is wearing one of his favofite fleece zip-up jackets." />
@@ -139,4 +164,12 @@
 			target="_blank"
 			rel="noopener noreferrer">John J. Kim</a>
 	</p>
+	<Switcher
+		visible={displayModeSwitcher}
+		bind:checked={darkMode}
+		on:input={handleModeSwitch}
+		id="mode"
+		label={modeLabel}
+		labelLeft="Light"
+		labelRight="Dark" />
 </header>
diff --git a/src/components/Portfolio.svelte b/src/components/Portfolio.svelte
index 6794e3c..9caf7cd 100644
--- a/src/components/Portfolio.svelte
+++ b/src/components/Portfolio.svelte
@@ -63,20 +63,6 @@
 		padding: 0;
 		margin: 0;
 	}
-
-	:global(.tag) {
-		padding: 0.25rem 0.5rem;
-		border-radius: 0.25rem;
-		/* background-color: var(--color-purple); */
-		/* color: var(--color-gray-light); */
-		font: bold var(--font-size-very-small) / var(--line-height) var(--sans-serif-fonts);
-		text-transform: uppercase;
-
-		border: 1px solid var(--color-purple);
-		color: var(--color-purple);
-		background-color: transparent;
-		transition: background-color var(--speed-transition) ease-in-out;
-	}
 </style>
 
 <section id="portfolio" class="container" aria-labelledby="portfolio-header">
diff --git a/src/components/PortfolioItem.svelte b/src/components/PortfolioItem.svelte
index 0bdfded..2bd8e60 100644
--- a/src/components/PortfolioItem.svelte
+++ b/src/components/PortfolioItem.svelte
@@ -32,13 +32,14 @@
 
 	.project__date {
 		font: bold var(--font-size-very-small) / var(--line-height) var(--sans-serif-fonts);
-		color: var(--color-purple);
+		color: var(--color-font-muted);
 		margin-top: calc(-1 * var(--gap));
 	}
 	.links {
 		list-style: none;
 		margin: 0;
 		padding: 0;
+		color: var(--color-font);
 	}
 
 	.links li {
diff --git a/src/components/Switcher.svelte b/src/components/Switcher.svelte
new file mode 100644
index 0000000..c0f11d1
--- /dev/null
+++ b/src/components/Switcher.svelte
@@ -0,0 +1,195 @@
+<script>
+	import { fade } from "svelte/transition";
+	export let id;
+	export let label;
+	export let labelLeft, labelRight;
+	export let checked = false;
+	export let visible = false;
+</script>
+
+<style>
+	.switcher {
+		--switcher-height-default: 2rem;
+		--switcher-bar-height-default: 6px;
+		--switcher-width-default: 2.8rem;
+		--switcher-color-background-default: #eeb6a2;
+		--switcher-color-accent-default: var(--color-apricot-light);
+		--switcher-color-accent-text-default: #000;
+
+		position: absolute;
+		top: var(--gap);
+		right: var(--gap);
+		list-style: none;
+		margin: 0;
+		padding: 0.5rem;
+		background: rgba(0, 0, 0, 0.35);
+
+		opacity: 0.7;
+		transition: opacity var(--speed-transition) ease-in-out;
+	}
+
+	.switcher:hover,
+	.switcher:focus {
+		opacity: 1;
+	}
+
+	.visually-hidden {
+		appearance: none;
+		display: none;
+	}
+
+	.switcher__wrapper {
+		display: flex;
+		align-items: center;
+		gap: 0.35rem;
+		cursor: pointer;
+	}
+	.switcher__label {
+		font: bold var(--font-size-very-small) / 1em var(--sans-serif-fonts);
+		color: var(--color-gray);
+		text-transform: uppercase;
+		margin: 0;
+		padding: 0 0 0.15rem 0;
+		color: white;
+		transform: color var(--speed-transition) ease-in-out;
+		position: relative;
+	}
+
+	.switcher__label::after {
+		content: "";
+		display: block;
+		position: absolute;
+		left: 0;
+		top: 100%;
+		background-color: currentColor;
+		width: 100%;
+		height: 2px;
+		transition: transform var(--speed-transition) ease-in-out;
+	}
+
+	.switcher__label--muted {
+		color: var(--color-gray);
+		border-color: transparent;
+	}
+	.switcher__label--muted::after {
+		transform: scaleX(0);
+	}
+
+	.switcher__toggle {
+		display: block;
+		height: var(--switcher-height, var(--switcher-height-default));
+		height: var(--switcher-bar-height, var(--switcher-bar-height-default));
+		width: var(--switcher-width, var(--switcher-width-default));
+		background-color: var(
+			--switcher-color-background,
+			var(--switcher-color-background-default)
+		);
+		border-radius: 3rem;
+		position: relative;
+		transition: background-color var(--speed-transition) ease-in-out;
+	}
+
+	.switcher__toggle__dot {
+		position: absolute;
+		top: 50%;
+		left: 0;
+		background-color: var(
+			--switcher-color-accent,
+			var(--switcher-color-accent-default)
+		);
+		border: 2px solid
+			var(--switcher-color-accent-text, var(--switcher-color-accent-text-default));
+
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: var(--switcher-height, var(--switcher-height-default));
+		width: var(--switcher-height, var(--switcher-height-default));
+		border-radius: 50%;
+		transform: translate(0, -50%);
+
+		transition: transform var(--speed-transition) ease-in-out,
+			left var(--speed-transition) ease-in-out,
+			background-color var(--speed-transition) ease-in-out,
+			border-color var(--speed-transition) ease-in-out;
+	}
+	.switcher__toggle__icon {
+		width: 75%;
+		height: 75%;
+		fill: var(--switcher-color-accent-text, var(--switcher-color-accent-text-default));
+		transition: transform var(--speed-transition) ease-in-out,
+			fill var(--speed-transition) ease-in-out,
+			opacity var(--speed-transition) ease-in-out;
+
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+	}
+	.switcher__toggle__icon--dark {
+		width: 50%;
+		height: 50%;
+	}
+
+	.switcher__toggle__icon[hidden] {
+		opacity: 0;
+		transform: translate(-50%, -50%) scale(0);
+	}
+	input:checked + .switcher__wrapper .switcher__toggle__dot {
+		left: 100%;
+		transform: translate(-100%, -50%) rotate(180deg);
+	}
+	input:checked + .switcher__wrapper {
+		--switcher-color-background-default: lightblue;
+		--switcher-color-accent-default: navy;
+		--switcher-color-accent-text-default: white;
+	}
+	/* input:checked + .switcher__wrapper .switcher__toggle__icon--light {
+		display: none;
+	}
+	input:checked + .switcher__wrapper .switcher__toggle__icon--dark {
+		display: block;
+	} */
+</style>
+
+{#if visible}
+	<div class="switcher" transition:fade>
+		<input
+			on:input
+			id="{id}-switcher"
+			type="checkbox"
+			name="{id}-switcher"
+			bind:checked
+			class="visually-hidden" />
+		<label class="switcher__wrapper" for="{id}-switcher" aria-label={label}>
+			{#if labelLeft}
+				<span
+					class="switcher__label switcher__label--left"
+					class:switcher__label--muted={checked}>{labelLeft}</span>
+			{/if}
+			<span class="switcher__toggle">
+				<span class="switcher__toggle__dot">
+					<svg
+						class="switcher__toggle__icon switcher__toggle__icon--dark"
+						hidden={checked ? null : true}
+						role="img"
+						viewbox="0 0 1200 1200">
+						<use href="#moon" />
+					</svg>
+					<svg
+						class="switcher__toggle__icon switcher__toggle__icon--light"
+						hidden={checked ? true : null}
+						role="img"
+						viewbox="0 0 1200 1200">
+						<use href="#sun" />
+					</svg>
+				</span>
+			</span>
+			{#if labelRight}
+				<span
+					class="switcher__label switcher__label--right"
+					class:switcher__label--muted={!checked}>{labelRight}</span>
+			{/if}
+		</label>
+	</div>
+{/if}
diff --git a/src/components/Tags.svelte b/src/components/Tags.svelte
index 858f577..802df69 100644
--- a/src/components/Tags.svelte
+++ b/src/components/Tags.svelte
@@ -1,5 +1,6 @@
 <script>
-	import { getContext } from "svelte";
+	import { activeTag } from "../stores.js";
+
 	export let tags = [];
 
 	export let tagDefinitions = {};
@@ -19,13 +20,48 @@
 
 	.tag {
 		flex: 0 0 fit-content;
+		padding: 0.25rem 0.5rem;
+		border-radius: 0.25rem;
+		font: bold var(--font-size-very-small) / var(--line-height) var(--sans-serif-fonts);
+		text-transform: uppercase;
+
+		color: var(--color-purple);
+		border: 1px solid currentColor;
+		background-color: transparent;
+		transition: background-color var(--speed-transition) ease-in-out,
+			border-color var(--speed-transition) ease-in-out,
+			color var(--speed-transition) ease-in-out;
+	}
+
+	.tag--active {
+		background-color: var(--color-purple);
+		color: white;
+	}
+
+	/* ---- DARK MODE ------------ */
+	:global(.dark) .tag {
+		color: var(--color-font-muted);
+	}
+
+	@media screen and (prefers-color-scheme: dark) {
+		.tag {
+			color: var(--color-font-muted);
+		}
 	}
 </style>
 
 {#if tags.length}
 	<ul class="tags" role="list">
 		{#each tags.filter(t => t in tagDefinitions) as tag}
-			<li class="tag" role="listitem">{tagDefinitions[tag].label}</li>
+			<li
+				class="tag"
+				class:tag--active={tag.toLowerCase() === $activeTag}
+				role="listitem">
+				<button
+					on:click={e => {
+						console.log(tag);
+					}}>{tagDefinitions[tag].label}</button>
+			</li>
 		{/each}
 	</ul>
 {/if}
diff --git a/src/components/WorkItem.svelte b/src/components/WorkItem.svelte
index 825cfd0..5ca4957 100644
--- a/src/components/WorkItem.svelte
+++ b/src/components/WorkItem.svelte
@@ -49,6 +49,7 @@
 
 	.item__role {
 		font: bold var(--font-size) / var(--line-height) var(--sans-serif-fonts);
+		color: var(--color-font);
 		margin: 0;
 		cursor: pointer;
 	}
@@ -101,6 +102,9 @@
 		padding: 0 0 0 calc(var(--icon-width) + var(--gap));
 	}
 
+	.item__description :global(p) {
+		font: var(--font-size-small) / var(--line-height) var(--sans-serif-fonts);
+	}
 	.item__description :global(p:last-child) {
 		margin-bottom: 0;
 	}
diff --git a/src/config/portfolioItems.json b/src/config/portfolioItems.json
index a7b4ad7..9530c19 100644
--- a/src/config/portfolioItems.json
+++ b/src/config/portfolioItems.json
@@ -29,13 +29,13 @@
 				"link": "https://www.usatoday.com/storytelling/find-out-how-conservative-you-really-are/"
 			}
 		],
-		"tags": ["tool", "ui", "svelte"]
+		"tags": ["tools", "ui", "svelte"]
 	},
 	{
 		"label": "Cast of Characters",
 		"image": "cast.png",
 		"repo": "https://github.com/ryanbmarx/storytelling-cast-of-characters/",
-		"tags": ["tool", "svelte"],
+		"tags": ["tools", "svelte"],
 
 		"links": [
 			{
@@ -66,7 +66,7 @@
 				"link": "https://www.democratandchronicle.com/storytelling/sibley-building-downtown-rochester-ny-quiz/"
 			}
 		],
-		"tags": ["tool", "svelte"],
+		"tags": ["tools", "svelte"],
 		"description": "Sometimes the news can and should be fun. Part of our ongoing 'news play' experiments, this quiz framework has been used to create topical and evergreen quizzes for 6 different news properties, and has been published weekly  by USA TODAY for more than two years. The primary business goals of this project was to drive reader registrations (not subscriptions).\n\nThousands of quiztakers visited Gannett sign-up pages. To encourage habitual quiztaking, this frameworks supports the possibility of two different leaderboards — weekly and all-time — as well as syndication across Gannett properties."
 	},
 
@@ -87,7 +87,7 @@
 				"link": "https://www.lohud.com/in-depth/news/2022/11/17/jennifer-jones-rockette-radio-city-music-hall/69616543007/"
 			}
 		],
-		"tags": ["tool"],
+		"tags": ["tools"],
 		"description": "My team at Gannett is responsible for designing, engineering and maintaining the In-Depth article framework. This collection of tools enables more than 100 web producers across the company to craft visually stunning, reader-focused multimedia presentations using the everyday CMS and our own story editor.\n\nIt's been used to create more than 7,500 (as of December 2022) articles and is the tool of choice to present the strongest, most impactful journalism Gannett has to offer.\n\nIt has generated hundreds of thousands of pageviews, a 2x increase in engaged time over standard templates and frequently leads to subscriber conversions."
 	},
 	{
@@ -107,7 +107,7 @@
 				"link": "https://www.oklahoman.com/in-depth/news/2021/08/31/hispanic-domestic-abuse-survivors-speak-out-help-other-victims/7497178002/"
 			}
 		],
-		"tags": ["tool", "svelte"],
+		"tags": ["tools", "svelte"],
 		"description": "This component for the In-Depth toolbox was our second-pass at audio clips. I designed and developed this from scratch as an attempt to grow the poor interaction rates observed with the first version. It's bigger and bolder — more pixels on the page — and has a strong visual presence."
 	},
 	{
@@ -126,7 +126,7 @@
 				"link": "https://www.desmoinesregister.com/in-depth/news/local/columnists/courtney-crowder/2019/11/26/abbie-kampman-iowa-strangers-find-peace-20-years-after-wrong-way-crash-kills-5-mother-sisters/2570864001/"
 			}
 		],
-		"tags": ["tool", "svelte"],
+		"tags": ["tools", "svelte"],
 		"image": "sms.png",
 		"description": "This component from the In-Depth toolbox is a top-to-bottom refactor of an existing app. Originally written in Angular (with the data hard-coded into the application), I rewrote it in our preferred Svelte, and abstracted the input data so that it could be used in any project. Visually, it uses the same CSS styling variables as the broader article stylesheets, so it adapts to existing "
 	},
@@ -147,7 +147,7 @@
 				"link": "https://www.usatoday.com/in-depth/graphics/2021/07/07/climate-change-images-offer-present-and-future-views-our-world/5173622001/"
 			}
 		],
-		"tags": ["tool", "svelte"],
+		"tags": ["tools", "svelte"],
 		"description": "This component for In-Depth takes two images, lines them up and toggles between them. We had originally decided to let the myriad 3rd-party versions of this tool serve In-Depth, but this one provides us useful analytics."
 	},
 	{
@@ -168,7 +168,7 @@
 				"link": "https://www.palmbeachpost.com/storytelling/palm-beach-florida-election-voters-guide-2022/"
 			}
 		],
-		"tags": ["tool", "svelte"],
+		"tags": ["tools", "svelte"],
 		"description": "This concept was born in the early days of the Covid-19 pandemic. Our readers had lots of questions and needed easy access to the answers. Gannett was covering the heck out of the ordeal, but organizing that content in ways satisfy these specific, informational needs was difficult. Enter the big page of help.\n\nConstructed with SEO as a top priority, these experiences are intuitive and transactional. Individual questions are grouped by topic, and each question, by design, has an answer with more information available if desired.\n\nThe concept has been adapted for civic resources, hurricane preparedness and voting."
 	},
 	{
@@ -186,7 +186,7 @@
 				"link": "https://www.azcentral.com/in-depth/news/local/arizona-wildfires/2019/07/22/wildfire-risks-more-than-500-spots-have-greater-hazard-than-paradise/1434502001/"
 			}
 		],
-		"tags": ["tool", "ui", "svelte"],
+		"tags": ["tools", "ui", "svelte"],
 		"description": "This collaboration with the Arizona Republic and the USA TODAY graphics team is a custom-build interface for a custom-built database of wildfire potential in the U.S. west. Each town is measured by a series of metrics calculating the probability that it could be consumed by wildfire.\n\nThe application had a standalone instance with it's own URL, but it also was embedded into a handful of articles (built using the In-Depth framework) and pre-configured to display specific towns."
 	},
 	{
@@ -207,7 +207,7 @@
 				"link": "https://www.palmbeachpost.com/storytelling/news/surfside-miami-florida-building-collapse-victims-who-died-obituaries/"
 			}
 		],
-		"tags": ["tool", "svelte"],
+		"tags": ["tools", "svelte"],
 		"description": "The Covid-19 pandemic claimed at least 1.1 million Americans, and at least 6.6 million worldwide. This presentation was developed in conjunction with a newsroom in New Jersey as an artful, elegant and respectful way  to display the names of people who had died in the pandemic. It was adapted for use in Detroit and south Florida  for similar purposes."
 	},
 	{
@@ -300,7 +300,7 @@
 				"link": "https://graphics.chicagotribune.com/news/local/eastland/"
 			}
 		],
-		"tags": ["article", "tool"]
+		"tags": ["article", "tools"]
 	},
 	{
 		"label": "The Tax Divide - A 4-part series",
diff --git a/src/config/tagDefinitions.json b/src/config/tagDefinitions.json
index 0ece766..6772308 100644
--- a/src/config/tagDefinitions.json
+++ b/src/config/tagDefinitions.json
@@ -11,7 +11,7 @@
 		"label": "Featured",
 		"description": "A nicely-designed article or other featured content that might not have a ton of interactivity but is full of information and organization."
 	},
-	"tool": {
+	"tools": {
 		"label": "Tools",
 		"description": "These are not one-off projects. The codebase consitutes a tool or framework and has been reused several times."
 	},
diff --git a/src/functions/sprite.svg b/src/functions/sprite.svg
deleted file mode 100644
index 5354cdd..0000000
--- a/src/functions/sprite.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="0" height="0" style="position:absolute"><symbol viewBox="0 0 145.76 103.68" id="email" xmlns="http://www.w3.org/2000/svg"><defs><style>.ac{fill:#231f20}</style></defs><g id="ab"><path class="ac" d="m73.04 54.05 72.7-44.88c-.25-5.1-4.47-9.17-9.63-9.17H9.65C4.56 0 .38 3.97.03 8.98l73.01 45.07Z"/><path class="ac" d="m73.04 59.93-13.15-8.12-55.13 50.52c1.44.85 3.1 1.34 4.89 1.34h126.46c1.87 0 3.6-.54 5.08-1.46l-55-50.4-13.15 8.12ZM0 14.83v79.19c0 1.72.46 3.34 1.25 4.74l54.22-49.68L0 14.83ZM144.62 98.57c.73-1.36 1.14-2.9 1.14-4.55V15.03L90.61 49.08l54.01 49.49Z"/></g></symbol><symbol viewBox="0 0 477.1 511.04" id="github" xmlns="http://www.w3.org/2000/svg"><path d="M177.53 511.04c-12.25 0-22.19-9.93-22.19-22.19v-38.77c-66.96 10.19-95.32-25.74-114.82-50.54-8.62-10.94-16.08-20.41-23.71-22.32C4.92 374.25-2.3 362.2.67 350.33c2.99-11.92 15.04-19.09 26.91-16.14 22.34 5.57 35.86 22.75 47.81 37.9 18.56 23.58 33.6 42.65 79.95 33v-2.12c-1-13.76 1.32-27.85 6.59-41C99.4 347.71 33.29 309.4 33.29 190.38c-.17-32.52 10.61-63.69 30.59-89.02-7.63-28.92-5.44-59.44 6.49-87.26 2.6-6.06 7.76-10.65 14.09-12.53 8.08-2.44 38.34-6.95 97.04 30.21 48.43-11.51 98.99-11.49 147.4 0 58.68-37.14 88.91-32.63 97.04-30.2a22.178 22.178 0 0 1 14.09 12.53c11.92 27.81 14.13 58.34 6.5 87.26 19.81 25.12 30.58 56.02 30.58 88.35 0 125.95-76.54 160.82-128.46 172.13a96.778 96.778 0 0 1 6.35 42.89l.07 84.12c0 12.27-9.93 22.19-22.19 22.19" style="fill:inherit"/></symbol><symbol viewBox="0 0 255.06 256.31" id="linkedin" xmlns="http://www.w3.org/2000/svg"><path d="M5 86.27h50.64v170.04H5V86.27ZM30.01 0c16.88 0 30.63 13.75 30.63 30.63S46.89 61.26 30.01 61.26 0 47.51 0 30.63 13.13 0 30.01 0Zm55.64 86.27h50.01v23.76C146.29 94.4 163.79 84.4 183.8 84.4h13.75c31.88 0 57.51 26.26 57.51 57.51v114.4h-50.01V164.41c-.63-19.38-13.75-34.38-33.13-34.38-19.38 0-35.63 15-36.26 34.38v91.9H85.65V86.27Z" style="fill:#231f20"/></symbol><symbol viewBox="0 0 574.83 615.26" id="mastodon" xmlns="http://www.w3.org/2000/svg"><path d="M574.81 202.01c0-133.49-87.59-172.61-87.59-172.61C443.04 9.16 367.24.66 288.43 0h-1.94C207.72.66 131.95 9.16 87.8 29.4c0 0-87.62 39.12-87.62 172.61 0 30.56-.59 67.12.38 105.86 3.19 130.52 23.97 259.16 144.86 291.1 55.71 14.75 103.55 17.81 142.11 15.69 69.87-3.84 109.11-24.87 109.11-24.87l-2.31-50.65s-49.93 15.75-106.02 13.81c-55.56-1.91-114.24-5.97-123.24-74.09-.81-6-1.22-12.37-1.22-19.09 0 0 54.53 13.31 123.68 16.47 42.28 1.94 81.9-2.47 122.18-7.28 77.21-9.19 144.42-56.68 152.89-100.12 13.31-68.37 12.22-166.83 12.22-166.83ZM471.49 373.96h-64.12V217.1c0-33.06-13.94-49.84-41.81-49.84-30.81 0-46.28 19.9-46.28 59.28v85.87h-63.74v-85.87c0-39.37-15.44-59.28-46.28-59.28-27.87 0-41.81 16.78-41.81 49.84v156.86h-64.11V212.35c0-33.03 8.44-59.28 25.34-78.68 17.47-19.44 40.31-29.37 68.68-29.37 32.81 0 57.65 12.59 74.09 37.78l15.97 26.72 15.97-26.72c16.44-25.18 41.28-37.78 74.12-37.78 28.34 0 51.21 9.94 68.65 29.37 16.94 19.4 25.34 45.65 25.34 78.68v161.61Z" style="fill:#231f20"/></symbol><symbol viewBox="0 0 278.44 226.15" id="twitter" xmlns="http://www.w3.org/2000/svg"><path d="M137.37 69.55c-11.08-58.35 59.09-93.06 100.44-50.96 0 0 18.46-5.17 34.71-15.51 0 0-5.91 19.94-25.85 32.5 0 0 22.16-2.95 31.76-8.86 0 0-9.6 19.94-27.33 27.33C260.71 187.72 116.69 268.97 0 202.49c0 0 57.61 2.95 81.98-25.11 0 0-35.45 2.95-53.18-39.88 0 0 13.29 5.17 26.59-1.48 0 0-41.36-6.65-45.05-56.13 0 0 13.29 10.34 28.07 6.65 0 0-45.79-27.33-19.94-76.81 0 0 48.75 62.04 118.91 59.82Z" style="fill:#231f20"/></symbol><symbol viewBox="0 0 278.44 226.15" id="twtiter" xmlns="http://www.w3.org/2000/svg"><path d="M137.37 69.55c-11.08-58.35 59.09-93.06 100.44-50.96 0 0 18.46-5.17 34.71-15.51 0 0-5.91 19.94-25.85 32.5 0 0 22.16-2.95 31.76-8.86 0 0-9.6 19.94-27.33 27.33C260.71 187.72 116.69 268.97 0 202.49c0 0 57.61 2.95 81.98-25.11 0 0-35.45 2.95-53.18-39.88 0 0 13.29 5.17 26.59-1.48 0 0-41.36-6.65-45.05-56.13 0 0 13.29 10.34 28.07 6.65 0 0-45.79-27.33-19.94-76.81 0 0 48.75 62.04 118.91 59.82Z" style="fill:none;fill-rule:evenodd"/></symbol></svg>
\ No newline at end of file
diff --git a/src/static/global.css b/src/static/global.css
index edc0121..a4c02bc 100644
--- a/src/static/global.css
+++ b/src/static/global.css
@@ -21,6 +21,7 @@
 	--color-link: var(--color-pink);
 	--color-link-text: white;
 	--color-font: var(--color-slate);
+	--color-font-muted: var(--color-purple);
 
 	/* TYPE */
 
@@ -44,8 +45,17 @@
 	--tap-target: 48px;
 
 	/* OTHER VISUAL THINGS */
-	--speed-transition: 150ms;
-	--speed-transition-quick: 80ms;
+	--speed-transition: 1ms;
+	--speed-transition-quick: 1ms;
+}
+
+/* ------ DARK MODE */
+
+.dark {
+	/* Also applied in media query below */
+	--color-font: #eee;
+	--color-font-muted: #aaa;
+	background: var(--color-black);
 }
 
 html body {
@@ -89,15 +99,18 @@ h6 {
 
 .header {
 	font: var(--font-size-very-large) / var(--line-height-tight) var(--display-fonts);
+	color: var(--color-font);
 }
 
 .label {
 	font: var(--font-size-large) / var(--line-height-tight) var(--display-fonts);
 	font-weight: 200;
+	color: var(--color-font);
 }
 .sublabel {
 	font: var(--font-size) / var(--line-height-tight) var(--display-fonts);
 	font-weight: 200;
+	color: var(--color-font);
 }
 
 .agate {
@@ -153,6 +166,10 @@ a:where(:hover, :focus-visible) {
 }
 
 @media screen and (prefers-reduced-motion: no-preference) {
+	:root {
+		--speed-transition: 150ms;
+		--speed-transition-quick: 80ms;
+	}
 	a::before {
 		transform-origin: middle bottom;
 		transform: translate(0, 100%) scaleY(0);
@@ -161,3 +178,14 @@ a:where(:hover, :focus-visible) {
 		transform: translate(0, 0) scaleY(1);
 	}
 }
+
+@media screen and (prefers-color-scheme: dark) {
+	:root {
+		/* Also applied in media query below */
+		--color-font: #eee;
+		--color-font-muted: #aaa;
+	}
+	body {
+		background: var(--color-black);
+	}
+}
diff --git a/src/stores.js b/src/stores.js
new file mode 100644
index 0000000..ba378cf
--- /dev/null
+++ b/src/stores.js
@@ -0,0 +1,3 @@
+import { writable } from "svelte/store";
+
+export const activeTag = writable("tools");
diff --git a/src/svg/moon.svg b/src/svg/moon.svg
new file mode 100644
index 0000000..3425e02
--- /dev/null
+++ b/src/svg/moon.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1200"><path d="M1180.7,525.38c-8.62-1.12-17.06,4.31-19.88,12.56-54,160.5-204,268.31-373.31,268.31-217.12,0-393.75-176.62-393.75-393.75,0-169.31,107.81-319.31,268.31-373.31,8.44-2.81,13.69-11.06,12.56-19.88s-8.06-15.75-16.88-16.5C638.82,.94,619.32,0,600.01,0,269.26,0,.01,269.25,.01,600s269.25,600,600,600,600-269.25,600-600c0-18.94-.94-38.25-2.81-57.75-.75-8.81-7.69-15.94-16.5-16.88h0Z"/><path d="M712.5,262.5c41.44,0,75,33.56,75,75,0,10.31,8.44,18.75,18.75,18.75s18.75-8.44,18.75-18.75c0-41.44,33.56-75,75-75,10.31,0,18.75-8.44,18.75-18.75s-8.44-18.75-18.75-18.75c-41.44,0-75-33.56-75-75,0-10.31-8.44-18.75-18.75-18.75s-18.75,8.44-18.75,18.75c0,41.44-33.56,75-75,75-10.31,0-18.75,8.44-18.75,18.75s8.44,18.75,18.75,18.75Z"/><path d="M956.25,150c51.75,0,93.75,42,93.75,93.75,0,10.31,8.44,18.75,18.75,18.75s18.75-8.44,18.75-18.75c0-51.75,42-93.75,93.75-93.75,10.31,0,18.75-8.44,18.75-18.75s-8.44-18.75-18.75-18.75c-51.75,0-93.75-42-93.75-93.75,0-10.31-8.44-18.75-18.75-18.75s-18.75,8.44-18.75,18.75c0,51.75-42,93.75-93.75,93.75-10.31,0-18.75,8.44-18.75,18.75s8.44,18.75,18.75,18.75Z"/></svg>
\ No newline at end of file
diff --git a/src/svg/sun.svg b/src/svg/sun.svg
new file mode 100644
index 0000000..0926648
--- /dev/null
+++ b/src/svg/sun.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1075 1075"><path d="M825,537.5c.16-68.3-24.02-134.43-68.19-186.52-44.18-52.09-105.46-86.75-172.87-97.75s-136.54,2.37-194.98,37.71c-58.45,35.34-102.39,90.35-123.96,155.16-.73,1.62-1.37,3.3-1.9,5-17.67,56.14-17.67,116.36,0,172.5,.53,1.7,1.17,3.37,1.9,5,21.56,64.78,65.48,119.77,123.89,155.12,58.41,35.34,127.5,48.73,194.89,37.77,67.39-10.97,128.68-45.56,172.88-97.6,44.2-52.04,68.43-118.11,68.34-186.39h0Z"/><path d="M575,137.5V37.5c0-13.4-7.15-25.78-18.75-32.48-11.6-6.7-25.9-6.7-37.5,0-11.6,6.7-18.75,19.08-18.75,32.48v100c0,13.4,7.15,25.78,18.75,32.48,11.6,6.7,25.9,6.7,37.5,0s18.75-19.08,18.75-32.48Z"/><path d="M917.5,157.5c-7.04-7.04-16.57-10.99-26.52-10.99s-19.49,3.95-26.53,10.99l-70.6,70.65c-9.48,9.48-13.18,23.29-9.71,36.23,3.47,12.95,13.58,23.06,26.53,26.53,12.94,3.47,26.75-.23,36.23-9.71l70.6-70.75c7.01-7.03,10.94-16.55,10.94-26.47s-3.93-19.45-10.94-26.48h0Z"/><path d="M1037.5,500h-100c-13.4,0-25.78,7.15-32.48,18.75-6.7,11.6-6.7,25.9,0,37.5s19.08,18.75,32.48,18.75h100c13.4,0,25.78-7.15,32.48-18.75,6.7-11.6,6.7-25.9,0-37.5s-19.08-18.75-32.48-18.75Z"/><path d="M864.55,917.5c9.62,8.6,22.98,11.65,35.37,8.08s22.09-13.26,25.66-25.66,.52-25.75-8.08-35.37l-70.7-70.75c-9.48-9.48-23.29-13.18-36.23-9.71-12.95,3.47-23.05,13.58-26.52,26.53-3.47,12.95,.23,26.76,9.71,36.23l70.8,70.65Z"/><path d="M500,937.5v100c0,13.4,7.15,25.78,18.75,32.48,11.6,6.7,25.9,6.7,37.5,0s18.75-19.08,18.75-32.48v-100c0-13.4-7.15-25.78-18.75-32.48-11.6-6.7-25.9-6.7-37.5,0s-18.75,19.08-18.75,32.48Z"/><path d="M157.5,917.5c7.05,7.01,16.58,10.95,26.52,10.95s19.48-3.94,26.53-10.95l70.7-70.75c9.2-9.52,12.7-23.19,9.21-35.96-3.5-12.77-13.47-22.76-26.24-26.27-12.77-3.51-26.44-.02-35.97,9.18l-70.75,70.85c-7.01,7.03-10.94,16.55-10.94,26.47s3.93,19.45,10.94,26.48h0Z"/><path d="M0,537.5c0,9.95,3.95,19.48,10.98,26.52,7.03,7.04,16.57,10.98,26.52,10.98h100c13.4,0,25.78-7.15,32.48-18.75,6.7-11.6,6.7-25.9,0-37.5s-19.08-18.75-32.48-18.75H37.5c-9.95,0-19.48,3.95-26.52,10.98-7.04,7.03-10.98,16.57-10.98,26.52Z"/><path d="M281.15,281.2c7.04-7.03,10.99-16.57,10.99-26.52s-3.95-19.49-10.99-26.53l-70.7-70.65c-9.62-8.6-22.98-11.65-35.37-8.08s-22.09,13.26-25.66,25.66-.52,25.75,8.08,35.37l70.65,70.75c7.04,7.01,16.57,10.95,26.5,10.95s19.46-3.93,26.5-10.95h0Z"/></svg>
\ No newline at end of file