Change The Look Of Chrome Developer Tools – Skin It!

Here is some fun stuff for developers or anyone who uses Chrome Developer Tools

Skin it!

How to Change Colors In Chrome Developer Tools

The first step is to find the location of the custom css file of the web inspector.

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

PCC:Users/YourUsername/AppData/Local/Google/Chrome/User Data/Default/User StyleSheets/Custom.css

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

Actually, that’s pretty much it. You can go ahead and open up the CSS file in your favorite text/code editor and start playing around. But there is more to this story.

Custom Themes for Chrome Developer Tools

 a Google engineer has collected some themes that you can download and apply to Chrome developer tools.

* MNML Theme:
(pictured. also themes Elements panel, headers/bars, console and more.) by+Michael P. Pfeiffer
* Monokai Dark: (also pictured)
* Tomorrow Theme: (one of many by the awesome +Benjamin Truyman)
* IR_Black Theme:
(and with sidebar colors:
* Solarized Dark by +François Robichet
* Ruby Blue:
* Expresso:
* Inversion:
* Dark Theme:
* Dark Dev:
* WebLight Theme:

Inspect The Inspector To Skin It!

You can tweak your skin for the DevTools using the DevTools themselves by undocking them then hitting Ctrl-Alt-i or Cmd+alt+i on Mac. DevToolsCeption!


In Category: Google Chrome


Dinsan made Google Chrome his default browser within hours of its release. He fell in love with Chromebooks from the day he first touched one and is currently obsessed with Chromecasts.

Show 1 Comment
  • Pascal 03/11/2012, 3:36 pm

    Hey Dinsan,

    two days ago I launched Addy Osmani mentioned it in The Breakpoint Episode. Devthemez gives you the chance to browse themes for Chrome Developer Tools.

    Feel free to feedback and have nice day