Applying a theme to your Chrome Dev Tools

I wanted to make the Chrome dev tools editor easier on the eyes so I had a look around to see if it was possible. Since the web tools UI is web based it seems easy to skin and there is a great eco system of themes available from which to choose from.

A great site to browse through is devthemez.com, although it seems some of the themes no longer render correctly perhaps to due breaking changes in Chrome. One relatively complete theme which did function correctly is chromegray so this is the one I kept.

It will need to be installed into the following directory if your on Windows:

C:\Users\%USERNAME%\appdata\local\Google\Chrome\User Data\Default\User StyleSheets

So you can run the following PowerShell command to get this installed directly.

Invoke-WebRequest -Uri "https://raw.github.com/karelvuong/chromegray/master/Stable/Custom.css" -OutFile "C:\Users\$env:USERNAME\appdata\local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css" 

As a result I have a flatter design and an easier on the eyes editor which reminds me more of sublime text.

image

I have to recommend giving it a go, the editor updates live with the new theme. If you don’t like it then its easy to find another one or remove the theme altogether.

blog comments powered by Disqus