Skin your Chrome Inspector

Update: As of version 33, the Chrome Team have changed Custom User Stylesheets and there is a new API for DevTools themes to use. ~ Paul Irish

Developing Themes: If you’d like to develop a theme, follow the guide in the sample-devtools-theme-extension.

Using Themes: If you’d like to use a theme:

  • Open chrome://flags and Enable Developer Tools experiments.
  • Open developer tools settings, select Experiments tab, and check Allow Custom UI Themes.
  • Install any theme, you can search for “devtools theme” on the Chrome Web Store. It’ll also keep you up to date.

Ever want to change the look of your Google Chrome Web Inspector? I personally love being able to customize the “theme” or “brush” of my favorite IDE and my Web Inspector is no different. If you’ve ever done some snooping around Google Chrome’s Web Inspector you may have noticed that it’s made of straight HTML + CSS + JavaScript. My buddy Paul Irish was the one to show me how you can “inspect” the Inspector (very Inception-esque).

With this knowledge, I acquired the help of my good friend Wes Bos. Together we went looking for a way to customize our installs. Luckily enough, the Chromium team have set us up with a nice way of inserting our own CSS.

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

PC: C:UsersYourUsernameAppDataLocalGoogleChromeUser DataDefaultUser StyleSheetsCustom.css

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

The file above is, as it sounds, a CSS file that you can modify and add your own custom styles to. To help you get started, I’m posting my Custom.css file for you to use. I’ve documented almost all the selectors so it should be easy to modify. Check it out below:

Note: You can check out more selectors and default CSS by copying + pasting the URL below in to your version of Chrome:

Update: Some people have made some great skins. Check out Ben Truyman’s Themes, Dev Themez or search the Chrome Web Store for “dev tools theme”.


josue Posted: Aug 15, 2011 @ 5:18pm

YES! Thanks.

I may just try and port Solarized over the weekend.

VSC Posted: Aug 15, 2011 @ 5:21pm

Nice post. For Windows Vista the file location is here:
C:UsersYourUsernameAppDataLocalGoogleChromeUser DataDefaultUser StyleSheets

Gianni Chiappetta Posted: Aug 16, 2011 @ 3:53am

Hot stuff, Darcy. Well done.

Arpit Posted: Aug 16, 2011 @ 4:31am

Nice tip. Time to play with CSS. :)

Carlos Posted: Aug 16, 2011 @ 4:35am

Yay thanks, for Chromium (on Ubuntu
~/.config/chromium/Default/User StyleSheets/Custom.css

Windigo Posted: Aug 16, 2011 @ 5:51pm

Wow, that’s incredibly cool – I loves me some dark color schemes. Special thanks to Carlos for the Linux/Chromium location!

Miles Posted: Aug 16, 2011 @ 6:36pm

very cool. thanks for sharing.

Charlie Posted: Aug 16, 2011 @ 7:07pm

You can add the following CSS to for better visibility on the collapsed/uncollapsed node indicators:

Joss Crowcroft Posted: Aug 17, 2011 @ 1:46am

Sweet! In hindsight, this seems obvious… the best ideas always do.

Burton Posted: Aug 17, 2011 @ 3:42am

Awesome! Now, does this only allow skinning of the elements tab, or is there a way to change the colors of text in the scripts tab as well?

kimblim Posted: Aug 17, 2011 @ 6:49am

I’ve never used User Stylesheets before, so here is a (perhaps stupid) question: what if some other site you browse use the same class names? Is there no way to do this in a site/app specific way (other than using very specific selectors, ie. #id > .class > .class)?

Russell Bishop Posted: Aug 17, 2011 @ 8:48am

Ah I had no idea that’d be possible, I might have to give this a crack sometime soon!

Yo Yehudi Posted: Aug 17, 2011 @ 9:01am

Awesome! The beautiful autumn-on-dark theme is so gorgeous I don’t even feel the need to customise it. My path to the settings file (XP) was actually C:Documents and Settings((USERNAME))Local SettingsApplication DataGoogleChromeUser DataDefaultUser StyleSheets

EStruyf Posted: Aug 17, 2011 @ 9:37am

That’s very handy! Thank you.

EStruyf Posted: Aug 17, 2011 @ 10:14am

@Charlie, you could also do the following: This is with the default white node images.

[...] banalnie prosta i wymaga jedynie znajomości CSS’a :) otóż (pełny art. na ten temat jest tu) musimy podmienić plik CSS w katalogu użytkownika. Jego lokalizacja w zależności od systemu [...]

Sascha Fuchs Posted: Aug 17, 2011 @ 12:02pm

Wow this is cool, a black coding area for my favorite dev tool :) Thanks

