Hook that reads/writes #CSS variables. Turns a CSS variable into a useState() hook for your web components and lets you change them at run-time.

useCSSVariable.tsx

export const useCSSVariable = (name: string) => {
    const [value, setState] = useState(
        window.getComputedStyle(document.documentElement).getPropertyValue(name)
    );

    const setValue = useCallback(
        (newValue: string) => {
            setState(newValue);
            document.documentElement.style.setProperty(name, newValue);
        },
        [name]
    );

    return [value, setValue];
};