'How to Invert everything On Page except images

I was thinking of a simpler way to change the colors on a page without having to write additional CSS for dark mode. After searching I came across the use of jQuery in very which sort of works to an extent but inverts the images on the page too. In my case, it would be better not to have images inverted but texts only. How do I achieve this? I have tried

$("#ibutton").click(function() {   $("body:not(img)").css("filter", "invert(2)") })
$("#ibutton2").click(function() {   $("body").css("filter", "invert(0)") })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
 <img src="https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png" width="128px"> 
 <br><font color="red">I am Logo</font>
 <br>
  <input id="ibutton" value="invert" type="button"/>  <input id="ibutton2" value="revert" type="button"/>
javascripthtml


Solution 1:[1]

Your code is wrong because you are selecting body. You have to select all elements in the body except images You can do like below

$("#ibutton").click(function() {   $("body").find("*:not(img)").css("filter", "invert(2)") })
$("#ibutton2").click(function() {   $("body").find("*").css("filter", "invert(0)") })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
 <img src="https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png" width="128px"> 
 <br><font color="red">I am Logo</font>
 <br>
  <input id="ibutton" value="invert" type="button"/>  <input id="ibutton2" value="revert" type="button"/>

There is another way of doing invert color by not adding inline style to all the elements by only add one class to body and style the class like below

$("#ibutton").click(function() {   $("body").addClass('invert') })
$("#ibutton2").click(function() {   $("body").removeClass('invert') })
body.invert *:not(img) {
  filter: invert(2)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
 <img src="https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png" width="128px"> 
 <br><font color="red">I am Logo</font>
 <br>
  <input id="ibutton" value="invert" type="button"/>  <input id="ibutton2" value="revert" type="button"/>

Solution 2:[2]

Try this one.

$("#ibutton").click(function() { $("body *").not("img").css("filter", "invert(2)") }) $("#ibutton2").click(function() { $("body *").css("filter", "invert(0)") })

$("#ibutton").click(function() {   $("body *").not("img").css("filter", "invert(2)") })
$("#ibutton2").click(function() {   $("body *").css("filter", "invert(0)") })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
 <img src="https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png" width="128px"> 
 <br><font color="red">I am Logo</font>
 <br>
  <input id="ibutton" value="invert" type="button"/>  <input id="ibutton2" value="revert" type="button"/>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2

Related Questions