diff --git a/.changeset/modern-singers-watch.md b/.changeset/modern-singers-watch.md
new file mode 100644
index 000000000..8eeaac8e0
--- /dev/null
+++ b/.changeset/modern-singers-watch.md
@@ -0,0 +1,5 @@
+---
+'@ryanatkn/fuz': patch
+---
+
+fix ssr
diff --git a/.changeset/new-berries-sleep.md b/.changeset/new-berries-sleep.md
new file mode 100644
index 000000000..7e5d70a2c
--- /dev/null
+++ b/.changeset/new-berries-sleep.md
@@ -0,0 +1,9 @@
+---
+'@ryanatkn/fuz': minor
+---
+
+rework `Themed.svelte`
+
+- move some helpers from `Themed.svelte` to `theme.ts`
+- replace `get_theme` and `get_color_scheme` with `get_themer`
+- remove `Themed_Scope.svelte` for now because it's too broken
diff --git a/package-lock.json b/package-lock.json
index e41bad2fb..4819aba5a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,9 +14,9 @@
         "@ryanatkn/eslint-config": "^0.4.0",
         "@ryanatkn/fuz_code": "^0.15.0",
         "@ryanatkn/gro": "^0.129.0",
-        "@ryanatkn/moss": "^0.6.3",
+        "@ryanatkn/moss": "^0.7.0",
         "@sveltejs/adapter-static": "^3.0.2",
-        "@sveltejs/kit": "^2.5.17",
+        "@sveltejs/kit": "^2.5.18",
         "@sveltejs/package": "^2.3.2",
         "@sveltejs/vite-plugin-svelte": "^3.1.1",
         "@types/node": "^20.14.8",
@@ -28,7 +28,7 @@
         "prettier-plugin-svelte": "^3.2.5",
         "prism-svelte": "^0.5.0",
         "prismjs": "^1.29.0",
-        "svelte": "^5.0.0-next.164",
+        "svelte": "^5.0.0-next.175",
         "svelte-check": "^3.8.2",
         "tslib": "^2.6.3",
         "typescript": "^5.5.2",
@@ -485,9 +485,9 @@
       }
     },
     "node_modules/@ryanatkn/moss": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/@ryanatkn/moss/-/moss-0.6.3.tgz",
-      "integrity": "sha512-HxnupZSj50gMY6kkojyaG5aqUsw9yHRHvFEzzxux99fGMGaXxMafq3WJ2ag0kHEdgyttKlGIeXtsLLrwfvM4wA==",
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@ryanatkn/moss/-/moss-0.7.0.tgz",
+      "integrity": "sha512-xE/eksGvf+lCIxyhfCQvFeh0qLgBZkDdqcNJuyFmpyu+fXNFAYzo09YcH5MTP8lLSBe879MJssk9ZBjTKbVsKQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -508,9 +508,9 @@
       }
     },
     "node_modules/@sveltejs/kit": {
-      "version": "2.5.17",
-      "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.5.17.tgz",
-      "integrity": "sha512-wiADwq7VreR3ctOyxilAZOfPz3Jiy2IIp2C8gfafhTdQaVuGIHllfqQm8dXZKADymKr3uShxzgLZFT+a+CM4kA==",
+      "version": "2.5.18",
+      "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.5.18.tgz",
+      "integrity": "sha512-+g06hvpVAnH7b4CDjhnTDgFWBKBiQJpuSmQeGYOuzbO3SC3tdYjRNlDCrafvDtKbGiT2uxY5Dn9qdEUGVZdWOQ==",
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
@@ -2826,9 +2826,9 @@
       }
     },
     "node_modules/svelte": {
-      "version": "5.0.0-next.164",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.0.0-next.164.tgz",
-      "integrity": "sha512-e+V1dSZLCCu0Ln7RKwSl/zP9ZZFbDGW7ABfGQYU/+6sWponizQocmyHyKHzctor0ruGgJKOF7QQB+M6lE2+UrA==",
+      "version": "5.0.0-next.175",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.0.0-next.175.tgz",
+      "integrity": "sha512-fWMI0O3PiKFWvTohAEJRkd6RymR3uo7PO8GrNfyx57KDvmmK1KYRzAdHjx+RsKl8oZhfWeJHiot6iebgY8lJng==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
diff --git a/package.json b/package.json
index e45e86476..f2d471f8a 100644
--- a/package.json
+++ b/package.json
@@ -45,9 +45,9 @@
     "@ryanatkn/eslint-config": "^0.4.0",
     "@ryanatkn/fuz_code": "^0.15.0",
     "@ryanatkn/gro": "^0.129.0",
-    "@ryanatkn/moss": "^0.6.3",
+    "@ryanatkn/moss": "^0.7.0",
     "@sveltejs/adapter-static": "^3.0.2",
-    "@sveltejs/kit": "^2.5.17",
+    "@sveltejs/kit": "^2.5.18",
     "@sveltejs/package": "^2.3.2",
     "@sveltejs/vite-plugin-svelte": "^3.1.1",
     "@types/node": "^20.14.8",
@@ -59,7 +59,7 @@
     "prettier-plugin-svelte": "^3.2.5",
     "prism-svelte": "^0.5.0",
     "prismjs": "^1.29.0",
-    "svelte": "^5.0.0-next.164",
+    "svelte": "^5.0.0-next.175",
     "svelte-check": "^3.8.2",
     "tslib": "^2.6.3",
     "typescript": "^5.5.2",
@@ -324,14 +324,9 @@
       "svelte": "./dist/Theme_Input.svelte",
       "default": "./dist/Theme_Input.svelte"
     },
