/* Tweaks panel app — minimal: dark/light toggle only.
Mirrors the in-page theme toggle so users can flip via Tweaks too. */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"theme": "dark"
}/*EDITMODE-END*/;
function YulabTweaks() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
// Apply theme to . Initial sync — but don't override what user picked in-page via button.
React.useEffect(() => {
if (window.__yulabSetTheme) {
window.__yulabSetTheme(t.theme, false);
} else {
document.documentElement.setAttribute('data-theme', t.theme);
}
}, [t.theme]);
// Listen for in-page theme toggle clicks → sync our state
React.useEffect(() => {
function onThemeEvent(e) {
if (e.detail && e.detail !== t.theme) setTweak('theme', e.detail);
}
window.addEventListener('yulab-theme', onThemeEvent);
return () => window.removeEventListener('yulab-theme', onThemeEvent);
}, [t.theme]);
return (
setTweak('theme', v)}
/>
);
}
const __twkRoot = document.createElement('div');
__twkRoot.id = '__yulab-tweaks-root';
document.body.appendChild(__twkRoot);
ReactDOM.createRoot(__twkRoot).render();