The Dark Theme for Chrome Dev Tools (Elements and Console)

Apr 1, 2012 by Kornelije Sajler    No Comments    Posted under: Test Lab

I’m big fun of Dark Themes for anything, and in every possible environment I have the Dark Theme. And it really doesn’t matter whether this is Terminal, TextMate, Visual Studio, Xcode or even MacVim that I’m currently in and writing this blog post!

This blog post and is inspired by blog of Darcy Clarke and his post “Skin your Chrome Inspector”. In this blog post Darcy is changing the theme for Elements tab in Chrome Developer Tools, but I wanted more, the Console tab where you can write and test JavaScript, very powerful tool but very dull to work with.

So armed by the knowledge that Darcy provided, I’ve created the Dark Theme for Console and embed it with Darcy’s script. And now both Elements and Console are changed and have the nice Dark Theme.

Screenshots:

Elements

Console

The only thing I’ve need to do yet is links that can be in “Console” and they are currently dark grey and really don’t fit in with dark background.

Install

Should be fairly simple for Mac, Linux or PC:

Mac ~/Library/Application\ Support/Google/Chrome/Default/User\ StyleSheets/Custom.css

PC C:\Users\YourUsername\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css

Ubuntu (Chromium) ~/.config/chromium/Default/User\ StyleSheets/Custom.css

Repository

The whole code “Custom.css”, I’ve put in Github repository and it can be cloned (or forked) by:

git clone git@github.com:xajler/chrome-devtools-dark-theme.git

Or getting the raw document from this link

Happy Chrome Console coding with dark theme!

Got anything to say? Go ahead and leave a comment!