-    "./theme.js": {
-      "types": "./dist/theme.d.ts",
-      "default": "./dist/theme.js"
-    },
-    "./Themed_Scope.svelte": {
-      "types": "./dist/Themed_Scope.svelte.d.ts",
-      "svelte": "./dist/Themed_Scope.svelte",
-      "default": "./dist/Themed_Scope.svelte"
+    "./theme.svelte.js": {
+      "types": "./dist/theme.svelte.d.ts",
+      "default": "./dist/theme.svelte.js"
     },
     "./Themed.svelte": {
       "types": "./dist/Themed.svelte.d.ts",
diff --git a/src/app.html b/src/app.html
index 94e54be2f..e8329aae4 100644
--- a/src/app.html
+++ b/src/app.html
@@ -8,7 +8,6 @@
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">
-		<noscript>This website temporarily requires JS until some bugs get fixed.</noscript>
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/src/lib/Color_Scheme_Input.svelte b/src/lib/Color_Scheme_Input.svelte
index 02b684b57..1af838509 100644
--- a/src/lib/Color_Scheme_Input.svelte
+++ b/src/lib/Color_Scheme_Input.svelte
@@ -1,22 +1,19 @@
 <script lang="ts">
-	import type {Writable} from 'svelte/store';
 	import {swallow} from '@ryanatkn/belt/dom.js';
 	import {color_schemes, type Color_Scheme} from '@ryanatkn/moss/theme.js';
 
-	import {get_color_scheme} from '$lib/Themed.svelte';
+	import {get_themer} from '$lib/theme.svelte.js';
 
 	interface Props {
-		selected_color_scheme?: Writable<Color_Scheme | null>;
-		select?: ((color_scheme: Color_Scheme) => void | boolean) | null;
-		onselect?: (color_scheme: Color_Scheme) => void;
+		value?: {color_scheme: Color_Scheme};
+		onchange?: (color_scheme: Color_Scheme) => void;
 	}
 
 	const {
-		selected_color_scheme = get_color_scheme(),
-		select = (color_scheme) => {
-			$selected_color_scheme = color_scheme;
+		value = get_themer(),
+		onchange = (color_scheme) => {
+			value.color_scheme = color_scheme; // won't work with POJOs but users could provide their own onchange in that case
 		},
-		onselect,
 	}: Props = $props();
 </script>
 
@@ -24,7 +21,7 @@
 https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menubar_role -->
 <menu class="color_scheme_control unstyled">
 	{#each color_schemes as color_scheme (color_scheme)}
-		{@const selected = color_scheme === $selected_color_scheme}
+		{@const selected = color_scheme === value.color_scheme}
 		<button
 			class="color_scheme"
 			type="button"
@@ -36,9 +33,7 @@ https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menubar_ro
 			aria-checked={selected}
 			onclick={(e) => {
 				swallow(e);
-				if (select?.(color_scheme) !== false) {
-					onselect?.(color_scheme);
-				}
+				onchange(color_scheme);
 			}}
 		>
 			<div class="content">{color_scheme}</div>
diff --git a/src/lib/Mdn_Link.svelte b/src/lib/Mdn_Link.svelte
index 0d0b94c01..ecc4a1ec1 100644
--- a/src/lib/Mdn_Link.svelte
+++ b/src/lib/Mdn_Link.svelte
@@ -25,12 +25,11 @@
 	const final_children = $derived(children ?? strip_end(path, '/').split('/').at(-1)!);
 </script>
 
-<a {...attrs} {href} class="chip nowrap">
-	<Mdn_Logo
-		classes="inline_block mr_sm vertical_align_middle"
-	/>{#if typeof final_children === 'string'}
+<a {...attrs} {href} class="chip nowrap"
+	>{#if typeof final_children === 'string'}
 		<span class="font_mono">{final_children}</span>
 	{:else}
 		{@render final_children()}
 	{/if}
-</a>
+	<Mdn_Logo classes="inline_block mx_xs3 vertical_align_middle" /></a
+>
diff --git a/src/lib/Theme_Input.svelte b/src/lib/Theme_Input.svelte
index 2cb0faa04..77a052c95 100644
--- a/src/lib/Theme_Input.svelte
+++ b/src/lib/Theme_Input.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
-	import type {Readable} from 'svelte/store';
 	import {swallow} from '@ryanatkn/belt/dom.js';
 	import type {Theme} from '@ryanatkn/moss/theme.js';
 	import {default_themes} from '@ryanatkn/moss/themes.js';
 
-	import {get_theme} from '$lib/Themed.svelte';
+	import {get_themer} from '$lib/theme.svelte.js';
 
 	interface Props {
-		selected_theme?: Readable<Theme | null>;
+		selected_theme?: {theme: Theme};
 		themes?: Theme[];
 		enable_editing?: boolean;
 		select?: ((theme: Theme) => void | boolean) | null;
@@ -16,23 +15,21 @@
 	}
 
 	const {
-		selected_theme = get_theme(),
+		selected_theme = get_themer(),
 		themes = default_themes,
 		enable_editing = false,
 		select = (theme) => {
-			$selected_theme = theme;
+			selected_theme.theme = theme;
 		},
 		onselect,
 		onedit,
 	}: Props = $props();
-
-	const selected_theme_name = $derived($selected_theme?.name);
 </script>
 
 <menu class="theme_input unstyled">
 	{#each themes as theme (theme.name)}
 		<!-- TODO @multiple proper equality check, won't work when we allow editing, need an id or unique names and a deep equality check -->
-		{@const selected = theme.name === selected_theme_name}
+		{@const selected = theme.name === selected_theme.theme.name}
 		<li class="row" role="none">
 			<button
 				type="button"
diff --git a/src/lib/Themed.svelte b/src/lib/Themed.svelte
index 625355820..d6cfc7bb8 100644
--- a/src/lib/Themed.svelte
+++ b/src/lib/Themed.svelte
@@ -1,38 +1,12 @@
 <script lang="ts" context="module">
 	let mounted = false;
-
-	// TODO change API to use runes
-
-	const THEME_KEY = Symbol('theme');
-	export const get_theme = (): Writable<Theme> => getContext(THEME_KEY);
-	export const set_theme = (store: Writable<Theme>): Writable<Theme> =>
-		setContext(THEME_KEY, store);
-
-	const COLOR_SCHEME_KEY = Symbol('color_scheme');
-	export const get_color_scheme = (): Writable<Color_Scheme | null> => getContext(COLOR_SCHEME_KEY);
-	export const set_color_scheme = (
-		store: Writable<Color_Scheme | null>,
-	): Writable<Color_Scheme | null> => setContext(COLOR_SCHEME_KEY, store);
-
-	/**
-	 * Creates an HTML style string to be inserted into the `head`
-	 * that overrides the theme for a part of the page.
-	 * @param style same as the result of a call to `render_theme_style`
-	 * @returns HTML string with the style tag and its contents
-	 */
-	export const create_theme_style_html = (
-		style: string,
-	): string => `<style nonce="%sveltekit.nonce%">
-	${style}
-</style>`;
 </script>
 
 <script lang="ts">
-	import {getContext, onDestroy, onMount, setContext, type Snippet} from 'svelte';
-	import {writable, type Writable} from 'svelte/store';
-	import {render_theme_style, type Theme, type Color_Scheme} from '@ryanatkn/moss/theme.js';
+	import {onMount, type Snippet} from 'svelte';
+	import {render_theme_style, type Color_Scheme, type Theme} from '@ryanatkn/moss/theme.js';
 	import {DEFAULT_THEME} from '@ryanatkn/moss/themes.js';
-	import {BROWSER, DEV} from 'esm-env';
+	import {DEV} from 'esm-env';
 
 	import {
 		create_theme_setup_script,
@@ -41,7 +15,10 @@
 		sync_color_scheme as default_sync_color_scheme,
 		save_theme as default_save_theme,
 		load_theme as default_load_theme,
-	} from '$lib/theme.js';
+		set_themer,
+		create_theme_style_html,
+		Themer,
+	} from '$lib/theme.svelte.js';
 	import {effect_skip} from '$lib/rune_helpers.svelte.js';
 
 	interface Props {
@@ -50,31 +27,22 @@
 		save_color_scheme?: typeof default_save_color_scheme;
 		load_theme?: typeof default_load_theme;
 		save_theme?: typeof default_save_theme;
+		theme_fallback?: Theme | undefined;
+		color_scheme_fallback?: Color_Scheme | undefined;
 		/**
-		 * A writable store containing a theme object.
+		 * A reactive class containing the selected theme and color scheme.
 		 * Defaults to the first default theme.
-		 * Like `color_scheme`, the store reference is not reactive
+		 * The class reference is not reactive
 		 * because it's set in context without a wrapper, use `{#key theme}` if it changes.
 		 * @nonreactive
 		 */
-		selected_theme?: Writable<Theme>;
-		/**
-		 * A writable store containing the active color scheme.
-		 * Defaults to looking in localStorage and falls back to detecting with `prefers-color-scheme`.
-		 * Like `theme`, the store reference is not reactive
-		 * because it's set in context without a wrapper, use `{#key color_scheme}` if it changes.
-		 * @nonreactive
-		 */
-		selected_color_scheme?: Writable<Color_Scheme | null>;
-		color_scheme_fallback?: Color_Scheme | undefined;
-		color_scheme_css?: string | undefined;
+		themer?: Themer;
 		children: Snippet<
 			[
+				themer: Themer,
 				style: string | null,
 				theme_style_html: string | null,
 				theme_setup_script: string,
-				selected_theme: Writable<Theme>,
-				selected_color_scheme: Writable<Color_Scheme | null>,
 			]
 		>;
 	}
@@ -85,99 +53,70 @@
 		save_color_scheme = default_save_color_scheme,
 		load_theme = default_load_theme,
 		save_theme = default_save_theme,
-		selected_theme = writable(load_theme()),
-		selected_color_scheme = writable(load_color_scheme()),
+		theme_fallback,
 		color_scheme_fallback,
-		color_scheme_css,
+		themer = new Themer(load_theme(theme_fallback), load_color_scheme(color_scheme_fallback)),
 		children,
 	}: Props = $props();
 
 	// TODO improve this so it works without `unsafe-inline` in the CSP - hash/nonce?
 
 	// In dev mode only, warn about misuse of the singleton `Themed`.
-	// Use `Themed_Scope` for non-global themes and color schemes.
 	if (DEV) {
 		onMount(() => {
 			if (mounted) {
-				console.warn('more than one Themed was mounted, use Themed_Scope if this was intended'); // eslint-disable-line no-console
+				console.warn('more than one Themed was mounted'); // eslint-disable-line no-console
+				// console.warn('more than one Themed was mounted, use Themed_Scope if this was intended'); // TODO @multiple revisit Themed_Scope
 			}
 			mounted = true;
-		});
-		onDestroy(() => {
-			mounted = false;
+			return () => {
+				mounted = false;
+			};
 		});
 	}
 
 	/**
 	 * `Themed` adds global color scheme and theme support to the page.
-	 * It also sets writable stores containing the theme and color scheme in the Svelte context.
-	 *
-	 * To scope the theme to only a part of the page, use `Themed_Scope`.
-	 * There is some copied code between the two,
-	 * but combining them was too complicated both internally and externally.
+	 * It also sets in the Svelte context a reactive `themer` containing the theme and color scheme.
 	 */
 
-	set_theme(selected_theme);
+	//  TODO @multiple revisit Themed_Scope
+	//  * To scope the theme to only a part of the page, use `Themed_Scope`.
+	//  * There is some duplicated code between the two,
+	//  * but combining them was too complicated both internally and externally.
 
-	set_color_scheme(selected_color_scheme);
+	set_themer(themer);
 
-	const selected_theme_name = $derived($selected_theme.name);
+	const selected_theme_name = $derived(themer.theme.name);
 	const style = $derived(
 		selected_theme_name === DEFAULT_THEME.name // TODO @multiple proper equality check, won't work when we allow editing, need an id or unique names and a deep equality check
 			? null
-			: render_theme_style($selected_theme),
+			: render_theme_style(themer.theme),
 	);
 	const theme_style_html = $derived(style ? create_theme_style_html(style) : null);
 	const theme_setup_script = $derived(create_theme_setup_script(color_scheme_fallback));
 
 	effect_skip((skip) => {
-		const v = $selected_color_scheme;
+		const v = themer.color_scheme;
 		if (skip) return;
 		sync_color_scheme(v);
 	});
 	effect_skip((skip) => {
-		const v = $selected_color_scheme;
+		const v = themer.color_scheme;
 		if (skip) return;
 		save_color_scheme(v); // helper may change, so is separate from `sync_color_scheme`
 	});
 	effect_skip((skip) => {
-		const v = $selected_theme;
+		const v = themer.theme;
 		if (skip) return;
 		save_theme(v);
 	});
-
-	// TODO this is messy and probably wrong -- do we want both values?
-	// or only one if there's a defined fallback? how to sync with the setup script?
-	const final_color_scheme_css = $derived(
-		color_scheme_css ??
-			(color_scheme_fallback === 'dark' || color_scheme_fallback === 'light'
-				? color_scheme_fallback
-				: BROWSER && matchMedia('(prefers-color-scheme: dark)').matches
-					? 'dark light'
-					: 'light dark'),
-	);
 </script>
 
 <!-- eslint-disable svelte/no-at-html-tags -->
 <svelte:head>
 	{#if theme_style_html}{@html theme_style_html}{/if}
-	{#if theme_setup_script}
-		<meta name="color-scheme" content={final_color_scheme_css} />
-		<!--
-			This works around the Svelte 5 warning for `<svelte:element this="literal"`.
-			We can't use the actual script tag because it causes other parsing errors.
-			Maybe there's a better way to do this besides creating a script in the `head`?
-			@see https://github.com/sveltejs/svelte/pull/11454
-			@see https://github.com/sveltejs/svelte/issues/11398
-		-->
-		<svelte:element this={'script'}>{@html theme_setup_script}</svelte:element>
-	{/if}
+	{#if theme_setup_script}{@html theme_setup_script}{/if}
 </svelte:head>
 
-{@render children(
-	style,
-	theme_style_html,
-	theme_setup_script,
-	selected_theme,
-	selected_color_scheme,
-)}
+{@render children(themer, style, theme_style_html, theme_setup_script)}
diff --git a/src/lib/Themed_Scope.svelte b/src/lib/Themed_Scope.svelte
deleted file mode 100644
index 412ea7816..000000000
--- a/src/lib/Themed_Scope.svelte
+++ /dev/null
@@ -1,99 +0,0 @@
-<script lang="ts" context="module">
-	let _id = 0;
-</script>
-
-<script lang="ts">
-	import {get, writable, type Writable} from 'svelte/store';
-	import type {Snippet} from 'svelte';
-	import {render_theme_style, type Theme, type Color_Scheme} from '@ryanatkn/moss/theme.js';
-	import {BROWSER} from 'esm-env';
-
-	import {
-		set_color_scheme,
-		get_color_scheme,
-		set_theme,
-		get_theme,
-		create_theme_style_html,
-	} from '$lib/Themed.svelte';
-
-	interface Props {
-		/**
-		 * A writable store containing a theme object.
-		 * Defaults to the first default theme.
-		 * Like `color_scheme`, the store reference is not reactive
-		 * because it's set in context without a wrapper, use `{#key theme}` if it changes.
-		 * @nonreactive
-		 */
-		selected_theme?: Writable<Theme>;
-		/**
-		 * A writable store containing the active color scheme.
-		 * Defaults to looking in localStorage and falls back to detecting with `prefers-color-scheme`.
-		 * Like `theme`, the store reference is not reactive
-		 * because it's set in context without a wrapper, use `{#key color_scheme}` if it changes.
-		 * @nonreactive
-		 */
-		selected_color_scheme?: Writable<Color_Scheme | null>;
-		tagName?: string;
-		children: Snippet<
-			[
-				id: string,
-				style: string | null,
-				theme_style_html: string | null,
-				theme: Writable<Theme>,
-				color_scheme: Writable<Color_Scheme | null>,
-			]
-		>;
-	}
-
-	const {
-		selected_theme = writable(get(get_theme())),
-		selected_color_scheme = writable(get(get_color_scheme())),
-		tagName = 'div',
-		children,
-	}: Props = $props();
-
-	const id = 'themed_' + _id++;
-
-	/**
-	 * `Themed_Scope` is a variant of `Themed` that scopes its theme to one branch of the DOM.
-	 *
-	 * To sync the theme globally and persist to local storage, use `Themed`.
-	 * There is some copied code between the two,
-	 * but combining them was too complicated both internally and externally.
-	 *
-	 * This is implemented as a component instead of an action so it can write to the `<head>`.
-	 * The main downside of the current implementation when scoped
-	 * is it adds an extra element to the tree,
-	 * though a more complicated API could be devised to accept an `Element` as a prop.
-	 */
-
-	set_theme(selected_theme);
-
-	set_color_scheme(selected_color_scheme);
-
-	const style = $derived(render_theme_style($selected_theme, {id, empty_default_theme: false}));
-	const theme_style_html = $derived(style ? create_theme_style_html(style) : null);
-
-	const final_color__scheme = $derived(
-		$selected_color_scheme === 'dark' || $selected_color_scheme === 'light'
-			? $selected_color_scheme
-			: BROWSER && matchMedia('(prefers-color-scheme: dark)').matches
-				? 'dark'
-				: 'light',
-	); // fallback to best guess
-</script>
-
-<!-- eslint-disable svelte/no-at-html-tags -->
-<svelte:head>
-	{#if theme_style_html}{@html theme_style_html}{/if}
-</svelte:head>
-
-<svelte:element this={tagName} {id} class="themed" class:dark={final_color__scheme === 'dark'}
-	>{@render children(
-		id,
-		style,
-		theme_style_html,
-		selected_theme,
-		selected_color_scheme,
-	)}</svelte:element
->
diff --git a/src/lib/Tome_Subheading.svelte b/src/lib/Tome_Subheading.svelte
index 13799aefe..6efd12b06 100644
--- a/src/lib/Tome_Subheading.svelte
+++ b/src/lib/Tome_Subheading.svelte
@@ -13,7 +13,7 @@
 
 	interface Props {
 		text: string;
-		slug: string;
+		slug: string; // TODO doesn't handle duplicate slugs for subheadings under different `Tome_Title`s, e.g. the generic "example-usage" and "more-details" will cause issues if they're used elsewhere
 		tag?: Library_Link_Tag;
 		attrs?: SvelteHTMLElements['h3'];
 		children?: Snippet;
@@ -25,11 +25,16 @@
 
 	const library_links = get_library_links();
 
+	// TODO find the other of these hacks - what's going on? I can't seem to find anything searching online about this, it's `.` on SSR for some reason
+	const TODO_HACK_base = (base as any) === '.' ? '' : base;
+
 	// Add subheadings only if not on the root page.
 	// TODO make reactive?
-	if ($page.url.pathname !== base + library_links.root_path) {
+	if ($page.url.pathname !== TODO_HACK_base + library_links.root_path) {
 		library_links.add(id, text, slug, tag);
-		onDestroy(() => library_links.remove(id));
+		onDestroy(() => {
+			library_links.remove(id);
+		});
 	}
 
 	const classes = $derived('tome_subheading' + (attrs?.class ? ' ' + attrs.class : ''));
diff --git a/src/lib/Tome_Title.svelte b/src/lib/Tome_Title.svelte
index 2d020ee76..32bd868fc 100644
--- a/src/lib/Tome_Title.svelte
+++ b/src/lib/Tome_Title.svelte
@@ -28,7 +28,9 @@
 	// const slug = $derived(slugify(tome.name));
 	// $effect(() => library_links.add(id, tome.name, slug));
 
-	onDestroy(() => library_links.remove(id));
+	onDestroy(() => {
+		library_links.remove(id);
+	});
 
 	const {path, path_is_selected} = $derived(to_library_path_info(tome.slug, $page.url.pathname));
 </script>
diff --git a/src/lib/theme.svelte.ts b/src/lib/theme.svelte.ts
new file mode 100644
index 000000000..4d98b6fd1
--- /dev/null
+++ b/src/lib/theme.svelte.ts
@@ -0,0 +1,153 @@
+import {color_schemes, type Color_Scheme, type Theme} from '@ryanatkn/moss/theme.js';
+import {default_themes} from '@ryanatkn/moss/themes.js';
+import {BROWSER} from 'esm-env';
+import {getContext, setContext} from 'svelte';
+
+// TODO Can we solve the problem of theme flashing? serialize the whole `Themer`?
+// I think so but we'd need Moss' `render_theme_style` to be available in the head somehow.
+// The current problem is that `render_theme_style` depends on all of the variables for the base theme,
+// but I think that can be fixed.
+// These get added to `create_theme_setup_script`:
+// render_theme_style_fn: string,
+// const render_theme_style = ${render_theme_style_fn};
+
+export class Themer {
+	theme: Theme = $state()!; // TODO better initialization?
+	color_scheme: Color_Scheme = $state()!; // TODO better initialization?
+
+	constructor(theme: Theme = default_themes[0], color_scheme: Color_Scheme = 'auto') {
+		if (!color_schemes.includes(color_scheme)) {
+			throw Error('unknown color scheme: ' + color_scheme);
+		}
+		this.theme = theme;
+		this.color_scheme = color_scheme;
+	}
+
+	toJSON(): Themer_Json {
+		return {
+			theme: this.theme,
+			color_scheme: this.color_scheme,
+		};
+	}
+}
+
+export interface Themer_Json {
+	theme: Theme;
+	color_scheme: Color_Scheme;
+}
+
+const THEME_STATE_KEY = Symbol('themer');
+export const get_themer = (): Themer => getContext(THEME_STATE_KEY);
+export const set_themer = (themer: Themer): Themer => setContext(THEME_STATE_KEY, themer);
+
+export const sync_color_scheme = (color_scheme: Color_Scheme | null): void => {
+	if (!BROWSER) return;
+	if (
+		color_scheme === 'dark' ||
+		(color_scheme !== 'light' && matchMedia('(prefers-color-scheme: dark)').matches)
+	) {
+		document.documentElement.classList.add('dark');
+	} else {
+		document.documentElement.classList.remove('dark');
+	}
+};
+
+export const COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
+
+// TODO @multiple refactor with a util
+export const save_color_scheme = (
+	color_scheme: Color_Scheme | null,
+	key = COLOR_SCHEME_STORAGE_KEY,
+): void => {
+	if (!BROWSER) return;
+	try {
+		if (color_scheme === null) {
+			localStorage.removeItem(key);
+		} else {
+			localStorage.setItem(key, color_scheme);
+		}
+	} catch (_) {}
+};
+
+// TODO @multiple refactor with a util
+export const load_color_scheme = (
+	fallback: Color_Scheme = 'auto',
+	key = COLOR_SCHEME_STORAGE_KEY,
+): Color_Scheme => {
+	if (!BROWSER) return fallback;
+	let loaded: any;
+	try {
+		loaded = localStorage.getItem(key);
+	} catch (_) {
+		return fallback;
+	}
+	if (color_schemes.includes(loaded)) {
+		return loaded; // TODO should parse, and also delete the stored key on failures
+	}
+	return fallback;
+};
+
+// TODO @multiple refactor with a util
+export const THEME_STORAGE_KEY = 'theme';
+
+export const save_theme = (theme: Theme | null, key = THEME_STORAGE_KEY): void => {
+	if (!BROWSER) return;
+	try {
+		if (theme === null) {
+			localStorage.removeItem(key);
+		} else {
+			localStorage.setItem(key, JSON.stringify(theme));
+		}
+	} catch (_) {}
+};
+
+// TODO @multiple refactor with a util
+export const load_theme = (fallback: Theme = default_themes[0], key = THEME_STORAGE_KEY): Theme => {
+	if (!BROWSER) return fallback;
+	try {
+		const v = localStorage.getItem(key);
+		const loaded = v === null ? v : JSON.parse(v);
+		if (loaded) {
+			return loaded;
+		}
+	} catch (_) {}
+	return fallback;
+};
+
+/**
+ * Creates an HTML script string to be inserted into the `head`
+ * that initializes the dark/light color scheme.
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
+ * Prefers a value in `localStorage` if available, and if not detects using `matchMedia`.
+ * On unexpected errors, like if `localStorage` is disabled, the `fallback` value is used.
+ * @param fallback sets `content` of `<meta name="color-scheme">` and the default if something fails
+ * @param key
+ * @returns HTML string with the color scheme setup script and a `color-schema` meta tag
+ */
+export const create_theme_setup_script = (
+	fallback: Color_Scheme = 'light',
+	key = COLOR_SCHEME_STORAGE_KEY,
+): string => `
+	<meta name="color-scheme" content="${fallback === 'dark' ? 'dark light' : 'light dark'}" />
+	<script nonce="%sveltekit.nonce%">
+		try {
+			let c = localStorage.getItem('${key}');
+			if (c === 'auto' || (c !== 'dark' && c !== 'light')) {
+				c = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+			}
+			if (c === 'dark') document.documentElement.classList.add('dark');
+		} catch (_) {${fallback === 'dark' ? " document.documentElement.classList.add('dark'); " : ''}}
+	</script>
+`;
+
+// TODO does the `nonce` here and above behave as desired?
+
+/**
+ * Creates an HTML style string to be inserted into the `head`
+ * that overrides the theme for a part of the page.
+ * @param style same as the result of a call to `render_theme_style`
+ * @returns HTML string with the style tag and its contents
+ */
+export const create_theme_style_html = (style: string): string => `<style nonce="%sveltekit.nonce%">
+	${style}
+</style>`;
diff --git a/src/lib/theme.ts b/src/lib/theme.ts
deleted file mode 100644
index 9025fbf87..000000000
--- a/src/lib/theme.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-import {color_schemes, type Color_Scheme, type Theme} from '@ryanatkn/moss/theme.js';
-import {default_themes} from '@ryanatkn/moss/themes.js';
-import {BROWSER} from 'esm-env';
-
-export const sync_color_scheme = (color_scheme: Color_Scheme | null): void => {
-	if (!BROWSER) return;
-	if (
-		color_scheme === 'dark' ||
-		(color_scheme !== 'light' && matchMedia('(prefers-color-scheme: dark)').matches)
-	) {
-		document.documentElement.classList.add('dark');
-	} else {
-		document.documentElement.classList.remove('dark');
-	}
-};
-
-export const COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
-
-// TODO @multiple refactor, probably with a storage util
-export const save_color_scheme = (
-	color_scheme: Color_Scheme | null,
-	key = COLOR_SCHEME_STORAGE_KEY,
-): void => {
-	if (!BROWSER) return;
-	try {
-		if (color_scheme === null) {
-			localStorage.removeItem(key);
-		} else {
-			localStorage.setItem(key, color_scheme);
-		}
-	} catch (_) {}
-};
-
-export const load_color_scheme = (
-	fallback: Color_Scheme | null = 'auto',
-	key = COLOR_SCHEME_STORAGE_KEY,
-): Color_Scheme | null => {
-	if (!BROWSER) return null;
-	let stored: any;
-	try {
-		stored = localStorage.getItem(key);
-	} catch (_) {
-		return fallback;
-	}
-	if (color_schemes.includes(stored)) {
-		return stored; // TODO should parse, and also delete the stored key on failures
-	}
-	return fallback;
-};
-
-// TODO @multiple refactor, probably with a storage util
-export const THEME_STORAGE_KEY = 'theme';
-
-export const save_theme = (theme: Theme | null, key = THEME_STORAGE_KEY): void => {
-	if (!BROWSER) return;
-	try {
-		if (theme === null) {
-			localStorage.removeItem(key);
-		} else {
-			localStorage.setItem(key, JSON.stringify(theme));
-		}
-	} catch (_) {}
-};
-
-export const load_theme = (fallback: Theme = default_themes[0], key = THEME_STORAGE_KEY): Theme => {
-	if (!BROWSER) return fallback;
-	try {
-		const v = localStorage.getItem(key);
-		const stored = v === null ? v : JSON.parse(v);
-		if (stored) {
-			return stored;
-		}
-	} catch (_) {}
-	return fallback;
-};
-
-/**
- * Creates an HTML script string to be inserted into the `head`
- * that initializes the dark/light color scheme.
- * https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
- * Prefers a value in `localStorage` if available, and if not detects using `matchMedia`.
- * On unexpected errors, like if `localStorage` is disabled, the `fallback` value is used.
- * @param fallback
- * @param key
- * @returns HTML string with the color scheme setup script and a `color-schema` meta tag
- */
-export const create_theme_setup_script = (
-	fallback: Color_Scheme = 'light',
-	key = COLOR_SCHEME_STORAGE_KEY,
-): string => `
-	try {
-		let c = localStorage.getItem('${key}');
-		if (c === 'auto' || (c !== 'dark' && c !== 'light')) {
-			c = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-		}
-		if (c === 'dark') document.documentElement.classList.add('dark');
-	} catch (_) { ${fallback === 'dark' ? "document.documentElement.classList.add('dark');" : ''} }
-`;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 57a046b1b..edb85c656 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -10,6 +10,7 @@
 	import {set_pkg} from '$routes/pkg.js';
 	import {package_json, src_json} from '$routes/package.js';
 	import Spiders from '$lib/Spiders.svelte';
+
 	// TODO re-enable this, see comment below
 	// import Contextmenu_Root from '$lib/Contextmenu_Root.svelte';
 	// import Dialog from '$lib/Dialog.svelte';
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
index da1d0443b..189f71e2e 100644
--- a/src/routes/+layout.ts
+++ b/src/routes/+layout.ts
@@ -1,8 +1 @@
 export const prerender = true;
-// TODO This appears to cause a bug in Vite with Prism via @ryanatkn/fuz_code
-// that requires deleting the Vite cache directory
-// (deleting `node_modules/.vite` is the only solution I can find,
-// restarting the dev server and hard reloading the browser doesn't work ),
-// though I don't see an open issue, only the closed one
-// if for some reason this isn't deleted, be sure to add a `noscript` tag
-export const ssr = false;
diff --git a/src/routes/Theme_Form.svelte b/src/routes/Theme_Form.svelte
index 88c5bf566..70524f716 100644
--- a/src/routes/Theme_Form.svelte
+++ b/src/routes/Theme_Form.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	// TODO @multiple why is this import needed? `Code` already imports it. Fails in dev with SSR enabled without it. Is there a Vite config option that would be better? I tried the combinations of `ssr.external/noExternal/external` with `@ryanatkn/fuz_code` and `prismjs`.
+	import Prism from 'prismjs';
+	Prism;
 	import Code from '@ryanatkn/fuz_code/Code.svelte';
 	import {swallow} from '@ryanatkn/belt/dom.js';
 	import {render_theme_style, type Style_Variable, type Theme} from '@ryanatkn/moss/theme.js';
@@ -66,8 +69,7 @@
 		{#if editing}edit{:else}create{/if} theme
 	</h2>
 	<aside>
-		Creating and editing themes at runtime is a work in progress, but you can click around to see
-		where it's going!
+		⚠️ Creating and editing themes at runtime is a work in progress i.e. totally unfinished.
 	</aside>
 	<header>
 		<div class="variables_header">
diff --git a/src/routes/library/Alert/+page.svelte b/src/routes/library/Alert/+page.svelte
index 61e810320..045f8bb50 100644
--- a/src/routes/library/Alert/+page.svelte
+++ b/src/routes/library/Alert/+page.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	// TODO @multiple why is this import needed? `Code` already imports it. Fails in dev with SSR enabled without it. Is there a Vite config option that would be better? I tried the combinations of `ssr.external/noExternal/external` with `@ryanatkn/fuz_code` and `prismjs`.
+	import Prism from 'prismjs';
+	Prism;
 	import Code from '@ryanatkn/fuz_code/Code.svelte';
 
 	import {get_tome} from '$lib/tome.js';
diff --git a/src/routes/library/Breadcrumb/+page.svelte b/src/routes/library/Breadcrumb/+page.svelte
index 7d1046c14..435a7fafe 100644
--- a/src/routes/library/Breadcrumb/+page.svelte
+++ b/src/routes/library/Breadcrumb/+page.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	// TODO @multiple why is this import needed? `Code` already imports it. Fails in dev with SSR enabled without it. Is there a Vite config option that would be better? I tried the combinations of `ssr.external/noExternal/external` with `@ryanatkn/fuz_code` and `prismjs`.
+	import Prism from 'prismjs';
+	Prism;
 	import Code from '@ryanatkn/fuz_code/Code.svelte';
 
 	import {get_tome} from '$lib/tome.js';
diff --git a/src/routes/library/Breadcrumb/Breadcrumb_Example.svelte b/src/routes/library/Breadcrumb/Breadcrumb_Example.svelte
index 0e5bd44d7..caf9ec51e 100644
--- a/src/routes/library/Breadcrumb/Breadcrumb_Example.svelte
+++ b/src/routes/library/Breadcrumb/Breadcrumb_Example.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	// TODO @multiple why is this import needed? `Code` already imports it. Fails in dev with SSR enabled without it. Is there a Vite config option that would be better? I tried the combinations of `ssr.external/noExternal/external` with `@ryanatkn/fuz_code` and `prismjs`.
+	import Prism from 'prismjs';
+	Prism;
 	import Code from '@ryanatkn/fuz_code/Code.svelte';
 
 	import Breadcrumb from '$lib/Breadcrumb.svelte';
diff --git a/src/routes/library/Card/+page.svelte b/src/routes/library/Card/+page.svelte
index 143c3ce74..708c63d71 100644
--- a/src/routes/library/Card/+page.svelte
+++ b/src/routes/library/Card/+page.svelte
@@ -1,5 +1,8 @@
 <script lang="ts">
 	import {base} from '$app/paths';
+	// TODO @multiple why is this import needed? `Code` already imports it. Fails in dev with SSR enabled without it. Is there a Vite config option that would be better? I tried the combinations of `ssr.external/noExternal/external` with `@ryanatkn/fuz_code` and `prismjs`.
+	import Prism from 'prismjs';
+	Prism;
 	import Code from '@ryanatkn/fuz_code/Code.svelte';
 
 	import {get_tome} from '$lib/tome.js';
diff --git a/src/routes/library/Contextmenu/Example_Basic.svelte b/src/routes/library/Contextmenu/Example_Basic.svelte
index ed5b8d37d..8edcb58bd 100644
--- a/src/routes/library/Contextmenu/Example_Basic.svelte
+++ b/src/routes/library/Contextmenu/Example_Basic.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	// TODO @multiple why is this import needed? `Code` already imports it. Fails in dev with SSR enabled without it. Is there a Vite config option that would be better? I tried the combinations of `ssr.external/noExternal/external` with `@ryanatkn/fuz_code` and `prismjs`.
+	import Prism from 'prismjs';
+	Prism;
 	import Code from '@ryanatkn/fuz_code/Code.svelte';
 
 	import Contextmenu_Root from '$lib/Contextmenu_Root.svelte';
diff --git a/src/routes/library/Contextmenu/Example_Custom_Instance.svelte b/src/routes/library/Contextmenu/Example_Custom_Instance.svelte
index 382f4d229..ef1211dfe 100644
--- a/src/routes/library/Contextmenu/Example_Custom_Instance.svelte
+++ b/src/routes/library/Contextmenu/Example_Custom_Instance.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	// TODO @multiple why is this import needed? `Code` already imports it. Fails in dev with SSR enabled without it. Is there a Vite config option that would be better? I tried the combinations of `ssr.external/noExternal/external` with `@ryanatkn/fuz_code` and `prismjs`.
+	import Prism from 'prismjs';
+	Prism;
 	import Code from '@ryanatkn/fuz_code/Code.svelte';
 	import {slide} from 'svelte/transition';
 
diff --git a/src/routes/library/Contextmenu/Example_Default_Behaviors.svelte b/src/routes/library/Contextmenu/Example_Default_Behaviors.svelte
index 708e72389..e0cc69373 100644
--- a/src/routes/library/Contextmenu/Example_Default_Behaviors.svelte
+++ b/src/routes/library/Contextmenu/Example_Default_Behaviors.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	// TODO @multiple why is this import needed? `Code` already imports it. Fails in dev with SSR enabled without it. Is there a Vite config option that would be better? I tried the combinations of `ssr.external/noExternal/external` with `@ryanatkn/fuz_code` and `prismjs`.
+	import Prism from 'prismjs';
+	Prism;
 	import Code from '@ryanatkn/fuz_code/Code.svelte';
 
 	import Contextmenu_Root from '$lib/Contextmenu_Root.svelte';
diff --git a/src/routes/library/Contextmenu/Example_Full.svelte b/src/routes/library/Contextmenu/Example_Full.svelte
index 5ac2113a2..4a510b27d 100644
--- a/src/routes/library/Contextmenu/Example_Full.svelte
+++ b/src/routes/library/Contextmenu/Example_Full.svelte
@@ -2,6 +2,9 @@
 	import {flip} from 'svelte/animate';
 	import {crossfade} from 'svelte/transition';
 	import {quintOut} from 'svelte/easing';
+	// TODO @multiple why is this import needed? `Code` already imports it. Fails in dev with SSR enabled without it. Is there a Vite config option that would be better? I tried the combinations of `ssr.external/noExternal/external` with `@ryanatkn/fuz_code` and `prismjs`.
+	import Prism from 'prismjs';
+	Prism;
 	import Code from '@ryanatkn/fuz_code/Code.svelte';
 
 	import Contextmenu_Root from '$lib/Contextmenu_Root.svelte';
diff --git a/src/routes/library/Details/+page.svelte b/src/routes/library/Details/+page.svelte
index ee5970f92..c53b4f6ff 100644
--- a/src/routes/library/Details/+page.svelte
+++ b/src/routes/library/Details/+page.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	// TODO @multiple why is this import needed? `Code` already imports it. Fails in dev with SSR enabled without it. Is there a Vite config option that would be better? I tried the combinations of `ssr.external/noExternal/external` with `@ryanatkn/fuz_code` and `prismjs`.
+	import Prism from 'prismjs';
+	Prism;
 	import Code from '@ryanatkn/fuz_code/Code.svelte';
 
 	import Tome_Detail from '$lib/Tome_Detail.svelte';
diff --git a/src/routes/library/Dialog/+page.svelte b/src/routes/library/Dialog/+page.svelte
index c62c2d780..201a43653 100644
--- a/src/routes/library/Dialog/+page.svelte
+++ b/src/routes/library/Dialog/+page.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
 	import {slide} from 'svelte/transition';
 	import {writable} from 'svelte/store';
+	// TODO @multiple why is this import needed? `Code` already imports it. Fails in dev with SSR enabled without it. Is there a Vite config option that would be better? I tried the combinations of `ssr.external/noExternal/external` with `@ryanatkn/fuz_code` and `prismjs`.
+	import Prism from 'prismjs';
+	Prism;
 	import Code from '@ryanatkn/fuz_code/Code.svelte';
 
 	import Alert from '$lib/Alert.svelte';
diff --git a/src/routes/library/Hue_Input/+page.svelte b/src/routes/library/Hue_Input/+page.svelte
index b0ab6554c..164e5ec58 100644
--- a/src/routes/library/Hue_Input/+page.svelte
+++ b/src/routes/library/Hue_Input/+page.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	// TODO @multiple why is this import needed? `Code` already imports it. Fails in dev with SSR enabled without it. Is there a Vite config option that would be better? I tried the combinations of `ssr.external/noExternal/external` with `@ryanatkn/fuz_code` and `prismjs`.
+	import Prism from 'prismjs';
+	Prism;
 	import Code from '@ryanatkn/fuz_code/Code.svelte';
 
 	import {get_tome} from '$lib/tome.js';
diff --git a/src/routes/library/Package_Detail/+page.svelte b/src/routes/library/Package_Detail/+page.svelte
index bde9d1fa9..3887dff06 100644
--- a/src/routes/library/Package_Detail/+page.svelte
+++ b/src/routes/library/Package_Detail/+page.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	// TODO @multiple why is this import needed? `Code` already imports it. Fails in dev with SSR enabled without it. Is there a Vite config option that would be better? I tried the combinations of `ssr.external/noExternal/external` with `@ryanatkn/fuz_code` and `prismjs`.
+	import Prism from 'prismjs';
+	Prism;
 	import Code from '@ryanatkn/fuz_code/Code.svelte';
 
 	import {get_tome} from '$lib/tome.js';
diff --git a/src/routes/library/Package_Summary/+page.svelte b/src/routes/library/Package_Summary/+page.svelte
index 32ba46e12..e091194dc 100644
--- a/src/routes/library/Package_Summary/+page.svelte
+++ b/src/routes/library/Package_Summary/+page.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	// TODO @multiple why is this import needed? `Code` already imports it. Fails in dev with SSR enabled without it. Is there a Vite config option that would be better? I tried the combinations of `ssr.external/noExternal/external` with `@ryanatkn/fuz_code` and `prismjs`.
+	import Prism from 'prismjs';
+	Prism;
 	import Code from '@ryanatkn/fuz_code/Code.svelte';
 
 	import {get_tome} from '$lib/tome.js';
diff --git a/src/routes/library/Pending_Animation/+page.svelte b/src/routes/library/Pending_Animation/+page.svelte
index 7a1ed14e6..f9c2b1d9c 100644
--- a/src/routes/library/Pending_Animation/+page.svelte
+++ b/src/routes/library/Pending_Animation/+page.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	// TODO @multiple why is this import needed? `Code` already imports it. Fails in dev with SSR enabled without it. Is there a Vite config option that would be better? I tried the combinations of `ssr.external/noExternal/external` with `@ryanatkn/fuz_code` and `prismjs`.
+	import Prism from 'prismjs';
+	Prism;
 	import Code from '@ryanatkn/fuz_code/Code.svelte';
 
 	import {get_tome} from '$lib/tome.js';
diff --git a/src/routes/library/Pending_Button/+page.svelte b/src/routes/library/Pending_Button/+page.svelte
index c00a74fb7..d79d44539 100644
--- a/src/routes/library/Pending_Button/+page.svelte
+++ b/src/routes/library/Pending_Button/+page.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	// TODO @multiple why is this import needed? `Code` already imports it. Fails in dev with SSR enabled without it. Is there a Vite config option that would be better? I tried the combinations of `ssr.external/noExternal/external` with `@ryanatkn/fuz_code` and `prismjs`.
+	import Prism from 'prismjs';
+	Prism;
 	import Code from '@ryanatkn/fuz_code/Code.svelte';
 
 	import {get_tome} from '$lib/tome.js';
diff --git a/src/routes/library/Redirect/+page.svelte b/src/routes/library/Redirect/+page.svelte
index 4f08a98a5..53100559a 100644
--- a/src/routes/library/Redirect/+page.svelte
+++ b/src/routes/library/Redirect/+page.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	// TODO @multiple why is this import needed? `Code` already imports it. Fails in dev with SSR enabled without it. Is there a Vite config option that would be better? I tried the combinations of `ssr.external/noExternal/external` with `@ryanatkn/fuz_code` and `prismjs`.
+	import Prism from 'prismjs';
+	Prism;
 	import Code from '@ryanatkn/fuz_code/Code.svelte';
 
 	import {get_tome} from '$lib/tome.js';
diff --git a/src/routes/library/Teleport/+page.svelte b/src/routes/library/Teleport/+page.svelte
index 455675265..013516032 100644
--- a/src/routes/library/Teleport/+page.svelte
+++ b/src/routes/library/Teleport/+page.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	// TODO @multiple why is this import needed? `Code` already imports it. Fails in dev with SSR enabled without it. Is there a Vite config option that would be better? I tried the combinations of `ssr.external/noExternal/external` with `@ryanatkn/fuz_code` and `prismjs`.
+	import Prism from 'prismjs';
+	Prism;
 	import Code from '@ryanatkn/fuz_code/Code.svelte';
 
 	import {get_tome} from '$lib/tome.js';
diff --git a/src/routes/library/Themed/+page.svelte b/src/routes/library/Themed/+page.svelte
index e1bd79f66..9f972c9eb 100644
--- a/src/routes/library/Themed/+page.svelte
+++ b/src/routes/library/Themed/+page.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
-	import {writable} from 'svelte/store';
+	// TODO @multiple why is this import needed? `Code` already imports it. Fails in dev with SSR enabled without it. Is there a Vite config option that would be better? I tried the combinations of `ssr.external/noExternal/external` with `@ryanatkn/fuz_code` and `prismjs`.
+	import Prism from 'prismjs';
+	Prism;
 	import Code from '@ryanatkn/fuz_code/Code.svelte';
 	import type {Theme} from '@ryanatkn/moss/theme.js';
 	import {default_themes} from '@ryanatkn/moss/themes.js';
@@ -9,13 +11,12 @@
 	import Dialog from '$lib/Dialog.svelte';
 	import {get_tome} from '$lib/tome.js';
 	import Color_Scheme_Input from '$lib/Color_Scheme_Input.svelte';
-	import {get_theme, get_color_scheme} from '$lib/Themed.svelte';
 	import Tome_Subheading from '$lib/Tome_Subheading.svelte';
 	import Theme_Input from '$lib/Theme_Input.svelte';
 	import Theme_Form from '$routes/Theme_Form.svelte';
 	import Mdn_Link from '$lib/Mdn_Link.svelte';
-	import Themed_Scope from '$lib/Themed_Scope.svelte';
-	import {save_theme} from '$lib/theme.js';
+	// import Themed_Scope from '$routes/library/Themed/Themed_Scope.svelte'; // TODO @multiple revisit Themed_Scope
+	import {get_themer} from '$lib/theme.svelte.js';
 
 	const LIBRARY_ITEM_NAME = 'Themed';
 
@@ -23,15 +24,7 @@
 
 	const themes = default_themes.slice();
 
-	const selected_theme = get_theme();
-	const selected_color_scheme = get_color_scheme();
-
-	// This is only needed for the custom controls below,
-	// it's automated by default with `Theme_Input` and the top-level `Themed`.
-	const select_theme = (theme: Theme): void => {
-		$selected_theme = theme;
-		save_theme(theme);
-	};
+	const themer = get_themer();
 
 	// let show_create_theme_dialog = false;
 	let editing_theme: null | Theme = $state(null);
@@ -57,6 +50,7 @@
 		<Details>
 			{#snippet summary()}Why the singleton?{/snippet}
 			<aside>
+				<p>Most theme usage affects the whole page, so Fuz makes that easy.</p>
 				<p>
 					By default <code>Themed</code> syncs its settings to the global <code>:root</code> tag and
 					persists to <code>localStorage</code>.
@@ -69,7 +63,8 @@
 					<li><code>load_theme</code></li>
 					<li><code>save_theme</code></li>
 				</ul>
-				<p>See <code>Themed_Scope</code> below to theme one branch of the DOM tree.</p>
+				<p>A feature to support partial page theming is planned with <code>Themed_Scope</code>.</p>
+				<!-- TODO @multiple revisit Themed_Scope <p>See <code>Themed_Scope</code> below to theme one branch of the DOM tree.</p> -->
 			</aside>
 		</Details>
 		<Details>
@@ -77,22 +72,32 @@
 			<aside>
 				<p>
 					<code>Themed</code> is designed to wrap every page at the top level so it can provide the
-					selected theme and color scheme in the Svelte context. It works without children, but
-					<code>get_theme</code> and <code>get_color_scheme</code> will fail unless you call
-					<code>set_theme</code> and <code>set_color_scheme</code> yourself.
+					selected theme and color scheme in the Svelte context via a <code>themer</code> instance.
+					It works without children, but <code>get_themer</code> will fail unless you call
+					<code>set_themer</code> yourself.
 				</p>
 				<p>
-					These context helpers provide the <code>writable</code> stores to your code, and they also
-					reduce boilerplate in the helper components documented below.
+					This lets you call <code>get_themer</code> to access the reactive <code>Themer</code>
+					class instance anywhere in your code. The helper components on this page like
+					<code>Color_Scheme_Input</code> and <code>Theme_Input</code> use it so they don't require
+					a <code>themer</code> prop.
 				</p>
 				<p>
-					If you set stores in context manually, they must be the same references as the <code
-						>Themed</code
-					> props:
+					If you don't don't want to wrap everything in <code>Themed</code> for some reason, you can
+					set a <code>Themer</code> in context manually. It must be the same reference as the
+					<code>Themed</code> prop:
 				</p>
 				<Code
 					content={'<' +
-						`script>\n\tconst theme = writable(...);\n\tconst color_scheme = writable(...);\n\tset_theme(theme);\n\tset_color_scheme(color_scheme);\n</script>\n<Themed\n\tselected_theme={theme}\n\tselected_color_scheme={color_scheme}\n/>\n<!-- sibling content... -->`}
+						`script>
+	const themer = new Themer(...);
+	set_themer(themer);
+</script>
+<Themed {themer} />
+<!--
+	sibling components not nested in \`Themed\`
+	can now call \`get_themer\`
+-->`}
 				/>
 			</aside>
 		</Details>
@@ -111,13 +116,12 @@
 			lang="ts"
 		/>
 		<Code content="<Color_Scheme_Input />" />
-		<p>Pass a prop to override the default:</p>
+		<p>Pass props to override the default:</p>
+		<!-- TODO this is bugged on page load, auto is SSR'd but doesn't update here, repro and report to Svelte -->
 		<Code
-			content={`<Color_Scheme_Input\n\tselected_color_scheme={writable(${
-				$selected_color_scheme
-					? "'" + JSON.stringify($selected_color_scheme).replace(/"/gu, '') + "'"
-					: 'null'
-			})}\n/>`}
+			content={`<Color_Scheme_Input\n\tvalue={{color_scheme: ${
+				"'" + JSON.stringify(themer.color_scheme).replace(/"/gu, '') + "'"
+			}}}\n\tonchange={...}\n/>`}
 		/>
 		<p>
 			The builtin themes support both dark and light color schemes. Custom themes may support one or
@@ -131,10 +135,11 @@
 					boilerplate.
 				</p>
 				<p>
-					By default, <code>Color_Scheme_Input</code> works with <code>Themed</code> to save the
-					user's preference to <code>localStorage</code>. To customize this behavior, pass a custom
-					<code>selected_color_scheme</code>
-					or <code>select</code> function prop.
+					By default, <code>Color_Scheme_Input</code> works with <code>Themed</code>'s
+					<code>themer</code> in context to save the user's preference to <code>localStorage</code>.
+					To customize this behavior, pass your own <code>value</code> or <code>onchange</code>
+					props. The <code>value</code> defaults to <code>get_themer()</code> so technically you
+					could call <code>set_themer</code>, but it's unlikely you want to override it in context.
 				</p>
 			</aside>
 		</Details>
@@ -155,8 +160,16 @@
 		<!-- <button class="mb_lg" onclick={() => (show_create_theme_dialog = true)} disabled
 				>create a new theme (todo)</button
 			> -->
-		<aside>The builtin themes need more work, but the proof of concept is ready!</aside>
+		<aside>
+			⚠️ The builtin themes need a lot more work, but the proof of concept seems to work.
+		</aside>
+		<aside>
+			⚠️ Custom themes currently pop in on page load. To see this, change from the base theme and
+			refresh the page. This can be fixed using a similar strategy that we use to avoid pop-in of
+			user-defined color schemes, but it's more involved.
+		</aside>
 	</section>
+	<!-- TODO @multiple revisit Themed_Scope
 	<section class="theme">
 		<Tome_Subheading text="Scoped themes" slug="scoped-themes" />
 		<Details>
@@ -168,12 +181,16 @@
 				<Code content={`<Themed_Scope {selected_theme}>\n\t\t...\n</Themed_Scope>`} />
 			</div>
 			<div>
-				<!-- TODO this is a lot of copypasta -->
 				{#each themes as theme (theme.name)}
-					<!-- TODO @multiple proper equality check, won't work when we allow editing, need an id or unique names and a deep equality check -->
+					TODO @multiple proper equality check, won't work when we allow editing, need an id or unique names and a deep equality check
 					{@const selected =
-						$selected_color_scheme === 'light' && theme.name === $selected_theme.name}
-					<Themed_Scope selected_theme={writable(theme)} selected_color_scheme={writable('light')}>
+						themer.color_scheme === 'light' && theme.name === themer.theme.name}
+					<Themed_Scope
+						themer={new Themer(
+							untrack(() => theme),
+							'light',
+						)}
+					>
 						<div class="box row p_sm">
 							<button
 								type="button"
@@ -181,7 +198,7 @@
 								class:selected
 								onclick={() => {
 									select_theme(theme);
-									$selected_color_scheme = 'light';
+									themer.color_scheme = 'light';
 								}}
 								>{#if selected}★{:else}☆{/if}</button
 							>
@@ -192,10 +209,15 @@
 					</Themed_Scope>
 				{/each}
 				{#each themes as theme (theme.name)}
-					<!-- TODO @multiple proper equality check, won't work when we allow editing, need an id or unique names and a deep equality check -->
+					@multiple proper equality check, won't work when we allow editing, need an id or unique names and a deep equality check
 					{@const selected =
-						$selected_color_scheme === 'dark' && theme.name === $selected_theme.name}
-					<Themed_Scope selected_theme={writable(theme)} selected_color_scheme={writable('dark')}>
+						themer.color_scheme === 'dark' && theme.name === themer.theme.name}
+					<Themed_Scope
+						themer={new Themer(
+							untrack(() => theme),
+							'dark',
+						)}
+					>
 						<div class="box row p_sm">
 							<button
 								type="button"
@@ -203,7 +225,7 @@
 								class:selected
 								onclick={() => {
 									select_theme(theme);
-									$selected_color_scheme = 'dark';
+									themer.color_scheme = 'dark';
 								}}
 								>{#if selected}★{:else}☆{/if}</button
 							>
@@ -216,8 +238,9 @@
 			</div>
 		</Details>
 	</section>
+	-->
 	<section class="theme">
-		<Tome_Subheading text="Theme usage" slug="theme-usage" />
+		<Tome_Subheading text="Example usage" slug="example-usage" />
 		<p>Themes are plain CSS that can be sourced in a variety of ways.</p>
 		<p>To use Fuz's base theme:</p>
 		<Code
@@ -241,58 +264,67 @@
 </Themed>`}
 		/>
 		<p>
-			<code>Themed</code> can be customized with the nonreactive, bindable, writable store props
-			<code>selected_theme</code>
-			and <code>selected_color_scheme</code>:
+			<code>Themed</code> can be customized with the the nonreactive prop
+			<code>themer</code>:
 		</p>
 		<Code
-			content={`<Themed {selected_theme} {selected_color_scheme}>
+			content={`import {Themer} from '@ryanatkn/fuz/theme.svelte.js';\nconst themer = new Themer(...);`}
+			lang="ts"
+		/>
+		<Code
+			content={`<Themed {themer}>
 	{@render children()}
 </Themed>`}
 		/>
+		<aside>
+			The <code>themer</code> prop is not reactive because it's put in Svelte context without a wrapper.
+			This could be fixed, let me know if you have a usecase.
+		</aside>
 		<p>
-			<code>Themed</code> sets the writable stores <code>selected_theme</code>
-			and <code>selected_color_scheme</code> in the Svelte context:
+			<code>Themed</code> sets the <code>themer</code> in the Svelte context:
 		</p>
+		<!-- TODO @multiple revisit Themed_Scope
+		 	// the nearest \`Themed\` or \`Themed_Scope\` ancestor:
+		-->
 		<Code
 			content={`// get values from the Svelte context provided by
-// the nearest \`Themed\` or \`Themed_Scope\` ancestor:
-
-import {get_theme} from '@ryanatkn/fuz/theme.js';
-const selected_theme = get_theme();
-$selected_theme.name; // '${$selected_theme.name}'
-
-import {get_color_scheme} from '@ryanatkn/fuz/theme.js';
-const selected_color_scheme = get_color_scheme();
-$selected_color_scheme; // '${$selected_color_scheme}'`}
+// the nearest \`Themed\` ancestor:
+import {get_themer} from '@ryanatkn/fuz/theme.js';
+const themer = get_themer();
+themer.theme.name; // '${themer.theme.name}'
+themer.color_scheme; // '${themer.color_scheme}'`}
 			lang="ts"
 		/>
-		<Details>
-			{#snippet summary()}More about <code>Themed</code>{/snippet}
-			<aside>
-				<p>
-					<code>Themed</code> initializes the system's theme support. Without it, the page will not
-					reflect the user's system
-					<code>color-scheme</code>. By default, <code>Themed</code> applies the base theme to the
-					root of the page via <code>create_theme_setup_script</code>. It uses JS to add the
-					<code>.dark</code> CSS class to the <code>:root</code> element.
-				</p>
-				<p>
-					This strategy enables color scheme and theme support with minimal CSS and optimal
-					performance for most use cases. The system supports plain CSS usage that can be static or
-					dynamic, scoped or global, or imported at buildtime or runtime. It also allows runtime
-					access to the data if you want to pay the performance costs.
-				</p>
-				<p>
-					The theme setup script interacts with <code>sync_color_scheme</code> to save the user's
-					preference to <code>localStorage</code>. See also <code>Color_Scheme_Input</code>.
-				</p>
-				<p>
-					The setup script avoids flash-on-load due to color scheme, but currently themes flash in
-					after loading. We'll try to fix this when the system stabilizes.
-				</p>
-			</aside>
-		</Details>
+		<p>
+			For a more complete example, see <a href="https://github.com/ryanatkn/fuz_template"
+				>fuz_template</a
+			>.
+		</p>
+	</section>
+	<section>
+		<Tome_Subheading text="More details" slug="more-details" />
+		<p>
+			<code>Themed</code> initializes the system's theme support. Without it, the page will not
+			reflect the user's system
+			<code>color-scheme</code>. By default, <code>Themed</code> applies the base theme to the root
+			of the page via <code>create_theme_setup_script</code>. It uses JS to add the
+			<code>.dark</code> CSS class to the <code>:root</code> element.
+		</p>
+		<p>
+			This strategy enables color scheme and theme support with minimal CSS and optimal performance
+			for most use cases. The system supports plain CSS usage that can be static or dynamic, or
+			imported at buildtime or runtime. It also allows runtime access to the underlying data like
+			the <a href="https://moss.ryanatkn.com/library/variables">style variables</a> if you want to pay
+			the performance costs. Scoped theming to one part of the page is planned.
+		</p>
+		<p>
+			The theme setup script interacts with <code>sync_color_scheme</code> to save the user's
+			preference to <code>localStorage</code>. See also <code>Color_Scheme_Input</code>.
+		</p>
+		<p>
+			The setup script avoids flash-on-load due to color scheme, but currently themes flash in after
+			loading. We'll try to fix this when the system stabilizes.
+		</p>
 	</section>
 </Tome_Detail>
 
diff --git a/src/routes/library/Themed/Themed_Scope.svelte b/src/routes/library/Themed/Themed_Scope.svelte
new file mode 100644
index 000000000..7cd4210e8
--- /dev/null
+++ b/src/routes/library/Themed/Themed_Scope.svelte
@@ -0,0 +1,71 @@
+<script lang="ts" context="module">
+	let _id = 0;
+</script>
+
+<script lang="ts">
+	import type {Snippet} from 'svelte';
+	import {render_theme_style} from '@ryanatkn/moss/theme.js';
+	import {BROWSER} from 'esm-env';
+
+	import {get_themer, set_themer, Themer, create_theme_style_html} from '$lib/theme.svelte.js';
+
+	// TODO @multiple revisit Themed_Scope
+
+	interface Props {
+		/**
+		 * A reactive class containing the selected theme and color scheme.
+		 * Defaults to the first default theme.
+		 * The class reference is not reactive
+		 * because it's set in context without a wrapper, use `{#key theme}` if it changes.
+		 * @nonreactive
+		 */
+		themer?: Themer;
+		tagName?: string;
+		children: Snippet<
+			[id: string, style: string | null, theme_style_html: string | null, themer: Themer]
+		>;
+	}
+
+	const {
+		themer = new Themer(get_themer().theme, get_themer().color_scheme),
+		tagName = 'div',
+		children,
+	}: Props = $props();
+
+	const id = 'themed_' + _id++;
+
+	/**
+	 * `Themed_Scope` is a variant of `Themed` that scopes its theme to one branch of the DOM.
+	 *
+	 * To sync the theme globally and persist to local storage, use `Themed`.
+	 * There is some copied code between the two,
+	 * but combining them was too complicated both internally and externally.
+	 *
+	 * This is implemented as a component instead of an action so it can write to the `<head>`.
+	 * The main downside of the current implementation when scoped
+	 * is it adds an extra element to the tree,
+	 * though a more complicated API could be devised to accept an `Element` as a prop.
+	 */
+
+	set_themer(themer);
+
+	const style = $derived(render_theme_style(themer.theme, {id, empty_default_theme: false}));
+	const theme_style_html = $derived(style ? create_theme_style_html(style) : null);
+
+	const final_color_scheme = $derived(
+		themer.color_scheme === 'dark' || themer.color_scheme === 'light'
+			? themer.color_scheme
+			: BROWSER && matchMedia('(prefers-color-scheme: dark)').matches
+				? 'dark'
+				: 'light',
+	); // fallback to best guess
+</script>
+
+<!-- eslint-disable svelte/no-at-html-tags -->
+<svelte:head>
+	{#if theme_style_html}{@html theme_style_html}{/if}
+</svelte:head>
+
+<svelte:element this={tagName} {id} class="themed" class:dark={final_color_scheme === 'dark'}
+	>{@render children(id, style, theme_style_html, themer)}</svelte:element
+>
diff --git a/src/routes/package.ts b/src/routes/package.ts
index 3b979a9d4..9fe473111 100644
--- a/src/routes/package.ts
+++ b/src/routes/package.ts
@@ -41,9 +41,9 @@ export const package_json = {
 		'@ryanatkn/eslint-config': '^0.4.0',
 		'@ryanatkn/fuz_code': '^0.15.0',
 		'@ryanatkn/gro': '^0.129.0',
-		'@ryanatkn/moss': '^0.6.3',
+		'@ryanatkn/moss': '^0.7.0',
 		'@sveltejs/adapter-static': '^3.0.2',
-		'@sveltejs/kit': '^2.5.17',
+		'@sveltejs/kit': '^2.5.18',
 		'@sveltejs/package': '^2.3.2',
 		'@sveltejs/vite-plugin-svelte': '^3.1.1',
 		'@types/node': '^20.14.8',
@@ -55,7 +55,7 @@ export const package_json = {
 		'prettier-plugin-svelte': '^3.2.5',
 		'prism-svelte': '^0.5.0',
 		prismjs: '^1.29.0',
-		svelte: '^5.0.0-next.164',
+		svelte: '^5.0.0-next.175',
 		'svelte-check': '^3.8.2',
 		tslib: '^2.6.3',
 		typescript: '^5.5.2',
@@ -298,12 +298,7 @@ export const package_json = {
 			svelte: './dist/Theme_Input.svelte',
 			default: './dist/Theme_Input.svelte',
 		},
-		'./theme.js': {types: './dist/theme.d.ts', default: './dist/theme.js'},
-		'./Themed_Scope.svelte': {
-			types: './dist/Themed_Scope.svelte.d.ts',
-			svelte: './dist/Themed_Scope.svelte',
-			default: './dist/Themed_Scope.svelte',
-		},
+		'./theme.svelte.js': {types: './dist/theme.svelte.d.ts', default: './dist/theme.svelte.js'},
 		'./Themed.svelte': {
 			types: './dist/Themed.svelte.d.ts',
 			svelte: './dist/Themed.svelte',
@@ -454,9 +449,13 @@ export const src_json = {
 		'./Spiderspace_Logo.svelte': {path: 'Spiderspace_Logo.svelte', declarations: []},
 		'./Teleport.svelte': {path: 'Teleport.svelte', declarations: []},
 		'./Theme_Input.svelte': {path: 'Theme_Input.svelte', declarations: []},
-		'./theme.js': {
-			path: 'theme.ts',
+		'./theme.svelte.js': {
+			path: 'theme.svelte.ts',
 			declarations: [
+				{name: 'Themer', kind: 'class'},
+				{name: 'Themer_Json', kind: 'type'},
+				{name: 'get_themer', kind: 'function'},
+				{name: 'set_themer', kind: 'function'},
 				{name: 'sync_color_scheme', kind: 'function'},
 				{name: 'COLOR_SCHEME_STORAGE_KEY', kind: 'variable'},
 				{name: 'save_color_scheme', kind: 'function'},
@@ -465,9 +464,9 @@ export const src_json = {
 				{name: 'save_theme', kind: 'function'},
 				{name: 'load_theme', kind: 'function'},
 				{name: 'create_theme_setup_script', kind: 'function'},
+				{name: 'create_theme_style_html', kind: 'function'},
 			],
 		},
-		'./Themed_Scope.svelte': {path: 'Themed_Scope.svelte', declarations: []},
 		'./Themed.svelte': {path: 'Themed.svelte', declarations: []},
 		'./Tome_Detail.svelte': {path: 'Tome_Detail.svelte', declarations: []},
 		'./Tome_Link.svelte': {path: 'Tome_Link.svelte', declarations: []},