Skip to content

Instantly share code, notes, and snippets.

@proimage

proimage/dark-overlay-bookmarklet.js

Last active April 12, 2016 19:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save proimage/89f7e1be3431dfd4d4ba538c5b917cad to your computer and use it in GitHub Desktop.
Save proimage/89f7e1be3431dfd4d4ba538c5b917cad to your computer and use it in GitHub Desktop.
Download ZIP
This bookmarklet toggles a dark overlay (75% black) over any page you're viewing, handy for toning down those blindingly white pages in the middle of the night. To use, copy the entire contents of this Gist, create a new bookmark in your browser (the bookmarks bar is a good, handy location to put it), and paste the Gist as the URL of the bookmark.
Raw
dark-overlay-bookmarklet.js
javascript:(function(){overlay=document.getElementsByClassName('overlay--darken');if(overlay.length>0){overlay[0].parentNode.removeChild(overlay[0]);}else{_my_overlay=document.createElement('aside');_my_overlay.className='overlay--darken';_my_overlay.style='position:fixed;top:0;bottom:0;width:100%;pointer-events:none;background-color:rgba(0,0,0,0.75);z-index:9999;';document.getElementsByTagName('body')[0].appendChild(_my_overlay);}})();
@proimage
Copy link
Author

BTW, this uses the CSS "pointer-events" property to allow the site "below" the overlay to be interacted with normally. Browser support is as seen here: http://beta.caniuse.com/#search=pointer-events - basically, IE 11+, and everything else (besides Opera Mini).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment