[removed] Invert color on all elements of a page

Question

Note: I am keeping an up-to-date version of the bookmarklet in my question which works well and is based on Jacob\'s answer. If you are looking for a bookma

Answer 1

The accepted answer is totally correct, with one minor flaw. Each time you toggle the invert it adds ANOTHER style tag to the head. Do this instead

  // the css we are going to inject
  let css = 'html {-webkit-filter: invert(100%);' +
    '-moz-filter: invert(100%);' +
    '-o-filter: invert(100%);' +
    '-ms-filter: invert(100%); }';

  let head = $('head')[0];
  let invertStyle = $('#invert')[0];

  if (invertStyle) {
    head.removeChild(invertStyle);
  } else {
    let style = document.createElement('style');

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

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

That way you simply remove the tag if you want to undo your invert. Works great!