Change svg color based on the selected mode (dark/light)

[MarkusKeck]

I have many svg images in my application. Now I want the to be able to switch their color according to the selected color scheme which u can change in the top (dark/light).

So I tried using a <style> segment inside my svg. As this svg is not part of the DOM this approach does not work.
So I had to put the content of the image ( code with <style> in int with the variable var(--vp-c-text-1)) into the .md page with an tag.
This approach does work but the svg now does not get treated the same as an image.
So I was wondering if this is the right approach or how I can change my images according to the selected mode (dark/light).
With this approach I have many svg code inside my normal documentation which is not a nice solution.

[brc-dd]

Probably do it like GitHub used to do?

![foo bar](https://foo.bar/light.svg#light-mode-only)
![foo bar](https://foo.bar/dark.svg#dark-mode-only)

And add this to your styles:

:root.dark [src$="#light-mode-only"] {
  display: none;
}

:root:not(.dark) [src$="#dark-mode-only"] {
  display: none;
}

[MarkusKeck]

@brc-dd Seems like I cannot mark your suggestion as solution. This discussion can be closed, thanks for your reply.

[HazzazBinFaiz]

I've used filter: invert to invert svg images according to the selected color scheme.

:root.dark img[src$=".svg"] {
   filter: invert(1);
}

:root:not(.dark) img[src$=".svg"] {
   filter: invert(0)
}

[Sieboldianus]

Nice, this also works in Vuepress!