Chrome Story

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.

chrome news  Change The Look Of Chrome Developer Tools   Skin It!

* MNML Theme: https://github.com/frontdevDE/mnml-devtools-theme
(pictured. also themes Elements panel, headers/bars, console and more.) by+Michael P. Pfeiffer
* Monokai Dark: https://gist.github.com/bc12d6bb85ffb96042e8 (also pictured)
* Tomorrow Theme: https://gist.github.com/1163300 (one of many by the awesome +Benjamin Truyman)
* IR_Black Theme: https://gist.github.com/1150520
(and with sidebar colors: https://gist.github.com/1245727)
* Solarized Dark https://gist.github.com/2174604 by +François Robichet
* Ruby Blue: https://github.com/chrisbateman/ChromeDevToolsTheme-RubyBlue/
* Expresso: https://gist.github.com/1207219
* Inversion: https://github.com/mohsen1/Chrome-Dev-tools-dark-theme
* Dark Theme: https://github.com/xajler/chrome-devtools-dark-theme
* Dark Dev: https://github.com/simonsmith/DarkDev
* WebLight Theme: https://gist.github.com/1325072

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!

via 

1+

Up

Pin

Next post

External Extensions Now Disabled By Default

Previous post

New – Read Google Play Magazines in Chrome

1 Comment

  1. Hey Dinsan,

    two days ago I launched http://devthemez.com. 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
    Pascal