diff --git a/web/routes/temas/tema/+page.svelte b/web/routes/temas/tema/+page.svelte
index 0029fee86..39b23e4cd 100644
--- a/web/routes/temas/tema/+page.svelte
+++ b/web/routes/temas/tema/+page.svelte
@@ -19,20 +19,39 @@
 	import { ActiveEidos } from '$uix/eidos'
 	import '@/uix/eidos/index.css'
 
+	type Family = 'rounded' | 'continuous' | 'cut'
+
+	// Preview mode. Declared before the eidos boot because the modeSource closes
+	// over it: the scheme's donor scales (which set the neutral/surface lightness)
+	// are resolved from the instance's EFFECTIVE mode, so the toggle must drive it.
+	let mode = $state<'light' | 'dark'>('dark')
+
 	// ── Runtime (minimal — no Soma/events; the preview is token-driven markup) ──
 	const uix = createActiveUix({
 		langs: { schema: { sium: siumLangs, secs: secsLangs }, defaultLocale: 'es' as const },
 		events: { sound: false, haptic: false }
 	})
 	setActiveUix(uix)
-	const eidos = ActiveEidos.create({ applyDom: true })
+	const modeListeners = new Set<(v: 'light' | 'dark') => void>()
+	const eidos = ActiveEidos.create({
+		applyDom: true,
+		modeSource: {
+			get: () => mode,
+			onChange(handler) {
+				modeListeners.add(handler)
+				return () => modeListeners.delete(handler)
+			}
+		}
+	})
+	$effect(() => {
+		const m = mode
+		for (const l of modeListeners) l(m)
+	})
 	onDestroy(() => {
 		eidos.dispose()
 		uix.dispose()
 	})
 
-	type Family = 'rounded' | 'continuous' | 'cut'
-
 	// ── The seed (five axes) ─────────────────────────────────────────────────
 	let colorSeed = $state('#6366f1')
 	let ratio = $state(1.25)
@@ -40,7 +59,6 @@
 	let depth = $state(0.5) // 0 flat → 1 dramatic
 	let spaceBase = $state(4)
 	let family = $state<Family>('continuous')
-	let mode = $state<'light' | 'dark'>('dark')
 	let activePreset = $state<string | null>('aurora')
 
 	// ── The single call: one seed → five builders, scoped to the preview ───────