Night Shades Bookmarklet

December 9, 2013

Night Shades is a bookmarklet which is another way of saying, "a special kind of bookmark that can be used on any site you visit to do something".

In our case, that something will be to overlay non-video areas of a page with a semi-transparent shade. Great for both muting distractions and nighttime viewing.

For example, here is a screenshot from YouTube with the left half of the page showing Night Shades active and the right half displayed normally.

Bookmarklet Flavours

Night Shades comes in two flavours. Auto-updating and Self-contained.


The auto-updating bookmarklet is nice because you can install it once and never have to worry about manually managing updates.

The only limitation is that it will not work when using Chrome on a site with a restrictive CSP (Content Security Policy) like Facebook. This limitation does not affect Firefox, Safari, Opera or IE.

Night Shades
Auto-update version. Drag the button above to your bookmark bar.


The self-contained bookmarklet includes all the code it needs to function. This means it can run on sites with a restrictive CSP since it does not have to download any additional files. The cost of this capability is the loss of automatic updates.

To install, copy and paste code from bookmarklet-self-contained.min.js into the URL field of a new bookmark. Use the same procedure whenever you want the benefits of a newer version of the bookmarklet.

Open Source

Night Shades is open source and MIT licensed which basically means all the code is yours to do with as you please!

Check out Night Shades on GitHub for more info.