Document how to style a SVG image for dark theme

[stuartrowe]

Describe your use-case which is not covered by existing documentation.

The current documentation suggests using an SVG image:

Ideally you use an SVG as they can be made working nicely with the dark theme

However I'm not sure how to configure this either in the SVG itself or with a custom theme CSS file.

Looking at the generated HTML, the .svg file is included through an <img>. As I understand it this doesn't allow for embedding a style block in the .csv such as:

<style>
    svg path {
        fill: #151616;
    }
    @media (prefers-color-scheme: dark) {
    svg path {
        fill: #EAE9E9;
    }
</style>

And I was unable to get something like below working with a custom CSS file:

.custom-header__logo {
    fill: #151616;
}

@media (prefers-color-scheme: dark) {
    .custom-header__logo {
        fill: #EAE9E9;
    }
}

Any guidance on this would be appreciated.

Reference any relevant documentation, other materials or issues/pull requests that can be used for inspiration.

No response

Are you interested in contributing to the documentation?

No response

[mawinter69]

Did you use Image as logo? Because only with Image <img> is used. From my experience it is not possible to apply styling to svgs loaded via <img>. When you use SVG Logo the svg is directly included as code and then styling works. I've never tried to set the color via @media. In my svg I just use currentColor for stroke or fill (currentColor is also used in all the svg that are included in core and in the ionicons plugin

[stuartrowe]

That worked great! Illustrator had left some markup in the .svg that was causing the SVG Logo option to fail for me originally.