Darkness Theme for Gmail

Web Browser Extension
Screenshot of Gmail using Darkness's Monokai theme

“Darkness” is a web browser extension that allows the user to change the appearance of certain light-colored websites into a dark color scheme. I personally designed a dark “Monokai” Darkness theme for Gmail, Google’s email service.

Development

The client for Darkness specifically requested that I develop this Monokai Gmail theme using the CSS pre-processor Sass rather than plain CSS. A couple of the many benefits of using Sass over plain CSS is that Sass can use custom variables, and it can copy properties of elements of one Sass file into elements of another while still exporting everything into a single CSS file.

Screenshot of Gmail with compose email box in Darkness's Monokai theme

The colors of the Monokai Gmail theme were based on a pre-made list of color variables. My responsibility was to apply those color variables into Gmail’s web design. I also added some extra variables which were needed but didn’t exist before.

Developing this Darkness theme was a little more challenging than usual for re-designing websites, because we didn’t have access to Google’s original development CSS, and the live CSS of Gmail uses meaningless, obfuscated class names for all elements. I had to painstakingly reverse-engineer the CSS by using Chrome Developer Tools to inspect every nook and cranny of the website that needed its color changed.

About Darkness

Darkness, developed by Improvver, is an extension for the web browser Google Chrome. In addition to Gmail, Darkness can switch to dark color schemes for certain other websites including Google, Facebook, and YouTube. It’s available at the Chrome Web Store, where more than 50,000 people have installed this extension.