Bookmarklet to toggle dark theme on any website

toggle-dark-theme-bookmarklet.js

javascript:
/* Toggle dark theme. Tested in Chrome 108. */
(()=>{
  var id = 'toggle-dark-theme-bookmarklet';
  var el = document.getElementById(id);
  if (el) { el.remove(); return; }
  document.head.insertAdjacentHTML('beforeend', `
    <style id="${id}">
      html {
        filter: invert(100%) hue-rotate(180deg);
      }
      /* Invert photos and videos back to normal. But not icons/graphics since
         inverting a black on transparent graphic (but not its background) might
         make it black on black; the hue-rotate on html preserves icon/graphic
         hues which is good enough and much safer. */
      video,
      iframe:is([src*="youtube.com"],[src*="vimeo.com"]),
      img:not([src*=".apng"],[src*=".gif"],[src*=".png"],[src*=".svg"]),
      [style*="background-image:"]:not(html,body):not([style*="gradient"],[style*=".apng"],[style*=".gif"],[style*=".png"],[style*=".svg"]) {
        filter: hue-rotate(180deg) invert(100%);
      }
      /* If we inverted an element with background-image back to normal, don't
         let its descendants get re-inverted. */
      [style*="background-image:"]:not(html,body):not([style*="gradient"],[style*=".apng"],[style*=".gif"],[style*=".png"],[style*=".svg"]) * {
        filter: none;
      }
    </style>
  `);
})()