Respecting user css overrides, etc., within SVG

Issue

I would like to put some simple SVG diagrams on a web page, and for that SVG content to adopt the background and stroke colours of the surrounding text -- without relying on some kind of site-building technology that will hard-code everything. If the user has personal CSS overrides, or a dark-mode plugin, or whatever, I want to pick that up and use it.

It seems like in an ideal world if I just don't specify then that should happen automatically, but it doesn't. The stroke colour for SVG can be set with stroke but that doesn't adopt from the color value of plain text.

So far all I've come up with is a bit of javascript to copy the value across:

function fixSVGStroke() {
  for (img of document.getElementsByTagName("svg")) {
    style = getComputedStyle(img);
    img.style.stroke = style.color;
    // img.style.background = style.background;  // doesn't work?
  }
}

svg { stroke-width:2; fill-opacity:0.35; }
@media (prefers-color-scheme: light) { svg { stroke:black; } }
@media (prefers-color-scheme: dark) { svg { stroke:white; } }

</svg>
<button onclick="fixSVGStroke()">Fix me!</button>
<div>
  sample text
  <svg width="180" height="40" id="testpattern">
    <circle cx="20" cy="20" r="15" fill="grey"/>
    <circle cx="60" cy="20" r="15" fill="red"/>
    <circle cx="100" cy="20" r="15" fill="green"/>
    <circle cx="140" cy="20" r="15" fill="blue"/>
  </svg>
  (default colours)
</div>
<div style="color:yellow; background:navy">
  sample text
  <svg width="180" height="40">
    <circle cx="20" cy="20" r="15" fill="grey"/>
    <circle cx="60" cy="20" r="15" fill="red"/>
    <circle cx="100" cy="20" r="15" fill="green"/>
    <circle cx="140" cy="20" r="15" fill="blue"/>
  </svg>
  (yellow/navy)
</div>
<div style="color:maroon; background:silver">
  sample text
  <svg width="180" height="40">
    <circle cx="20" cy="20" r="15" fill="grey"/>
    <circle cx="60" cy="20" r="15" fill="red"/>
    <circle cx="100" cy="20" r="15" fill="green"/>
    <circle cx="140" cy="20" r="15" fill="blue"/>
  </svg>
  (maroon/silver)
</div>

Is there a better way to do this?

If not, where's the right place to put the hook for my fix-up function? Somewhere it can cooperate with user overrides and dark-mode plugins?

Ideally I would respect the user's choice to not run JavaScript by default. I included the @media (prefers-color-scheme: *) thing to ensure a tolerable default (as shown), but that turned out to be counterproductive. The host page may not be respecting the same setting, and if I manually force a background colour to match the foreground colour, then I can't seem to fix it up in JavaScript the way I fix the stroke colour.

Solution

Consider using the currentcolor keyword, as described on the MDN Web docs:

The currentcolor keyword represents the value of an element's color property. This lets you use the color value on properties that do not receive it by default.

svg {
  stroke-width:2;
  fill-opacity:0.35;
  stroke: currentColor;
}

<div>
  sample text
  <svg width="180" height="40" id="testpattern">
    <circle cx="20" cy="20" r="15" fill="grey"/>
    <circle cx="60" cy="20" r="15" fill="red"/>
    <circle cx="100" cy="20" r="15" fill="green"/>
    <circle cx="140" cy="20" r="15" fill="blue"/>
  </svg>
  (default colours)
</div>
<div style="color:yellow; background:navy">
  sample text
  <svg width="180" height="40">
    <circle cx="20" cy="20" r="15" fill="grey"/>
    <circle cx="60" cy="20" r="15" fill="red"/>
    <circle cx="100" cy="20" r="15" fill="green"/>
    <circle cx="140" cy="20" r="15" fill="blue"/>
  </svg>
  (yellow/navy)
</div>
<div style="color:maroon; background:silver">
  sample text
  <svg width="180" height="40">
    <circle cx="20" cy="20" r="15" fill="grey"/>
    <circle cx="60" cy="20" r="15" fill="red"/>
    <circle cx="100" cy="20" r="15" fill="green"/>
    <circle cx="140" cy="20" r="15" fill="blue"/>
  </svg>
  (maroon/silver)
</div>

Answered By - Wongjn