How to make SVGs respect light/dark mode?

[hellt]

First discussion, yay 🎆

I have an SVG logo and I wonder how should I make it respect the current UI theme of mkdocs?

I wanted the logo to have light colors when the theme is dark and vice versa.

[squidfunk]

This is possible:

1. Include your logo as an icon, so it's inlined as an SVG by the theme (see docs)
2. Remove all colors from the SVG logo, so you can use CSS to set the fill property (as with the Material logo)

To see it in action, go to the color setup guide and click on a light color, e.g. amber. Note that this will only work for a single color, i.e. you can fill to white or black, but you may use fill-opacity like I did in the Material logo.

Note that using this approach, you cannot change multiple colors. For that to work, you'd have to add two logos and toggle the display property dependent on the theme mode using some extra CSS.

The logo can be easily changed by overriding the logo.html partial.

[hellt]

thanks @squidfunk! Do you, by any chance, have an example that toggles display property? Since the logo I have has mutliple colors in it, the pre-created light/dark variations are the way to go it seems

[NicolasMassart]

Here is an example using the CSS media and prefered color scheme:

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
  <style>
    path {
    fill: black;
    }
    @media (prefers-color-scheme: dark) {
    path {
    fill: white;
    }
    }
  </style>
  <path d="YOUR PATH SHAPE COORDINATES HERE" id="Shape"/>
</svg>

see full SVG source

It doesn't work on every browsers but it works on enough of them.