diff --git a/.changeset/funny-bears-teach.md b/.changeset/funny-bears-teach.md
new file mode 100644
index 00000000..b4afdb06
--- /dev/null
+++ b/.changeset/funny-bears-teach.md
@@ -0,0 +1,7 @@
+---
+'@sveltejs/site-kit': major
+---
+
+Dark mode toggle, dark mode styles changed as well
+
+This is a breaking change because svelte.dev and kit.svelte.dev rely on variables changing based on `@media (prefers-color-scheme: dark)`, and the variables belonging to `:root` rather than `body`
diff --git a/.changeset/pre.json b/.changeset/pre.json
new file mode 100644
index 00000000..a6f19ec8
--- /dev/null
+++ b/.changeset/pre.json
@@ -0,0 +1,8 @@
+{
+  "mode": "pre",
+  "tag": "next",
+  "initialVersions": {
+    "@sveltejs/site-kit": "3.4.0"
+  },
+  "changesets": []
+}
diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json
index e5941d9a..bd7d4234 100644
--- a/packages/site-kit/package.json
+++ b/packages/site-kit/package.json
@@ -24,6 +24,7 @@
 		"@sveltejs/package": "^1.0.2",
 		"flexsearch": "^0.7.31",
 		"svelte": "^3.55.1",
+		"svelte-local-storage-store": "^0.4.0",
 		"typescript": "^4.9.5",
 		"vite": "^4.0.4"
 	},
@@ -32,7 +33,7 @@
 		"directory": "package"
 	},
 	"peerDependencies": {
-		"svelte": "^3.54.0",
-		"@sveltejs/kit": "^1.0.0"
+		"@sveltejs/kit": "^1.0.0",
+		"svelte": "^3.54.0"
 	}
 }
diff --git a/packages/site-kit/src/lib/components/Nav.svelte b/packages/site-kit/src/lib/components/Nav.svelte
index d912c4c7..6cfc1ed9 100644
--- a/packages/site-kit/src/lib/components/Nav.svelte
+++ b/packages/site-kit/src/lib/components/Nav.svelte
@@ -3,7 +3,9 @@ Top navigation bar for the application. It provides a slot for the left side, th
 -->
 <script>
 	import { page } from '$app/stores';
+	import { ThemeToggle } from '$lib/theme';
 	import Icon from './Icon.svelte';
+	import Separator from './Separator.svelte';
 
 	/** @type {string} */
 	export let logo;
@@ -12,6 +14,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 
 	let open = false;
 	let visible = true;
+
 	/** @type {HTMLElement} */
 	let nav;
 
@@ -65,7 +68,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 
 	<button
 		aria-label="Toggle menu"
-		aria-expanded={open.toString()}
+		aria-expanded={open}
 		class="menu-toggle"
 		class:open
 		on:click={() => (open = !open)}
@@ -79,6 +82,13 @@ Top navigation bar for the application. It provides a slot for the left side, th
 
 	<ul class="external">
 		<slot name="nav-right" />
+
+		<Separator />
+
+		<div class="appearance">
+			<span class="caption">Color Scheme</span>
+			<ThemeToggle />
+		</div>
 	</ul>
 </nav>
 
@@ -147,7 +157,6 @@ Top navigation bar for the application. It provides a slot for the left side, th
 	}
 
 	.home {
-		width: 30rem;
 		height: var(--sk-nav-height);
 		display: flex;
 		text-indent: -9999px;
@@ -163,6 +172,21 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		line-height: 1;
 	}
 