Zach Leatherman Posted: Aug 17, 2011 @ 12:56pm

Wonder if there is a way to publish this kind of theme in the Google Web Store.

John Smith Posted: Aug 17, 2011 @ 12:58pm


Kaelig Posted: Aug 17, 2011 @ 1:14pm

Thanks for the great tip !

I gave it a shot :

(IR_Black SD theme from textmate)

Pritesh Gupta Posted: Aug 17, 2011 @ 1:57pm

Wow, very cool!!

Ben Truyman Posted: Aug 17, 2011 @ 3:18pm

@Kaelig I also recreated the IR_Black theme. Mine also decorates the other tabs as well. Even the console.

darcyclarke Posted: Aug 17, 2011 @ 3:25pm

@kimblim the “Custom.css” stylesheet is specific to the Chrome Developer Tools pane. A website can’t touch it (not right now at least), since there is no external API to mess with that CSS or JS.

@Charlie @Kaelig Nice! I’ll post an update soon or may throw together a one off site for these skins.

darcyclarke Posted: Aug 17, 2011 @ 3:29pm

@Burton You can easily change the primary id (#elements-content) to .text-editor-contents and you should be good to go. That class is the primary wrapper around the JS you look at in the Resources pane. Happy styling!

Doug Posted: Aug 17, 2011 @ 4:28pm

This is great, and Charlie’s addition was much needed. Here is some code for restoring the line highlighting:

Matthew Lein Posted: Aug 17, 2011 @ 5:01pm

Whoops, IDs are very important, didn’t think about other sites using those common classed :P

fiddle updated

Matthew Lein Posted: Aug 17, 2011 @ 5:02pm

Oh, i guess my other comment didn’t go in. I restored node highlighting and made a fiddle with the inpsector HTML in it

Paul Redmond Posted: Aug 17, 2011 @ 5:13pm

Here is a start of the Default “Espresso Tutti colori”

Still needs some work :)

darcyclarke Posted: Aug 17, 2011 @ 9:21pm

@Ben @Paul Your skins are awesome! Definitely worth checking out :)

Michael Freytag Posted: Aug 17, 2011 @ 9:52pm

For anyone looking for the path on a fresh install Lion the Library folder is hidden

Alex Posted: Aug 18, 2011 @ 9:06am

That’s awesome. Now I have the same color scheme in my editor and chrome.

Thanks Darcy.

[...] Skin your Chrome Inspector ( [...]

George Dina Posted: Aug 19, 2011 @ 8:00am

Now debugging will not be boring! :)

[...] 'n Tricks Add comments Aug 192011 Love customizing things? Darcy Clarke has shown us a way to skin Google Chrome Web Inspector. Since Chrome’s Web Inspector is basically made of HTML and CSS, you can easily style it to your [...]

JamesTheCraig Posted: Aug 19, 2011 @ 6:41pm


Michael K Posted: Aug 19, 2011 @ 6:53pm

sweet post. =)

@Josue, let me know how porting the Solarized themes are coming along; I’d love to use Solarized & be willing to help out too!

Dhruva Sagar Posted: Aug 20, 2011 @ 3:49am

For Google Chrome on Ubuntu – ~/.config/google-chrome/Default/User StyleSheets/Custom.css

Paul Irish Posted: Aug 21, 2011 @ 5:53pm

For presenting, you often want to bump up the font-size for readability. Drop in this guy into your custom.css for that.

Mark Posted: Aug 22, 2011 @ 2:39pm

Sweet now my inspector matches my Sublime Text 2 editor…. almost

