A little help whiite/black logo

[theapplegates]

I can't seem to figure out how to make the signature logo show up when using the dark setting. I have to exactly the same signature files in png format. One black the other white both with transparent backgrounds. I converted both to SVG and I don't know how to make the white signature show up. I thought I was on the right track when I saw the code reference A and B for logos but it did not work. Any suggestions?
Thanks Paul
https://elva.paulapplegate.com is the site.

[scottsweb]

There are a few approaches you can take with this.

The quickest (and how I have it setup) is to use this one line of CSS:

.site-logo svg {
    color: var(--foreground);
}

In order for that to work. The SVG needs to use fill="currentColor" for its fill properties and have a class of .site-logo. You can see this in the elva code here: https://github.com/scottsweb/elva/blob/main/src/_includes/navigation.njk#L8

The second option is to use an embedded CSS media query in your SVG. If you inspect the code of this SVG](https://github.com/scottsweb/elva/blob/main/src/assets/img/icon.svg?short_path=9a11cdc) you should see this:

<svg fill="none" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg">
    <style>
    path.icon-foreground {
        fill: #e5e9f0;
    }
    path.icon-background {
        fill: #2e3440;
    }
    @media (prefers-color-scheme:dark) {
        path.icon-foreground {
            fill: #2e3440;
        }
        path.icon-background {
            fill: #e5e9f0;
        }
    }
    </style>
    <path d="m0 0h512v512h-512z" class="icon-background" />
    <path d="m353.598 192.362c1.365-3.204 3.641-4.577 6.373-4.577 8.194 0 20.029 11.442 20.029 21.969 0 59.042-48.252 165.246-152.04 165.246-71.468 0-96.96-48.973-96.96-107.1 0-74.146 44.155-130.9 101.967-130.9 41.424 0 67.371 24.258 67.371 61.331s-33.23 80.554-100.601 81.469c6.828 22.885 22.305 33.412 40.513 33.412 59.178 0 89.677-58.604 113.348-120.85zm-157.503 56.315c38.693-16.019 50.073-33.412 50.073-47.142 0-9.154-4.097-14.189-12.746-14.189-20.029 0-37.327 27.462-37.327 61.331z" class="icon-foreground" />
</svg>

SVGs can pretty much be treated like another other chunk of HTML/CSS. So the <style> tag at the top of the file reacts to the change in color-scheme. I use this to make sure the favicon is visible on browsers that are in dark or light mode.

There is probably a third approach too... using JavaScript to swap between the two PNGs you have, but I will cover that if the above doesn't work.

Having quickly looked at your test site, I think you are close. The main issue looks to be your SVG is a wrapper for a bitmap image, rather than a pure SVG. Do you have access to a vector version of your logo? You can see what I mean in your code here:

<image width="7866.6665" height="2828" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAFwwAAAhJCAYAAAC9wlgXAAAACXBIWXMAAAsTAAALEwEAmpwYAAAG
oWlUWHRYTUw6Y29tLmFkb2Jl...." id="image1"></image>

The long string that I have cut short is a PNG, not an SVG. But the PNG is wrapped in an SVG. Hopefully that makes sense!

[theapplegates]

Thanks for the help. I’m sure I can get it from here.
paul

[theapplegates]

Forgot to close this.