From 27050a5a11904bbd90bf43cd710aba7ccdf8ab16 Mon Sep 17 00:00:00 2001 From: dev Date: Sat, 6 Jun 2026 13:10:52 +0200 Subject: [PATCH] =?UTF-8?q?fix(temas/tema):=20mode=20toggle=20now=20flips?= =?UTF-8?q?=20the=20preview=20dark=E2=86=94light?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The toggle changed data-theme but the preview stayed dark: applyColorScheme resolves donor scales from the instance's EFFECTIVE mode (#resolveDonorScales ignores the per-call mode option), and the boot had no modeSource — so the scheme always derived dark neutrals/surfaces and overrode the foundation's light tokens. Bound a modeSource to the `mode` state (grafito pattern) + fire its listeners on change, so the instance mode follows the toggle and the scheme re-derives correctly. Verified: surface oklch(0.21)↔(0.98), content flips, both modes read cleanly. Co-Authored-By: Claude Opus 4.8 (1M context) --- web/routes/temas/tema/+page.svelte | 26 ++++++++++++++++++++++---- 1 file changed, 22 insertions(+), 4 deletions(-) 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('continuous') - let mode = $state<'light' | 'dark'>('dark') let activePreset = $state('aurora') // ── The single call: one seed → five builders, scoped to the preview ───────