Warren Posted: Aug 25, 2011 @ 8:03am

I’ve ported the vibrant ink textmate theme since it rocks so hard ;)

here’s the css:


Christopher Leckie Posted: Aug 25, 2011 @ 3:53pm

I’m quite interested in the right hand side and switching it to a tab based layout not unlike firebug. Has anyone given this a go?

Janese Posted: Aug 29, 2011 @ 7:07pm

Great cmomon sense here. Wish I’d thought of that.

josue Posted: Aug 30, 2011 @ 4:40pm

@Michael K

Initial commit of Solarized Light for use with Google Chrome’s Web Inspector:

Feel free to fork and contribute. I’m not ready to commit my Solarized Dark work yet but it’s coming too.

Mike Reinhardt Posted: Sep 10, 2011 @ 4:01am

A port of Espresso Libre, including view-source coloring:

Ben Truyman Posted: Oct 01, 2011 @ 2:57pm
Mark Osborne Posted: Oct 03, 2011 @ 2:35am

Wow this is great!!

I’ve created a Solarized Dark theme with sidebar and view-source colours. You can download here:

Rebeen Posted: Oct 20, 2011 @ 5:56am

Haha! Very cool! Thanks for tip!:)

Paul Irish Posted: Nov 11, 2011 @ 12:47pm

There was just added an ID to the body element of the inspector. This allows you to target it exclusively with the UA stylesheet:


Tanif Posted: Nov 20, 2011 @ 4:44pm

There is a problem whith IR Black when you edit HTML. The HTML text is too dark. With Vibrant skin happens the same but in this case the text is white like the background

Marco Berrocal Posted: Nov 21, 2011 @ 7:37pm


I love dark themes, for one it helps preserve the planet as less light is needed for black (well and it’s just different. Thanks a lot guys!!!

Warren Posted: Nov 25, 2011 @ 12:45pm

I can’t seem to inspect the web inspector anymore. Anyone else?

I was going to fix the HTML selection issue that Tanif mentioned but I can’t find a way to do this now.

Tom Posted: Nov 30, 2011 @ 10:21am


Dave Posted: Nov 30, 2011 @ 1:41pm

I’m running into the same thing as @Warren. I can’t inspect the inspector anymore either.

0i0 Posted: Jan 16, 2012 @ 2:04pm
Dominick Posted: Jan 16, 2012 @ 9:59pm

i can also no longer inspect any part of the inspector via the right-click context menu on OS-X Snow Leopard, Chrome 16. I’ve tried reverting Custom.css back to empty as it was previously and restarting Chrome but still no luck.


Dominick Posted: Jan 17, 2012 @ 3:43am

disregard my last comment; i checked Chrome 16 on a system that i hadn’t messed with custom.css on, and i still could not inspect the inspector. i guess they removed that capability from Chrome…

[...] que lei hace un tiempo en el blog de Darcy Clark era que podiamos aplicar los estilos que quisieramos al Developer Toolbar de Chrome, si bien en ese [...]

[...] been looking into customising the Chrome Web Inspector (here and here in particular) in an effort to move the CSS part of the Elements panel to the left, with the HTML [...]

Alain Posted: Mar 20, 2012 @ 1:59am

missing the most important: how do you make Chrome display tabs as 4 (or 2) spaces instead of stupid 8? make js code reading very painful. ‘tab-size’ CS3 property doesn’t seem to be supported…. why isn’t there a pref for that basic thing is beyond me.

[...] su apariencia. He estado investigando un poco, y el theme que más me ha gustado ha sido el de Darcy Clarke, pero ni con ese, ni con otros muchos que probé pude cambiar la apariencia de la barra derecha del [...]

David L. Posted: Apr 03, 2012 @ 2:43pm

@Alain – have you looked at the Developer Tools settings (the gear icon in the bottom right corner of the Dev Tools)? You can select 2, 4, 8 spaces or Tab.

wycks Posted: Apr 14, 2012 @ 9:47pm

I forked the IR_Black Theme to bump up the font-size to 14, toned down some colors (just green/purple) and added platform sidebar support.

I tried to skin the resource/sidebar panel but it’s not very friendly.

BTW the current built 18.0 has the inspect disabled but the latest Chrome canary built now enabled you to inspect the inspector again.

[...] recently discovered that you can skin the Chrome dev tools. So, I naturally had to build a Ruby [...]

[...] blog post and is inspired by blog of Darcy Clarke and his post “Skin your Chrome Inspector”. In this blog post Darcy is changing the theme for Elements tab in Chrome Developer Tools, but I [...]

[...] I found this great link and added the cus­tom file it pro­vided (lots of choices… and you can even make your own!) it to my computer’s folder (use the path for the machine you are using): [...]

[...] been looking into customising the Chrome Web Inspector (here and here in particular) in an effort to move the CSS part of the Elements panel to the left, with the HTML [...]

颂赞 Posted: May 29, 2012 @ 3:13am

Thanks :-)

