How to capture var values for third-party library styling?

[pnegahdar]

I use highlightjs in a project and I want to use a different themes depending on a what a var is set to. Binding it to a theme makes sense to me -- i.e I could do it other ways but this seems like the right coupling.

I was wondering if you all head a way of grabbing a var value?

I ended up writing this garbage to set the theme, which gets the job done (though it isn't reactive, but I guess I could add a mutation observer), but is there a better way? useVarValue() would be nice.

    const themeVar = theme.editorTheme.slice(4, -1); // gets the inner --varname
    // hack to get themes in here. I need to find a better way in the future.
    useEffect(() => {
        if (!selfElem.current) return
        const value = getComputedStyle(selfElem.current).getPropertyValue(themeVar)
        setThemeValue(value)
    }, [themeVar, setThemeValue])