Inverting image color in html

Question

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

every time you call invert() it changes the value to 100%,
You have to check wether it is inverted or not and then depending on wether its inverted or not invert it

Answer 2

to make ist clear:
Invert the original: filter = invert(100%)
back go original: filter = invert(0%)