How Can I Show Light Logo In Dark Mode?

I am working on dark mode. Works successfully. There are two types of logos in the script: light and dark. But there is no logo in my css files. I'm getting the logos dynamically.

Solution 1:

Two images:

<divclass="navbar-brand"><ahref=""><imgclass="light"src="..." /><imgclass="dark"src="..." /></a></div>

light css:

.navbar-brandimg { display: none; }
.navbar-brandimg.light { display: inline-block; }

dark css:

.navbar-brandimg { display: none; }
.navbar-brandimg.dark { display: inline-block; }

Or just use a background image, going to have to add a few more styles to make sure the whole image appears

.navbar-branda {
  background-image: url('light');
}

Or if you make the background transparent on the image, you could use filter: invert(1); in the CSS to flip the color.

img {
   filter: invert(1);
}

<imgsrc="https://placekitten.com/g/200/300">