// app.jsx — root composition + tweaks
const ACCENT_OPTIONS = [
"#111111", // monochrome black
"#D9582E", // warm clay
"#1B5E3F", // deep green
"#2A4FDB" // klein blue
];
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"accent": "#111111",
"lang": "de"
}/*EDITMODE-END*/;
function App() {
const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
const [lang, setLang] = React.useState(tweaks.lang || "de");
const accent = tweaks.accent || "#111111";
const t = COPY[lang];
// Apply lang + dir to
React.useEffect(() => {
document.documentElement.lang = lang;
document.documentElement.dir = lang === "ar" ? "rtl" : "ltr";
}, [lang]);
// Apply accent CSS vars. On dark surfaces the monochrome accent (#111) is
// invisible, so derive a light "on-dark" variant; colored themes keep their hue.
React.useEffect(() => {
const root = document.documentElement.style;
root.setProperty("--accent", accent);
const isMono = accent.toLowerCase() === "#111111";
root.setProperty("--accent-on-dark", isMono ? "#ffffff" : accent);
root.setProperty("--accent-on-dark-ink", isMono ? "#111111" : "#ffffff");
}, [accent]);
const onSetLang = (l) => {
setLang(l);
setTweak("lang", l);
};
return (
<>
{/* Reviews-Sektion ausgeblendet bis erste Kundenstimmen vorliegen.
Zum Reaktivieren: nächste Zeile einkommentieren. */}
{/* */}
setTweak("accent", v)}
options={ACCENT_OPTIONS}
/>
onSetLang(v)}
options={["de", "ar"]}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render();