Dynamically config svg fill colour

[chuan-khuna]

I want to set the bg-dot-<colorVarName>/[0.2] in order to change the colour depends on current theme.

export const CardImageDot = () => {
  return (
    <div className="flex h-full min-h-[6rem] w-full flex-1 rounded-xl border border-transparent bg-neutral-100 bg-dot-primary/[0.2] [mask-image:radial-gradient(ellipse_at_center,white,transparent)] dark:border-white/[0.2] dark:bg-black dark:bg-dot-primary/[0.2]"></div>
  )
}

In tailwind.config.ts, the svg fill option cannot include variable name, eg hsl(var(--primary) / 0.2)

"bg-dot": (value: any) => {
  console.log("🍵 ~ bgDotGrid ~ value:", value)

  // cannot be hsl(var(--varname) / 0.2)
  value = "hsl(227.1 52.2% 26.3% / 0.2)"

  return ({
    backgroundImage: `url("${svgToDataUri(
      `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="none"><circle fill="${value}" id="pattern-circle" cx="10" cy="10" r="19.6257413380501518"></circle></svg>`
    )}")`,
  })
},

[chuan-khuna]

https://stackoverflow.com/questions/51395179/svg-fill-with-css-variables