Andrew Martin Posted: Jul 13, 2012 @ 4:16pm

Hey man, great post! I’m having trouble with actual websites now for some reason though. I know you said it has no bearing on websites, but check out this screenshot (this is from the Instagram API page, so I know it’s not on my end):

I believe the inspector is affecting some sites somehow, because the hues match––any idea how or what rule may be causing this?

Darcy Clarke Posted: Jul 13, 2012 @ 4:26pm

Hey Andrew,

If you read the “Update” section at the top of the post you’ll notice that Chrome added a unique id to the dev tools. This should help contain the issue you’re having. Unfortunately, some of the themes that were created and that you may be using were done before this was implemented. So some of the styles may be leaking onto websites (as you’ve experienced).

xue Posted: Jul 17, 2012 @ 11:39pm

Very cool thanks!

Ben Truyman Posted: Jul 19, 2012 @ 4:49pm

I’ve LESSified my Tomorrow Night theme:

evilness Posted: Jul 21, 2012 @ 5:30pm

love you mate:)

[...] on a post by Darcy Clarke. Tweet Related [...]

Sean Gerety Posted: Aug 10, 2012 @ 11:35am

I’ve added to your stylesheet an item that high lights the selected item and it’s children. You can get it here.

AntoxaGray Posted: Aug 18, 2012 @ 7:38am

Is there way to hide html comments in web inspector? They are helpful in my code editor, but I don’t want to see them in Chrome.

Simon Posted: Aug 24, 2012 @ 7:29am

Another skin for the collection –

Christopher B Posted: Sep 05, 2012 @ 6:19pm

Confused, how do you actually, inspect the inspector? I searched around on other sites and one mentioned this: chrome://devtools/devtools.html but on that page it only shows the top of the inspector with no buttons and nothing else. Am I missing something?

Clayton Farr Posted: Sep 16, 2012 @ 8:35pm

Another, in the spirit of Monokai.

@Christopher B – see the notes at the end of the Gist above for details on inspecting the Inspector.

Mike L Posted: Sep 20, 2012 @ 3:08pm

This works great for the HTML inspector. Is there something comparable for the JavaScript source view windows?

Aamir Afridi Posted: Oct 03, 2012 @ 4:57am

On Its not under root /Library….
Its under HD/Users/USERNAME/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css

Braunson Posted: Oct 04, 2012 @ 11:38am

Wonderful themes posted, handy article..

Leban Hyde Posted: Oct 05, 2012 @ 12:42pm

This made my Friday! Loving. It.


Tomas Novotny Posted: Oct 08, 2012 @ 3:25am

Dark theme for JavaScript source viewer would be superb..

Resting Posted: Oct 08, 2012 @ 10:19pm

Thanks!! Nice theme. If only the right panel is dark themed too.

Mohsen Posted: Oct 12, 2012 @ 4:09am


Would you please add my Chrome Developer Tools dark theme that is developed based on CSS filter property to your list?


[...] dunklere, wie man sie aus Sublime & Co kennt. Darcy Clarke hatte zwar schon letztes Jahr einen Blogpost verfasst, wie man die entsprechende CSS – Datei selbst anpassen kann, jedoch muss man sich [...]

