How to skin Chrome Developer Tools with custom themes

I have previously posted about a theme named Monokai (in this post).

I think its a great color theme for displaying code, so ofcourse I had to try it out when I discovered the possibility to switch themes in Chrome Developer Tools.

A theme customization of Chrome Developer Tools, is done with pure CSS, and this particular stylesheet, for Monokai, you can download here.

The CSS goes into the Custom.css file in the following folder on your computer:

C:\Users\<yourusername>\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css

or on Mac:

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

Currently, it seems to be something wrong with the “Toolbar Enhancements” in the theme, so open the CSS file in a text editor, and remove that section. (leaving you with this).

The end result is a nice color theme in Chrome Developer Tools!


comments powered by Disqus