<div class="clearBoth"></div>

Update: As of version 32, the Chrome Team have changed the unique ID of the dev tools container. The ID is #-blink-dev-tools, which changed from the original #-webkit-web-inspector, understandably. You can thank @paul_irish for the heads up!

Ever want to change the look of your Google Chrome Web Inspector? I personally love being able to customize the "theme" or "brush" of my favorite IDE and my Web Inspector is no different. If you've ever done some snooping around Google Chrome's Web Inspector you may have noticed that it's made of straight HTML + CSS + JavaScript. My buddy Paul Irish was the one to show me how you can "inspect" the Inspector (very Inception-esque).

With this knowledge, I acquired the help of my good friend Wes Bos. Together we went looking for a way to customize our installs. Luckily enough, the Chromium team have set us up with a nice way of inserting our own CSS.

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

PC: C:UsersYourUsernameAppDataLocalGoogleChromeUser DataDefaultUser StyleSheetsCustom.css ~Thanks to @VSC

Ubuntu (Chromium): ~/.config/chromium/Default/User StyleSheets/Custom.css ~Thanks to @Carlos

The file above is, as it sounds, a CSS file that you can modify and add your own custom styles to. To help you get started, I'm posting my Custom.css file for you to use. I've documented almost all the selectors so it should be easy to modify. Check it out below:

Download this Skin here.

Note: You can check out more selectors and default CSS by copying + pasting the URL below in to your version of Chrome: chrome-devtools://devtools/devTools.css

Have fun theming your install, and make sure to post your results back here!

Update: Some people have made some great skins. I especially like Ben Truyman's IR Black theme seen here below. I'll keep adding to this list of skins if you guys keep them coming!

Download IR Black Skin here.