Set CSS Property per JS

I have a color swatch that I use to represent the color applied to a selected object such as a shape or text. Or if nothing is selected the foreground color selected in the document. Setting a css var seemed like a more modern way of going about this as I can just the same color on multiple items (fills, strokes, text, background-color) than setting the color directly on each item.

I can work around this however I am finding that the foreground color of the doc is not 100% the same as the color shown in the picker.

I posted about this but have not seen any response.