Customising Chrome DevTools for fun and... no, just fun

Whoever has seen me working knows that I'm a big fan of customising my tools, specially when it comes to the colours and themes. To give you an example, my vim setup (which is very similar to Mozilla's Paul Rouget's) makes vim look closer to Sublime Text 2 than to the "conventional" vim:

I've also changed my default shell to Oh-My-Zsh precisely because it was more flexible and open to customisations:

And the same goes for Sublime Text 2:

However, if you pay attention you'll notice one minor detail: All the themes that I choose are dark. To be honest, "light" interfaces hurt my eyes, which is why I've always been bothered when I open the Chrome Developer Tools and see this:

Thankfully, some time ago I came across this article by Darcy Clarke that revealed that you could customise the colours, as well as the general layout, of the Chrome Inspector.

Turns out that all you need to do is to edit a special CSS file and... that's about it. Below you'll find the location of the file for the most popular OSs:

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

If you open that file you'll notice that by default it will be empty (unless you have added something before, of course). Therefore, the purpose of the "Custom" stylesheet is to override the styles declared here. However, you can also press the shortcut to inspect the page inside the inspector itself and... VOILA!, you can inspect the inspector!

It is now when things get a little bit more interesting.

The first thing I'm going to do is to add a new gradient to the interface:

/* Make the top toolbar dark */
#-webkit-web-inspector.detached #toolbar {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#222)) !important;
    height: 42px !important;
    border-top: 1px solid #999 !important;
    border-bottom: 1px solid #000 !important;
}

#-webkit-web-inspector.detached.inactive #toolbar {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#666), to(#444)) !important;
}

#-webkit-web-inspector #main {
    top: 42px !important;
}

/* Disable the labels of the toolbar icons */
#-webkit-web-inspector .toolbar-label {
    display: none !important;
}

Notice that before each declaration I'm adding the selector #-webkit-web-inspector, if I didn't any element on any page with the selector .detached.inactive #toolbar would be affected by this change as well, so you need to be careful. Another consideration that you need to keep in mind is that for some elements you'll need to add the !important keyword to override the default style, which seems to be on a lower level than Custom.css.

So far we've customised the top toolbar. Now I'm going to do the same for the status bar and all its child elements including glyphs (icons) which, by the way, are using images as masks, so you can change it to any colour you want:

/* Make the status bar dark as well */
#-webkit-web-inspector .status-bar {
    background-image: -webkit-linear-gradient(#444, #222) !important;
}

#-webkit-web-inspector .status-bar button.status-bar-item {
    border-left: 1px solid #555 !important;
    border-right: 1px solid #222 !important;
}

#-webkit-web-inspector .status-bar button .glyph {
    background-color: rgba(255, 255, 255, 0.75) !important;
    margin: 0 1 !important;
}
#-webkit-web-inspector .status-bar button .glyph.shadow {
    margin: -2px -1px !important;
    background-color: rgba(0, 0, 0, 0.75) !important;
}

#-webkit-web-inspector .crumbs .crumb.selected.end, .crumbs .crumb {
    -webkit-border-image: none !important;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#666), to(#222)) !important;
    border-width: 0 1px 0 2px !important;
    border-right: 1px solid rgba(0,0,0,1) !important;
    border-left: 1px solid rgba(255,255,255,0.2) !important;
    margin: 0 !important;
    padding-right: 7px !important;
    color: #BBB !important;
    text-shadow: -1px -1px 1px rgba(0,0,0,0.5) !important;
}

#-webkit-web-inspector .crumbs .crumb.selected.end, .crumbs .crumb.selected {
    -webkit-border-image: none !important;
    color: black !important;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8) !important;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(254, 236, 109, 1)), to(rgba(253, 200, 51, 1))) !important;
}

And the same goes for the panes on the right:

/* Panes */
#-webkit-web-inspector div.pane.expanded {
    background-color: #AAA;
}

#-webkit-web-inspector .styles-section.read-only {
    background-color: #CCC !important;
}

#-webkit-web-inspector .styles-section .header .subtitle {
    color: #666 !important;
}

#-webkit-web-inspector  .monospace, 
#-webkit-web-inspector .source-code {
    color: #000 !important;
}

#-webkit-web-inspector .styles-section .properties > li .webkit-css-property {
    color: #CC0000 !important;
    font-weight: bold;
}

#-webkit-web-inspector .sidebar-separator {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#666), color-stop(0.05, #666), color-stop(0.05, #333), to(#444)) !important;
    color: #CCC !important;
    text-shadow: -1px -1px 1px rgba(0,0,0,1) !important;
    border-top: 1px solid #555 !important;
    border-bottom: 1px solid #111 !important;
}

#-webkit-web-inspector .pane > .title {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#666), to(#444)) !important;
    color: #CCC !important;
    text-shadow: -1px -1px 1px rgba(0,0,0,1) !important;
    border-top: 1px solid #777 !important;
    border-bottom: 1px solid #111 !important;
}

 

How the editor looks at this point:

Now that the initial interface is done it's time to modify the syntax highlighter. Like I mentioned before, while checking out Darcy Clarke's article, I came across a theme made by Ben Truyman called "IR Black". I then decided to modify Ben's theme to look like Monokai, an extremely famous colour scheme included in many editors. Here's a screenshot of the inspector after applying the new theme:

While at this point we may say that it's "done", there's one more thing that we may want to customize; The icons. Now, the problem is that we can't edit the icons spritesheet directly without a) making an extension, or b) recompiling Chromium. However, there's a third and easy way to change them which is by using a Data URI. All we need to do is to draw the new icons and export them as a PNG file. Then we can use an Image-to-DataURI online converter like this one to get the Data URI string, that later one we'll be able to paste within our custom CSS file.

The icons that I made for this theme look like this:

 

Additionaly, I've been always bothered by the fact that the javascript console, the section that I use the most, is the last icon and not the first, which is a bit annoying to access if you're testing a responsive site and your browser window is small. My final theme, which you'll find below as a gist, changes the position of that tab as well.

UPDATE: Added screenshots of the final editor