Background

For one of the client projects that I’m working on, we have multiple deployment environments up and running. At the last count we had five - local, development, qa, staging and production. However, with so many environments, I was finding it really difficult to differentiate between each of them as each website looks exactly the same. The only difference being a single word in the url:

I wanted to be able to immediately know which environment I was looking at. Meaning that I’d be able to tell each environment apart visually, and determine the environment if given a url by someone else. And this would also allow me to know how careful I should be - i.e. I’m can go mad on a local environment but will exert due caution on staging/production.

I took inspiration for how to solve this from my experience using Postico (a PostgreSQL client) in a previous team. Postico allows you to color-code each of your data sources - so the tab for our production connection was red and for development it was green.

I came up with the idea to change the color of the top navigation bar depending on the environment. After a bit of searching, the Stylish Chrome extension seemed to fit the bill. This extension allows you to customise a website through applying custom CSS styles over the top of existing styles.

Color-coding deployment environments using Stylish

For each of my deployment environments I created a new style by selecting the ‘Create New Style’ option:

From there, you are taken to an ‘Add style’ page where you can specify your CSS:

In our project, the top navigation bar has a class of navbar (super original 😛) so the CSS I added was: