Home Ask Login Register

Developers Planet

Your answer is one click away!

Omar February 2016

Invert complete webpage colors and reverse them with single toggle button

I need help to make this JSFiddle to reverse the color inversion I have tried many methods and tricks but failed somehow everytime.


above is the link to the jsfiddle which I would like to use on my website the same button should reverse the function but it isn't doing so i think there is some kind of error in it.


KWeiss February 2016

Instead of adding the style to the header, apply it directly to the <html> element. Then you can remove it again easily by putting something like this inside the negativar function:

var html = document.getElementsByTagName('html');

if (html.getAttribute('style')) {
    html.setAttribute('style', '');
} else {
    html.setAttribute('style', 'YOUR STYLE HERE')

Qwertiy February 2016

Specify html and body height and white background instead of transparent:

$("button").click(function () {
html, body {
  background: white;
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;

body {
  padding: 1em;

.inversed {
  -webkit-filter: invert(100%);
  filter: invert(100%);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Post Status

Asked in February 2016
Viewed 2,243 times
Voted 13
Answered 2 times


Leave an answer

Quote of the day: live life