// Looks studio — explore Canvas colour, Headline style and Density, then SAVE // looks you like to a shortlist and flip between them to compare. Everything // persists to localStorage and applies by toggling body classes that // variants.css + light.css act on. Portalled into so it themes correctly. const CANVASES = [ { id: 'navy', name: 'Control room', desc: 'Deep navy (default)', pill: 'Default', bg: '#0B2545', side: '#081B33', light: false }, { id: 'graphite', name: 'Graphite', desc: 'Cool charcoal', bg: '#161B22', side: '#0E1116', light: false }, { id: 'indigo', name: 'Indigo', desc: 'Deep indigo', bg: '#141A40', side: '#0A0E2A', light: false }, { id: 'light', name: 'Daylight', desc: 'White, navy menu', bg: '#FFFFFF', side: '#0B2545', light: true }, ]; // apply a look to function applyLook({ canvas, font, density }) { const b = document.body; b.classList.remove('theme-light', 'canvas-graphite', 'canvas-indigo'); if (canvas === 'light') b.classList.add('theme-light'); else if (canvas === 'graphite') b.classList.add('canvas-graphite'); else if (canvas === 'indigo') b.classList.add('canvas-indigo'); b.classList.toggle('font-sans', font === 'sans'); b.classList.toggle('density-compact', density === 'compact'); } function lookName({ canvas, font, density }) { const c = (CANVASES.find(x => x.id === canvas) || CANVASES[0]).name; return [c, font === 'sans' ? 'Modern' : 'Editorial', density === 'compact' ? 'Compact' : null].filter(Boolean).join(' · '); } function Choice({ on, onClick, preview, name, desc, pill }) { return ( ); } function Appearance() { const [open, setOpen] = React.useState(false); const [canvas, setCanvas] = React.useState(() => localStorage.getItem('opsmera-canvas') || 'light'); const [font, setFont] = React.useState(() => localStorage.getItem('opsmera-font') || 'sans'); const [density, setDensity] = React.useState(() => localStorage.getItem('opsmera-density') || 'compact'); const [saved, setSaved] = React.useState(() => { try { return JSON.parse(localStorage.getItem('opsmera-shortlist') || '[]'); } catch (e) { return []; } }); React.useEffect(() => { applyLook({ canvas, font, density }); localStorage.setItem('opsmera-canvas', canvas); localStorage.setItem('opsmera-font', font); localStorage.setItem('opsmera-density', density); }, [canvas, font, density]); React.useEffect(() => { localStorage.setItem('opsmera-shortlist', JSON.stringify(saved)); }, [saved]); const current = { canvas, font, density }; const currentName = lookName(current); const alreadySaved = saved.some(s => s.canvas === canvas && s.font === font && s.density === density); function saveLook() { if (alreadySaved) return; setSaved([...saved, { id: Date.now(), ...current }]); } function applySaved(s) { setCanvas(s.canvas); setFont(s.font); setDensity(s.density); } function removeSaved(id, e) { e.stopPropagation(); setSaved(saved.filter(s => s.id !== id)); } const pop = open ? ReactDOM.createPortal(
setOpen(false)} />
Looks
Try a look, then save the ones you like to compare. Changes apply instantly and are remembered.
Canvas colour
{CANVASES.map(c => ( setCanvas(c.id)} name={c.name} desc={c.desc} pill={c.pill} preview={
} /> ))}
Headline style
setFont('serif')} name="Editorial" desc="Elegant serif" preview={
Aa
} /> setFont('sans')} name="Modern" desc="Clean sans-serif" preview={
Aa
} />
Density
setDensity('comfortable')} name="Comfortable" desc="Roomy spacing" preview={
} /> setDensity('compact')} name="Compact" desc="More on screen" preview={
} />
Shortlist
{saved.length === 0 ?
No saved looks yet. Tap "Save this look" to add the current one ({currentName}), then build a shortlist to compare.
:
{saved.map(s => { const active = s.canvas === canvas && s.font === font && s.density === density; return ( applySaved(s)} title="Apply this look"> {lookName(s)} removeSaved(s.id, e)} title="Remove"> ); })}
}
, document.body) : null; return ( {pop} ); } Object.assign(window, { Appearance });