How to change/remove image background color?-CodePudding

const dark = document.getElementById("dark");

dark.addEventListener("click", function() {
  const body = document.body;
  body.classList.toggle("ddark")
})

.ddark {
  background-color: #303030;
}

<img src="https://simg.nicepng.com/png/small/13-133407_pixel-heart-png-black-pixel-heart-icon-png.png" alt="" style="width:50px; height:50px;">
<button  id="dark">Go Dark</button>

How can i change or remove image background color? Because when I go dark mode at my website it looks so ugly. How can i fix this? What should i do?

CodePudding user response：

Try using SVG images, they change background color according to your background color.

CodePudding user response：

Pictures in this format are a whole with their backgrounds. you need to use svg format image for what you want.

CodePudding user response：

The image has to be transparent for that to work - or you need a transform

You can use emojis and pseudo classes instead

const dark = document.getElementById("dark");
const body = document.body;
const imgSpan = document.querySelector(".imgSpan")
dark.addEventListener("click", function() {
  body.classList.toggle("ddark")
  imgSpan.classList.toggle("ddark")
})

.imgSpan::after {
  content: "