// Main app — wires up all sections and the Tweaks panel.
const ACCENT_OPTIONS = {
"#39ff14": "Lime · Neón",
"#10b981": "Emerald · Pro",
"#22d3ee": "Cyan · Tech",
"#a3e635": "Lime · Suave",
"#16a34a": "Forest · Sobrio",
};
function App() {
const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);
// apply theme + density + accent to / + CSS var
React.useEffect(() => {
document.documentElement.dataset.theme = t.dark ? "dark" : "light";
document.body.dataset.density = t.density || "regular";
document.documentElement.style.setProperty("--accent", t.accent);
// soft + glow derived
const a = t.accent;
const hexToRgb = (hex) => {
const h = hex.replace("#", "");
const v = h.length === 3
? h.split("").map(c => parseInt(c + c, 16))
: [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];
return v;
};
const [r, g, b] = hexToRgb(a);
document.documentElement.style.setProperty("--accent-soft", `rgba(${r},${g},${b},0.14)`);
document.documentElement.style.setProperty(
"--accent-glow",
`0 0 0 1px rgba(${r},${g},${b},0.3), 0 8px 32px -8px rgba(${r},${g},${b},0.45)`
);
}, [t.dark, t.density, t.accent]);
return (
);
}
ReactDOM.createRoot(document.getElementById("root")).render();