idk.tsx

import FW3 from "../yourframework";
let bg = "#FF00FF";
let primary = "#0FF000";
let active = "#000FF0";
export function Idk() {
    const [bgColor, setBgColor] = FW3.useState(bg);
    const [primaryColor, setPrimaryColor] = FW3.useState(primary);
    const [navActiveColor, setNavActiveColor] = FW3.useState(active);
    return <div>
        <div>
            background:
            <input type="color" value={bgColor} onchange={(evt: { target: { value: any; }; }) => {
                setBgColor(evt.target.value);
                bg = evt.target.value;
            }}></input>
        </div>
        <div>
            primary-color:
            <input type="color" value={primaryColor} onchange={(evt: { target: { value: any; }; }) => {
                setPrimaryColor(evt.target.value);
                primary = evt.target.value;
            }}></input>
        </div>
        <div>
            nav-active-color:
            <input type="color" value={navActiveColor} onchange={(evt: { target: { value: any; }; }) => {
                setNavActiveColor(evt.target.value);
                active = evt.target.value;
            }}></input>
        </div>
        <style>
            :root{"{"}
            --primary-color:{primaryColor};
            --bg:{bgColor};
            --active:{navActiveColor};
            }
        </style>
        <svg>
            <rect></rect>
        </svg>
    </div>
}