/* global React, ReactDOM */ /* Tweaks: 4 colors × light/dark = 8 themes */ const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "color": "strawberry", "mode": "light" }/*EDITMODE-END*/; const COLORS = [ { id: 'strawberry', label: 'Strawberry', light: ['#FF6B9D', '#FFD4E2', '#FFF6F2'], dark: ['#FF7FB0', '#3B2336', '#15121C'] }, { id: 'mint', label: 'Mint', light: ['#3FB97A', '#C9EED9', '#F1FBF5'], dark: ['#5FD691', '#1F3A2A', '#101A14'] }, { id: 'soda', label: 'Soda', light: ['#4D7FFF', '#C6D6FF', '#EEF6FF'], dark: ['#7BA1FF', '#1F2A4A', '#0E1220'] }, { id: 'lavender', label: 'Lavender', light: ['#9659E4', '#E2D2F5', '#F6F2FB'], dark: ['#B985FB', '#2F1F45', '#14101E'] }, ]; function TweaksApp() { const { TweaksPanel, useTweaks, TweakSection } = window; // Initialize from whatever site.js already loaded onto (which is the // persisted state). Otherwise we'd overwrite the user's stored choice with // TWEAK_DEFAULTS on every page load. const initial = { color: document.documentElement.getAttribute('data-color') || TWEAK_DEFAULTS.color, mode: document.documentElement.getAttribute('data-mode') || TWEAK_DEFAULTS.mode, }; const [t, setTweak] = useTweaks(initial); // Sync with global theme manager React.useEffect(() => { if (window.MozaikuTheme) window.MozaikuTheme.setColor(t.color); }, [t.color]); React.useEffect(() => { if (window.MozaikuTheme) window.MozaikuTheme.setMode(t.mode); }, [t.mode]); // Listen for header toggle changes React.useEffect(() => { function onChange() { const mode = window.MozaikuTheme && window.MozaikuTheme.mode; if (mode && mode !== t.mode) setTweak('mode', mode); } window.addEventListener('mozaiku:themechange', onChange); return () => window.removeEventListener('mozaiku:themechange', onChange); }, [t.mode, setTweak]); return (

{COLORS.map(c => { const swatch = t.mode === 'dark' ? c.dark : c.light; return ( ); })}

); } const tweaksRoot = document.getElementById('tweaks-root'); if (tweaksRoot) { ReactDOM.createRoot(tweaksRoot).render(); }