/* global React, ReactDOM, TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakToggle, TweakColor */
const { useState, useEffect } = React;
const DEFAULTS = /*EDITMODE-BEGIN*/{
"theme": "dark",
"density": "cozy",
"accent": "#a78bfa"
}/*EDITMODE-END*/;
function App() {
const [t, setTweak] = useTweaks(DEFAULTS);
// Apply theme + density to
useEffect(() => {
document.documentElement.setAttribute("data-theme", t.theme);
document.documentElement.setAttribute("data-density", t.density);
document.documentElement.style.setProperty("--accent", t.accent);
// recompute soft / line accent vars off the chosen accent
const hex = t.accent.replace("#", "");
const r = parseInt(hex.slice(0,2),16), g = parseInt(hex.slice(2,4),16), b = parseInt(hex.slice(4,6),16);
document.documentElement.style.setProperty("--accent-soft", `rgba(${r}, ${g}, ${b}, 0.14)`);
document.documentElement.style.setProperty("--accent-line", `rgba(${r}, ${g}, ${b}, 0.32)`);
}, [t.theme, t.density, t.accent]);
const toggleTheme = () => setTweak("theme", t.theme === "dark" ? "light" : "dark");
return (
<>
setTweak("density", v)}
/>
setTweak("theme", v)}
/>
setTweak("accent", v)}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render();