Skinning the Chrome Developer Tools Revisited - 11+ themes now available

Back in 2011, +Darcy Clarke  wrote a kick-ass post about how to skin the Chrome Developer Tools with your own custom stylesheet. The basic idea was to locate Chrome's user stylesheet directory then drop-in your own Custom.css file.

A few of you wrote in after noticing our custom-themed DevTools on the Breakpoint, so I thought I'd remind you about Darcy's post ( and share a whole bunch of themes written over the past year. Some of them include further theming to the console, icons and other panels.

DevTools Themes:

* 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:

Some tips:
* 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!
* We expose the classes/IDs you can theme via chrome-devtools:devtools/devTools.css

Please note: custom themes are unofficial and may potentially break existing DevTools functionality. As always, if you encounter bugs with the DevTools, please report them via, but disable the theme and test again, first. ;)
Shared publiclyView activity