search

gcoro / react-qrcode-logo

React + Typescript component to generate a QR Code with custom colors and logo
MIT License
483 stars 41 forks source link

Can't use var() in color properties #50

Closed jdhenry08 closed 3 months ago

jdhenry08 commented 6 months ago

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 commented 4 months ago

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.

Screenshot 2024-04-25 at 20 58 08

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 commented 4 months ago

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.