wiwid Posted: Oct 17, 2012 @ 10:54am

thanks.. :)

Ryan Posted: Oct 18, 2012 @ 10:05pm

Firstly, Awesome & many Thanks!

Updated, ::163 “Edit as HTML” color-white


Martin Underhill Posted: Oct 24, 2012 @ 12:11pm

This is great! Thanks!

One question– is there any way to add your own font? I fancy Panic Sans, which is what I use when developing in Coda. I’ve tried declaring it as the font-family on the body tag but it doesn’t change anything.

Sam Posted: Nov 01, 2012 @ 3:15pm

How is it that you inspect the inspector? I tried doing an inspect on the ‘-webkit-web-inspector’ id that was mentioned above but to no avail. What’s the secret?

Sam Posted: Nov 01, 2012 @ 4:39pm

Nevermind…figured it out. I didn’t realize you needed to use remote debugging.

Marco Kotrotsos Posted: Nov 07, 2012 @ 3:17am

What I do, to inspect the inspector is undock it from the window- into a separate window and select the developer tools window. After that open another instance of the inspector (either via the menu item or shortcut key’s)

maxw3st Posted: Nov 14, 2012 @ 12:39pm

Thanks for this, hate white backgrounds-they wreck your eyes.

Richard Posted: Dec 06, 2012 @ 10:21am

How about the console, can i skin it?

Darcy Clarke Posted: Dec 08, 2012 @ 1:27pm

Hey Richard,

You can skin the console just as easily, in fact, some of the skins currently available, do this for you. Here’s a good list of skins that were based off of this original post:

Hope that helps point you in the right direction. Cheers!

Justin Spradlin Posted: Jan 13, 2013 @ 10:43am


Thank you for this article. I did some research and to my knowledge, it doesn’t look the Custom.css is included in Chrome’s Chrome-Sync. See

So, I created a batch file (for Windows) that will help you use DropBox to sync the files between machines. You can get the script at Hopefully this is helpful to others.

Thanks again,


Brandon Posted: Jan 18, 2013 @ 1:28pm

I added a Custom.css file to the location specified for Mac, but I’m not seeing any changes to my dev tools. Is there anything else that I’m missing?

Nick Posted: Jan 23, 2013 @ 8:47pm

I’m sorry if this was already answered, I looked and didn’t see it mentioned. I can’t seem to get to the “~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css” file in OS 10.8.2. Any ideas?

Turner Hayes Posted: Feb 18, 2013 @ 5:36pm

This is great–I’d been hoping such a thing were possible.

Is there any way to execute custom JS on the inspector?

I’d love to be able to, for example, hide or otherwise de-emphasize third-party frames (e.g. jQuery) in a call stack, but short of using jQuery’s ‘:contains’ selector, I don’t know how I’d do that.

Erik Posted: Feb 22, 2013 @ 2:14pm

I’ve added the styles to the Custom.css but my developer tools environment has not changed. It’s still that god awful white. What do i do to get the styles to work in chrome developer tools?

Andrew Posted: Mar 13, 2013 @ 11:33am

@Brandon, @Erik: Did you add `!important` to the end of your rules? After I added that (and saved), the changes took effect immediately for me.

Daniel Newman Posted: Mar 18, 2013 @ 5:14am

Erik, try to get Chrome Canary.

Tim Kelly Posted: Apr 11, 2013 @ 6:41pm

In case anyone is experiencing issues with the selector names in the CSS side panels not responding to your changes, I found this:

TL;DR – Just replace this:
#-webkit-web-inspector .webkit-css-selector,
#-webkit-web-inspector .styles-selector {

With this:
#-webkit-web-inspector .webkit-css-selector,
#-webkit-web-inspector .styles-section .selector-matches,
#-webkit-web-inspector .styles-selector {

Thanks for the post @Darcy, this is excellent! I am also curious how you go about inspecting the inspector. I would be really interested to see a post about that ;-)


Tim Kelly Posted: Apr 11, 2013 @ 7:05pm

So, in messing around a bit I am now face-palming about how to inspect the inspector. If you are curious about how to do this (@Christopher B), follow this steps:

