How do I invert image color in HTML

Question

Inverting image color in html

HI, so I'm making this button that turns my website into darkmode. I have a png image and I made a function in js function invert() {
document.getElementById("theImage").style.filter = "invert(100%)";
}

My image in my html is <svg onclick="invert()" width="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 496"><path fill="currentColor" d="M8,256C8,393,119,504,256,504S504,393,504,256,393,8,256,8,8,119,8,256ZM256,440V72a184,184,0,0,1,0,368Z" transform="translate(-8 -8)"/></svg>

It works when I invert it but when I click on it again to invert it back to normal it stays inverted...

Does anybody knowk how to fix this?

Answer 1

Try to create css class with invert, then add / remove class from element

These method should be useful for you:
element.classList.remove("my-class")
element.classList.add("my-class")
element.classList.contains(my-class)