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:

<div class="navbar-brand">
   <a href="">
     <img class="light" src="..." />
     <img class="dark" src="..." />
   </a>
</div> 

light css:

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

dark css:

.navbar-brand img { display: none; }
.navbar-brand img.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-brand a {
  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);
}

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