2

I have an SVG I would like to display as a faint background in a system that supports numerous themes. I am using CSS to set it as the background-image.

The only way I would be able to do this is if I can manipulate things like the fill styles and set them to a CSS variable. For example, I have various surface colors like --surface-a, --surface-b, etc. I need to set the SVG colors to these variables.

If I manually edit the SVG and set fill: red, this changes it to red. If I set it to fill: var(--surface-a) it does not apply the color.

Is this technically possible?

Patrick
  • 5,526
  • 14
  • 64
  • 101
  • You can't change background images like that only inline SVG – Paulie_D Oct 23 '21 at 16:38
  • @Paulie_D I believe this is the answer I was looking for. Inline versus background image. This was closed as a duplicate but I don't believe it is. I'm specifically asking about CSS variables in this question. – Patrick Oct 23 '21 at 17:04
  • The same issues apply whether using variables or otherwise which is why it is a duplicate. – Paulie_D Oct 23 '21 at 19:01

0 Answers0