Bookmarklet for more relaxed video viewing. Overlays non-video elements with a semi-transparent shade.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Night Shades

Night Shades is a JavaScript bookmarklet that overlays non-video elements with a semi-transparent shade.

How it works

Night Shades lives as a bookmarklet in your browser.

When clicked, it will look for videos on your current page and if any are found, overlay the non-video portions of the page with a semi-transparent shade.

Really great for muting distractions and nighttime viewing.

Bookmarklet Flavours

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

The auto-updating bookmarklet is nice because you can install 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.

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. You will have to manually update as needed.

Install the Bookmarklet

The easiest way to install the auto-updating version of Night Shades is to visit and drag and drop the shiny blue button to your bookmark bar.

If you prefer, you can also manually copy and paste code from bookmarklet-auto-update.min.js to create an auto-updating bookmarklet.

The self-contained bookmarklet is too large to be be installed by dragging and dropping so you'll have to copy and paste code from bookmarklet-self-contained.min.js.

Building from Source

Night Shades is built using Grunt from all the files located in the source directory.

If you just downloaded Night Shades you'll want to install its dependencies by running the following command from the directory you unzipped everything into.

npm install

Once that is done you can simply run 'Grunt' and all the source files will be compiled to the build directory. By default, the included Grunt tasks will watch for future changes to the source directory and rebuild as needed.


Night Shades wants to be simple, lean and just robust enough to work in most situations. That being said, if you think your code contribution will help any of those goals then by all means feel free to send me a message or submit a pull request.

If on the other hand, you want to add new features, morph Night Shades into a browser extension or otherwise do something quite different, then please do. Just clone the repo and go crazy. Call it Night Shades+, Night Shadier or whatever you like. All the code is MIT licensed so you can do with it as you please.