1. Make sure that your inspector isn’t docked to the window
2. Press Command+Option+I (Ctrl+Shift+I on Windows)
3. Press Command+Option+I again. (assuming focus is on the inspector window)

Now you can inspect the un-inspected ;-)

Maurice Cruz Posted: Apr 21, 2013 @ 2:15pm

Hey all,

Just posted a custom skin on:

Would appreciate some feedback/help making it better.

Colin Eberly Posted: Apr 24, 2013 @ 4:48am

I’ve started modding my own version of this and am getting into the actual gui part of it. It’s going ok thus far, but I am running into a few issues when adding styles to selectors with basic names. For example, I added a background rule to #main, and it is applying the background color to ANY website that has a #main div.

Is there any way to specifically target ONLY the Developer Tools window and not external websites when adding rules???

Here is a screenshot of what I am working on:

Thanks for any info.

Colin Eberly Posted: Apr 25, 2013 @ 1:15am

Ok I have figured it out!!! I somehow missed the VERY BEGINNING of this post where it talks about the new -webkit-web-inspector ID being added.

So, the fix to my above post is to add body#-webkit-web-inspector to all of your selectors and it works perfect. Also, to those wanting to create a complete theme, it’s MUCH easier to do it via inspecting the inspector. More info on how to do this is here:

RaphaelDDL Posted: Jun 25, 2013 @ 4:29pm

Seems the version 28.XX of Chrome just bugged the DevTools. `chrome-devtools://devtools/devTools.css` does not work anymore (seems the css is called `inspector.css` now) and most of themes got bggy stuff with that update. Sad.

Mark Anthony Degamo Posted: Jul 05, 2013 @ 11:19pm

I’m in Ubuntu and had Chrome installed…. the exact location is in /.config/google-chrome/Default/User StyleSheets/Custom.css

Lucas Posted: Aug 21, 2013 @ 12:26pm

A couple of updates I just found:

1. On Chromium / Ubuntu (may be the same for others, I don’t know) – If you use multiple Chrome User Profiles you will have to change the Custom.css in each profile you want to have the skin.

Go back to ~/.config/chromium/ and you’ll see “Default” and “Profile 1″ “Profile 2″ “Profile 3″ etc. Each of those will have it’s own /User StyleSheets/Custom.css. Just copy the code to each.

Also – There is new and improved version of the Solarized Dark Theme available here: (not mine)

Vinny Moreira Posted: Aug 28, 2013 @ 1:38am

Wow! thank you so much! I was already tired of looking at the default color scheme. It looks great now.

JP Posted: Sep 23, 2013 @ 12:21am
I’ve done some theming with the New Tabs page, as well as the not found page. I’ve shown the use of base64 to replace the chromium logo and the generic “frowning page” logo on the not found page. Please post on my site if comments are for me!

Cody Posted: Nov 13, 2013 @ 2:00pm

Opened up dev tools today and noticed my custom styles were no longer being applied. Custom.css hasn’t been replaced/overwritten in /User Stylesheets/, so it would appear this latest release has changed a lot (all?) of the selectors I had been keying off of. Note: I’m running 32.0.1700.6 beta.

Justin Sternberg Posted: Nov 25, 2013 @ 1:12pm

Monokai theme to match Sublime Text 2:

chrome why Posted: Mar 25, 2014 @ 5:53pm

I found a really roundabout workaround to get around Google’s stupid effort to astroturf this sort of shit and jam it into the Chrome store, making it needlessly overcomplicated and inflexible.

1. Enable DevTools experiments in about:flags, then open DevTools, open Settings > Experiments, and toggle Allow UI themes experiment.

2. Download a zip Paul Irish’s theme (, because we know it works. Extract somewhere, I used Dropbox so I can use it on multiple machines.

3. Rename manifest.json and overwrite styles.css to taste.

4. In chrome://extensions/ enable Developer mode, and load the extension as an unpacked extension.

All this to change red to blue or whatever, yay.

marc Posted: Nov 30, 2014 @ 1:09am

The user style sheets folder is missing, my version is chrome 39.0.2171.71.

Leave a Reply: