A while back, I shared the chrome extension Grayscale The Web that I used daily to avoid being distracted by long lived tabs such as email and music. This prevents them from stealing more attention than they deserve without having to close or hide them.
It does a good job, however, a couple of small things I do not enjoy about this extension are:
- Allows you to save urls to automatically grayscale, however not subdomains.
- Randomly would greyscale a new tab, even sometimes a new tab in another window.
- To toggle on/off requires two clicks, which is at least one too many. This is more emphasised with the above bug when you have to turn it off often.
- Not open source.
I decided to use my lunch break to write a lite version to better suit my own personal daily use case. It is not fancy, nor brilliant, but it tries to do a simple thing well enough for some people.
If you want to try it, please get it from the Chrome Web Store
Once added to Chrome, simply click the icon in the toolbar to turn the current tab to grayscale. Refresh the page to return to colour. It basically injects a few simple lines of css into the currently active tab, does not save urls, does not store state, does not toggle on and off.
Chrome is bringing out other options that are currently available on their Canary development build with the flag
Force Dark Mode for Web Contents which adjusts the content to dark mode using a number of more complex approaches. I find the grayscale css a better solution for the sites I use it on, mostly because it is a blanket across all elements, including images and videos. It is less intelligent, and is not trying to improve readability which is likely what the other options are better for.
Coming also are the new media queries to expose to the web designer if a user prefers dark mode, and to provide their own dark theme. In a few years, this is most likely the best approach as content providers adopt it.
To wrap up, the source code is also available on GitHub. All impressive 20ish lines of it.