+	.appearance {
+		display: flex;
+		height: 100%;
+		align-items: center;
+		margin-left: 0.75rem;
+		transform: translateY(2px);
+	}
+
+	.appearance .caption {
+		display: none;
+		font-size: var(--sk-text-xs);
+		line-height: 1;
+		margin-right: 0.5rem;
+	}
+
 	@media (max-width: 800px) {
 		ul {
 			position: relative;
@@ -199,6 +223,19 @@ Top navigation bar for the application. It provides a slot for the left side, th
 			bottom: calc(-1 * var(--shadow-height));
 			background: var(--shadow-gradient);
 		}
+
+		.appearance {
+			justify-content: space-between;
+			align-items: center;
+			margin: 10px 0 0;
+			padding: 1rem 0.75rem;
+			background: var(--sk-back-3);
+			border-radius: 0.5rem;
+		}
+
+		.appearance .caption {
+			display: block;
+		}
 	}
 
 	@media (min-width: 800px) {
@@ -207,9 +244,10 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		}
 
 		nav {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
+			display: grid;
+			grid-template-columns: 1fr auto 1fr;
+			/* align-items: center; */
+			/* justify-content: space-between; */
 		}
 
 		ul {
@@ -230,7 +268,6 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		}
 
 		ul.external {
-			width: 30rem;
 			padding: 0 var(--sk-page-padding-side) 0 0;
 			justify-content: end;
 		}
