Switch SVG colors automatically in light/dark modes

[esynr3z]

Hello!

I'd like to include some SVG diagrams into my documentation page. These diagrams are quite simple: something like this

I use "currentColor" inside SVG to make stroke color automatically switch for light/dark mode, how it is done for icons normally. So I do not need to mantain two copies of the same diagram.

However, I could't manage to incude such image to page properly and make it work (diagram color follows text color).

Could you please help me? Is this even possible?

Upd. I've read "Light and Dark mode" paragraph, but I'd like to avoid having multiple copies of the same SVG.

Upd. I've found this discussion #2097, but there is suggested to store and render SVG as custom icon, which, I suppose, won't work with large diagrams, because size is going to be reduced. Need to check though.

Upd. Okay, it looks like SVG has to be embedded into HTML via <svg> tag.
https://stackoverflow.com/a/67253714

[v-schipka]

Hi, this definitely works (I use a lot of custom icons).
I can't tell you how it works, but the ones I use seem to not have any color applied.
I'll just attach some of them, maybe if you download and open them in a text editor, this will help you :)
https://github.com/user-attachments/assets/ed680758-88a8-4542-8f26-c73c9c4ba4ec
https://github.com/user-attachments/assets/1c3a0737-c4d6-40d5-8f27-8da15ed6dd11
https://github.com/user-attachments/assets/1c0c3116-4896-4eb3-bf61-fb2da5136b3f

[esynr3z]

Icons are not a problem. I use some custom too. But here if diagram is shrinked to 16x16, then, I guess, user won't be happy😅
Anyway, thanks for help, I'll take a look into your icons.

[kamilkrzyskow]

Hello @esynr3z,
as you've pointed out in the edit, to support the fill: currentColor for the SVG, they need to be included via the HTML <svg> tag.
SVGs are plain text files and you should be able to include them using the macros plugin.

But as you're working with simple shapes and only want to match the light/dark mode you can do so using CSS and the filter: invert setting to change the color from the default black to white.

This is used in the emoji search box in the docs, you can check the web tools.

• https://squidfunk.github.io/mkdocs-material/customization/#additional-css
• https://squidfunk.github.io/mkdocs-material/reference/icons-emojis/
• https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/invert

[esynr3z]

Thank you, @kamilkrzyskow! I'll definitely try filter option. Use of <svg> tag is somehow cumbersome, when you need to embed external SVG. Templating Markdown via macros is also an interesting option.

For anyone interested, this works fine, because it is just text:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle r="100" fill="currentColor" />
</svg>

Below also works, but you need to know a lot of internal details of referenced SVG like id (flow in that case after # symbol), and attributes to make it look fine.

<svg fill="currentColor" width="837px" height="453px" viewBox="-0.5 -0.5 837 453">
   <use href="/assets/images/flow.svg#flow"></use>
</svg>

I suppose macro plugin can fix using of href and all boilerplate around.

Another option is to go with two images, but generate them via script using common source and replace all fill and stroke programmaticaly.

[esynr3z]

So, I went with filter and it works like a charm! Thank you @kamilkrzyskow again!

Full recipe:

1. Add additional CSS

2. Put this code into created CSS:

img.invert-on-slate {
    filter: invert(0);
}

[data-md-color-scheme="slate"] img.invert-on-slate {
    filter: invert(1);
}

3. In a Markdown document use img tag with class attribute to make it work

<img src="/assets/images/flow.drawio.svg" alt="Program Flow" class="invert-on-slate">

Note: I use draw.io for diagrams and save the diagram as "editable SVG", so I can edit nodes and connections in the software anytime and make it looks like a valid SVG elsewhere.

[schneekluth]

Your solution is working perfectly. Thanks for writing it down in detail.