fix(temas/tema): mode toggle now flips the preview dark↔light

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) <noreply@anthropic.com>
active-uix
dev 4 months ago
parent f47b794b2a
commit 27050a5a11

@ -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 ───────

Loading…
Cancel
Save

Powered by TurnKey Linux.