Can't use var() in color properties

[jdhenry08]

I'd like to style my QR code such that the colors are based on the user's selected theme, which includes css variables set to certain colors (--primary, --secondary, etc). But when I try to use this in fgColor or bgColor, the QR code just renders as black.

[josefdclxvi]

hi @jdhenry08, im not sure if im getting your comment correctly but are you trying to use CSS variables outside CSS? as i recall CSS variables are intended to be used inside CSS only.

fillStyle only accepts colors such as hex, rgb/a, hsl/a as well as CanvasGradient and CanvasPattern

if you pass CSS variables either in the fgColor or bgColor, it will give you the default value which is #000

for more info about fillStyle

[jdhenry08]

My apologies - I assumed the color params were being applied via CSS. Not familiar with the canvas API, and I saw that fillStyle can be a string parsed as CSS value. I thought that meant I could use CSS vars the same way, but I guess not.