Invert colors in Chrome Browser (with DevTools JavaScript console)

gistfile1.js

javascript: (function () {
  // the css we are going to inject
  var css =
      "html {" +
      "    -webkit-filter: invert(100%);" +
      "    -moz-filter:    invert(100%);" +
      "    -o-filter:      invert(100%);" +
      "    -ms-filter:     invert(100%);" +
      "}",
    head = document.getElementsByTagName("head")[0],
    style = document.createElement("style");

  // a hack, so you can "invert back" clicking the bookmarklet again
  if (!window.counter) {
    window.counter = 1;
  } else {
    window.counter++;
    if (window.counter % 2 == 0) {
      // showing another way instead of multiple strings with + you can use \
      var css =
        "html { \
            -webkit-filter: invert(0%); \
            -moz-filter:    invert(0%); \
            -o-filter:      invert(0%); \
            -ms-filter:     invert(0%); \
        }";
    }
  }

  style.type = "text/css";
  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }

  //injecting the css to the head
  head.appendChild(style);
})();

Either run this directly in devTools, or Create a bookmarklet of any page, then edit it's name and paste in the url field the following:

javascript:(function()%7Bjavascript:(function()%7Bvar css%3D%27html %7B-webkit-filter: invert(100%25)%3B%27%2B%27-moz-filter: invert(100%25)%3B%27%2B%27-o-filter: invert(100%25)%3B%27%2B%27-ms-filter: invert(100%25)%3B %7D%27,head%3Ddocument.getElementsByTagName(%27head%27)%5B0%5D,style%3Ddocument.createElement(%27style%27)%3Bif(!window.counter)%7Bwindow.counter%3D1%3B%7Delse%7Bwindow.counter%2B%2B%3Bif(window.counter%252%3D%3D0)%7Bvar css%3D%27html %7B-webkit-filter: invert(0%25)%3B -moz-filter: invert(0%25)%3B -o-filter: invert(0%25)%3B -ms-filter: invert(0%25)%3B %7D%27%7D%7D%3Bstyle.type%3D%27text/css%27%3Bif(style.styleSheet)%7Bstyle.styleSheet.cssText%3Dcss%3B%7Delse%7Bstyle.appendChild(document.createTextNode(css))%3B%7Dhead.appendChild(style)%3B%7D())%3B%7D)()%3B

Thanks a lot! This works like a charm.

You are welcome ;D

Either run this directly in devTools, or Create a bookmarklet of any page, then edit it's name and paste in the url field the following:

javascript:(function()%7Bjavascript:(function()%7Bvar css%3D%27html %7B-webkit-filter: invert(100%25)%3B%27%2B%27-moz-filter: invert(100%25)%3B%27%2B%27-o-filter: invert(100%25)%3B%27%2B%27-ms-filter: invert(100%25)%3B %7D%27,head%3Ddocument.getElementsByTagName(%27head%27)%5B0%5D,style%3Ddocument.createElement(%27style%27)%3Bif(!window.counter)%7Bwindow.counter%3D1%3B%7Delse%7Bwindow.counter%2B%2B%3Bif(window.counter%252%3D%3D0)%7Bvar css%3D%27html %7B-webkit-filter: invert(0%25)%3B -moz-filter: invert(0%25)%3B -o-filter: invert(0%25)%3B -ms-filter: invert(0%25)%3B %7D%27%7D%7D%3Bstyle.type%3D%27text/css%27%3Bif(style.styleSheet)%7Bstyle.styleSheet.cssText%3Dcss%3B%7Delse%7Bstyle.appendChild(document.createTextNode(css))%3B%7Dhead.appendChild(style)%3B%7D())%3B%7D)()%3B

How you did that, please tell me.

Bookmarklets tend to be one line of code. If you add them to a bookmark, replacing the url of a bookmark for anything, they replace things like spaces with the %.... and similar.

This is very cool. Thank you.