/* Tweaks island — applies look-and-feel via CSS variables + data-attrs. The OS itself is vanilla JS; this React panel only writes settings. */ const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "accent": ["#e0588f", "#f4a3c8", "#3f61a1"], "wallpaper": ["#4f74bd", "#29407e"], "font": "標準ゴシック", "soft": false, "boot": true, "sfx": true }/*EDITMODE-END*/; const FONT_MAP = { "標準ゴシック": "", "ドット風": "dot", "システム": "system" }; function TweaksApp() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); React.useEffect(() => { const r = document.documentElement; const a = t.accent || TWEAK_DEFAULTS.accent; r.style.setProperty("--accent-1", a[0]); r.style.setProperty("--accent-2", a[1]); r.style.setProperty("--accent-solid", a[2]); const w = t.wallpaper || TWEAK_DEFAULTS.wallpaper; r.style.setProperty("--wall-a", w[0]); r.style.setProperty("--wall-b", w[1]); r.style.setProperty("--win-radius", t.soft ? "7px" : "0px"); r.dataset.font = FONT_MAP[t.font] != null ? FONT_MAP[t.font] : ""; r.dataset.anim = t.boot ? "on" : "off"; localStorage.setItem("os-sfx", t.sfx ? "on" : "off"); }, [t]); return ( setTweak("accent", v)} /> setTweak("wallpaper", v)} /> setTweak("font", v)} /> setTweak("soft", v)} /> setTweak("sfx", v)} /> setTweak("boot", v)} /> window.OS && window.OS.reboot()} />

各アイコンや起動マークは画像をドロップで差し替えできます。

window.IconStore && window.IconStore.clearAll()} /> ); } ReactDOM.createRoot(document.getElementById("tweaks-root")).render();