diff --git a/packages/site-kit/src/lib/icons/search.svg b/packages/site-kit/src/lib/icons/search.svg
new file mode 100644
index 00000000..b588f60b
--- /dev/null
+++ b/packages/site-kit/src/lib/icons/search.svg
@@ -0,0 +1,6 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+	<path
+		fill="#ccc"
+		d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"
+	/>
+</svg>
\ No newline at end of file
diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css
index c4f30a72..a9183757 100644
--- a/packages/site-kit/src/lib/styles/base.css
+++ b/packages/site-kit/src/lib/styles/base.css
@@ -12,7 +12,7 @@ body {
 	font-family: var(--sk-font);
 	line-height: 1.5;
 	color: var(--sk-text-2);
-	background-color: var(--back);
+	background-color: var(--sk-back-1);
 	width: 100%;
 	tab-size: 2;
 	-moz-tab-size: 2;
diff --git a/packages/site-kit/src/lib/styles/code.css b/packages/site-kit/src/lib/styles/code.css
index b3fc15a5..8a1596ee 100644
--- a/packages/site-kit/src/lib/styles/code.css
+++ b/packages/site-kit/src/lib/styles/code.css
@@ -1,6 +1,6 @@
 @import './base.css';
 
-:root {
+body {
 	--shiki-color-text: var(--sk-code-base);
 	--shiki-color-background: var(--sk-back-3);
 	--shiki-token-constant: var(--sk-code-base);
diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
index 024d19ec..3444cacc 100644
--- a/packages/site-kit/src/lib/styles/tokens.css
+++ b/packages/site-kit/src/lib/styles/tokens.css
@@ -1,4 +1,6 @@
-:root {
+body,
+body.light,
+body.dark {
 	/* colors */
 	--sk-back-h: 206;
 	--sk-back-3-hsl: 206, 64%, 98%;
@@ -62,13 +64,17 @@
 }
 
 @media screen and (min-width: 480px) {
-	:root {
+	body,
+	body.light,
+	body.dark {
 		--sk-page-padding-side: 3.2rem;
 	}
 }
 
 @media screen and (min-width: 768px) {
-	:root {
+	body,
+	body.light,
+	body.dark {
 		--sk-text-xxl: 5.4rem;
 		--sk-text-xl: 3.6rem;
 		--sk-page-padding-top: 8rem;
@@ -76,48 +82,48 @@
 	}
 }
 
-@media (prefers-color-scheme: dark) {
-	:root {
-		/* TODO create tokens for all the ad-hoc styles used on the site, so we can offer dark mode */
-		--sk-back-1: hsl(0, 0%, 10%);
-		--sk-back-2: hsl(0, 0%, 18%);
-		/* --sk-back-3: hsl(0, 0%, 20%); */
-		--sk-back-4: hsl(0, 0%, 22%);
-		--sk-back-5: hsl(0, 0%, 40%);
-		--sk-back-translucent: hsla(0, 0%, 100%, 0.1);
-		--sk-theme-1: hsl(15, 100%, 55%);
-		--sk-theme-2: hsl(240, 8%, 44%);
-		--sk-theme-3: hsl(204, 100%, 63%);
-		--sk-text-1: hsl(0, 0%, 90%);
-		--sk-text-2: hsl(0, 0%, 80%);
-		--sk-text-3: hsl(0, 0%, 65%);
-		--sk-text-translucent: hsla(0, 0%, 100%, 0.9);
-		--sk-scrollbar: rgba(255, 255, 255, 0.3);
-
-		--sk-back-3-hsl: 0, 0%, 14%;
-		--sk-theme-1-variant: hsl(15, 100%, 40%);
-		--sk-theme-2-variant: hsl(240, 8%, 35%);
-		--sk-theme-3-variant: hsl(204, 100%, 50%);
-
-		--sk-code-ts-bg: var(--sk-back-2);
-		--sk-code-bg: var(--sk-back-3);
-		--sk-code-base: hsl(45, 7%, 75%);
-		--sk-code-comment: hsl(0, 0%, 51%);
-		--sk-code-keyword: hsl(204, 88%, 65%);
-		--sk-code-function: hsl(19, 67%, 75%);
-		--sk-code-string: hsl(41, 37%, 68%);
-		--sk-code-number: hsl(120, 100%, 25%);
-		--sk-code-template-string: hsl(2, 80%, 47%);
-		--sk-code-tags: var(--code-function);
-		--sk-code-important: var(--code-string);
-		--sk-code-diff-base: hsla(0, 0%, 100%, 0.4);
-		--sk-code-diff-inserted: hsl(120, 46%, 48%);
-		--sk-code-diff-removed: hsl(2, 64%, 52%);
-	}
+body.dark {
+	/* TODO create tokens for all the ad-hoc styles used on the site, so we can offer dark mode */
+	--sk-back-1: hsl(0, 0%, 10%);
+	--sk-back-2: hsl(0, 0%, 18%);
+	/* --sk-back-3: hsl(0, 0%, 20%); */
+	--sk-back-4: hsl(0, 0%, 22%);
+	--sk-back-5: hsl(0, 0%, 40%);
+	--sk-back-translucent: hsla(0, 0%, 100%, 0.1);
+	--sk-theme-1: hsl(15, 100%, 55%);
+	--sk-theme-2: hsl(240, 8%, 44%);
+	--sk-theme-3: hsl(204, 100%, 63%);
+	--sk-text-1: hsl(0, 0%, 90%);
+	--sk-text-2: hsl(0, 0%, 80%);
+	--sk-text-3: hsl(0, 0%, 65%);
+	--sk-text-translucent: hsla(0, 0%, 100%, 0.9);
+	--sk-scrollbar: rgba(255, 255, 255, 0.3);
+
+	--sk-back-3-hsl: 0, 0%, 14%;
+	--sk-theme-1-variant: hsl(15, 100%, 40%);
+	--sk-theme-2-variant: hsl(240, 8%, 35%);
+	--sk-theme-3-variant: hsl(204, 100%, 50%);
+
+	--sk-code-ts-bg: var(--sk-back-2);
+	--sk-code-bg: var(--sk-back-3);
+	--sk-code-base: hsl(45, 7%, 75%);
+	--sk-code-comment: hsl(0, 0%, 51%);
+	--sk-code-keyword: hsl(204, 88%, 65%);
+	--sk-code-function: hsl(19, 67%, 75%);
+	--sk-code-string: hsl(41, 37%, 68%);
+	--sk-code-number: hsl(120, 100%, 25%);
+	--sk-code-template-string: hsl(2, 80%, 47%);
+	--sk-code-tags: var(--code-function);
+	--sk-code-important: var(--code-string);
+	--sk-code-diff-base: hsla(0, 0%, 100%, 0.4);
+	--sk-code-diff-inserted: hsl(120, 46%, 48%);
+	--sk-code-diff-removed: hsl(2, 64%, 52%);
 }
 
 /* legacy — existing site-kit uses these, and upgrading svelte.dev will be easier if we keep them around for now */
-:root {
+body,
+body.light,
+body.dark {
 	/* colors */
 	--back: var(--sk-back-1);
 	--back-light: var(--sk-back-3);
diff --git a/packages/site-kit/src/lib/theme/ThemeToggle.svelte b/packages/site-kit/src/lib/theme/ThemeToggle.svelte
new file mode 100644
index 00000000..a4cf9c4b
--- /dev/null
+++ b/packages/site-kit/src/lib/theme/ThemeToggle.svelte
@@ -0,0 +1,117 @@
+<script>
+	import { browser } from '$app/environment';
+	import { onDestroy } from 'svelte';
+	import { theme } from './store';
+
+	function toggle() {
+		const upcoming_theme = $theme.current === 'light' ? 'dark' : 'light';
+
+		if (
+			upcoming_theme ===
+			(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+		) {
+			// Switch the preference to `system`
+			$theme.preference = 'system';
+		} else {
+			// Switch the preference to `light` or `dark`
+			$theme.preference = upcoming_theme;
+		}
+
+		$theme.current = upcoming_theme;
+	}
+
+	/** @param {MediaQueryListEvent} e */
+	const cb = (e) =>
+		theme.set({ preference: $theme.preference, current: e.matches ? 'dark' : 'light' });
+
+	/** @type {MediaQueryList} */
+	let query;
+
+	$: {
+		if (!browser) break $;
+
+		query?.removeEventListener('change', cb);
+
+		if ($theme.preference === 'system') {
+			query = window.matchMedia('(prefers-color-scheme: dark)');
+			query.addEventListener('change', cb);
+		}
+	}
+
+	onDestroy(() => query?.removeEventListener('change', cb));
+</script>
+
+<label title="toggle dark mode">
+	<button
+		on:click={toggle}
+		type="button"
+		role="switch"
+		aria-checked={$theme.current === 'dark' ? 'true' : false}
+	>
+		<span class="check" class:checked={$theme.current === 'dark'}>
+			<span class="icon">
+				{#if browser}
+					{#if $theme.current === 'dark'}
+						{@html `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M12 21q-3.775 0-6.388-2.613T3 12q0-3.45 2.25-5.988T11 3.05q.625-.075.975.45t-.025 1.1q-.425.65-.638 1.375T11.1 7.5q0 2.25 1.575 3.825T16.5 12.9q.775 0 1.538-.225t1.362-.625q.525-.35 1.075-.037t.475.987q-.35 3.45-2.937 5.725T12 21Zm0-2q2.2 0 3.95-1.213t2.55-3.162q-.5.125-1 .2t-1 .075q-3.075 0-5.238-2.163T9.1 7.5q0-.5.075-1t.2-1q-1.95.8-3.163 2.55T5 12q0 2.9 2.05 4.95T12 19Zm-.25-6.75Z"/></svg>`}
+					{:else}
+						{@html `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M0 0h24v24H0z"/><path fill="currentColor" d="M12 19a1 1 0 0 1 .993.883L13 20v1a1 1 0 0 1-1.993.117L11 21v-1a1 1 0 0 1 1-1zm6.313-2.09l.094.083l.7.7a1 1 0 0 1-1.32 1.497l-.094-.083l-.7-.7a1 1 0 0 1 1.218-1.567l.102.07zm-11.306.083a1 1 0 0 1 .083 1.32l-.083.094l-.7.7a1 1 0 0 1-1.497-1.32l.083-.094l.7-.7a1 1 0 0 1 1.414 0zM4 11a1 1 0 0 1 .117 1.993L4 13H3a1 1 0 0 1-.117-1.993L3 11h1zm17 0a1 1 0 0 1 .117 1.993L21 13h-1a1 1 0 0 1-.117-1.993L20 11h1zM6.213 4.81l.094.083l.7.7a1 1 0 0 1-1.32 1.497l-.094-.083l-.7-.7A1 1 0 0 1 6.11 4.74l.102.07zm12.894.083a1 1 0 0 1 .083 1.32l-.083.094l-.7.7a1 1 0 0 1-1.497-1.32l.083-.094l.7-.7a1 1 0 0 1 1.414 0zM12 2a1 1 0 0 1 .993.883L13 3v1a1 1 0 0 1-1.993.117L11 4V3a1 1 0 0 1 1-1zm0 5a5 5 0 1 1-4.995 5.217L7 12l.005-.217A5 5 0 0 1 12 7z"/></g></svg>`}
+					{/if}
+				{/if}
+			</span>
+		</span>
+	</button>
+</label>
+
+<style>
+	button {
+		position: relative;
+		border-radius: 11px;
+		display: block;
+		width: 40px;
+		height: 22px;
+		flex-shrink: 0;
+		border: 1px solid var(--sk-text-3);
+		background-color: var(--sk-back-2);
+		transition: border-color 0.25s;
+	}
+
+	button:hover {
+		color: var(--sk-text-1);
+
+		border-color: var(--sk-text-1);
+	}
+
+	.check {
+		position: absolute;
+		top: 1px;
+		left: 1px;
+		width: 18px;
+		height: 18px;
+		border-radius: 50%;
+		background-color: var(--sk-back-4);
+		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
+		transition: transform 0.25s;
+		pointer-events: none;
+	}
+
+	.check.checked {
+		transform: translate(18px);
+	}
+
+	.icon {
+		position: relative;
+		display: block;
+		width: 18px;
+		height: 18px;
+		border-radius: 50%;
+		overflow: hidden;
+	}
+
+	.icon :global(svg) {
+		position: absolute;
+		top: 3px;
+		left: 3px;
+		width: 12px;
+		height: 12px;
+	}
+</style>
diff --git a/packages/site-kit/src/lib/theme/index.js b/packages/site-kit/src/lib/theme/index.js
new file mode 100644
index 00000000..fc368e63
--- /dev/null
+++ b/packages/site-kit/src/lib/theme/index.js
@@ -0,0 +1,2 @@
+export * from './store';
+export { default as ThemeToggle } from './ThemeToggle.svelte';
diff --git a/packages/site-kit/src/lib/theme/store.js b/packages/site-kit/src/lib/theme/store.js
new file mode 100644
index 00000000..7f5d0892
--- /dev/null
+++ b/packages/site-kit/src/lib/theme/store.js
@@ -0,0 +1,23 @@
+import { browser } from '$app/environment';
+import { persisted } from 'svelte-local-storage-store';
+
+/**
+ * @typedef {{ preference: 'light' | 'dark' | 'system', current: 'light' | 'dark' }} Theme
+ */
+
+/** @type {import('svelte/store').Writable<Theme>} */
+export const theme = persisted('sveltekit:theme', {
+	preference: 'system',
+	current: browser
+		? window.matchMedia('(prefers-color-scheme: dark)').matches
+			? 'dark'
+			: 'light'
+		: 'light'
+});
+
+theme.subscribe(($theme) => {
+	if (!browser) return;
+
+	document.body.classList.remove('light', 'dark');
+	document.body.classList.add($theme.current);
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dc901c06..0ae20610 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -22,6 +22,9 @@ importers:
       svelte:
         specifier: ^3.55.1
         version: 3.55.1
+      svelte-local-storage-store:
+        specifier: ^0.4.0
+        version: 0.4.0(svelte@3.55.1)
       typescript:
         specifier: ^4.9.5
         version: 4.9.5
@@ -2089,6 +2092,15 @@ packages:
       svelte: 3.55.1
     dev: true
 
+  /svelte-local-storage-store@0.4.0(svelte@3.55.1):
+    resolution: {integrity: sha512-ctPykTt4S3BE5bF0mfV0jKiUR1qlmqLvnAkQvYHLeb9wRyO1MdIFDVI23X+TZEFleATHkTaOpYZswIvf3b2tWA==}
+    engines: {node: '>=0.14'}
+    peerDependencies:
+      svelte: ^3.48.0
+    dependencies:
+      svelte: 3.55.1
+    dev: true
+
   /svelte2tsx@0.6.0(svelte@3.55.1)(typescript@4.9.5):
     resolution: {integrity: sha512-TrxfQkO7CKi8Pu2eC/FyteDCdk3OOeQV5u6z7OjYAsOhsd0ClzAKqxJdvp6xxNQLrbFzf/XvCi9Fy8MQ1MleFA==}
     peerDependencies: