IR_Black Theme for Chrome Developer Tools

Custom.css

/**********************************************/
/*
/* IR_Black Skin by Ben Truyman - 2011
/*
/* Based on Todd Werth's IR_Black:
/* http://blog.toddwerth.com/entries/2
/*
/* Inspired by Darcy Clarke's blog post:
/* http://darcyclarke.me/design/skin-your-chrome-inspector/
/*
/**********************************************/

/**********************************************/
/* Console
/**********************************************/

  /**********************************************/
  /* Messages
  /**********************************************/
  
  #console-messages {
    font-family: 'DroidSansMono', Menlo, monospace !important;
    background: #242424;
  }
  
  #console-messages a {
    color: #666 !important;
  }
  
  #console-messages a:hover {
    color: #999 !important;
  }
  
  #console-messages .console-message {
    color: #f1f1f1 !important;
  }
  
  #console-messages .console-message, .console-user-command {
    border-bottom: 1px solid #444 !important;
  }
  
  #console-messages .console-user-command > .console-message-text {
    color: #ffd2a7 !important;
  }
  
  #console-messages .console-formatted-number {
    color: #ff73fd !important;
  }
  
  #console-messages .console-formatted-string {
    color: #a8ff60 !important;
  }
  
  #console-messages .console-formatted-object {
    color: #7c7c7c !important;
  }
  
  #console-messages .console-formatted-function {
    color: #fff !important;
  }
  
  #console-messages .console-formatted-regexp {
    color: #e9c062 !important;
  }
  
  #console-messages .console-group-messages .section .header .title {
    color: #f1f1f1 !important;
  }
  
  #console-messages .section .properties .name, .event-properties .name {
    color: #96cbfe !important;
  }
  
  #console-messages .console-group-messages .section .header::before,
  #console-messages .properties-tree li.parent::before {
    content: url(chrome-devtools://devtools/Images/treeRightTriangleWhite.png) !important;
  }
  
  #console-messages .console-group-messages .section.expanded .header::before,
  #console-messages .properties-tree li.parent.expanded::before {
    content: url(chrome-devtools://devtools/Images/treeDownTriangleWhite.png) !important;
  }
  
  @-webkit-keyframes webkit-error-level { 
    0%   { color: #f77; !important }
    50%  { color: #f00; !important }
    100% { color: #f77; !important }
  }
  
  #console-messages .console-error-level .console-message-text {
    color: #f66 !important;
    -webkit-animation-name: webkit-error-level;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-timing-function: ease-in-out;
  }
  
  #console-messages .console-user-command::before {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTMzNzdGNUZDMTA1MTFFMDgwRUZGQ0JCMjgzMzU0MTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTMzNzdGNjBDMTA1MTFFMDgwRUZGQ0JCMjgzMzU0MTYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5MzM3N0Y1REMxMDUxMUUwODBFRkZDQkIyODMzNTQxNiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5MzM3N0Y1RUMxMDUxMUUwODBFRkZDQkIyODMzNTQxNiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pia6udAAAAB5SURBVHjaYvz//z8DMYAFxli9ejWI6oByK5AVhYaGIhRCgQsQGwOxIFTxe5gEE5pCVyA+C8RpQLwbqgmrwvdQxauhis6AbMamEASUkEwCabyHTWE51BQlqBNMoDSKQhckX3dCFd3DCB4g2AP16VkoGwUwEhvgAAEGAAzQHBRSxqPRAAAAAElFTkSuQmCC) !important;
  }
  
  /**********************************************/
  /* Prompt
  /**********************************************/
  
  #console-prompt {
    color: #f1f1f1 !important;
  }
  
  #console-prompt::before {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjRGNTc2MTZDMTA2MTFFMDgwRUZGQ0JCMjgzMzU0MTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjRGNTc2MTdDMTA2MTFFMDgwRUZGQ0JCMjgzMzU0MTYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5MzM3N0Y2MUMxMDUxMUUwODBFRkZDQkIyODMzNTQxNiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5MzM3N0Y2MkMxMDUxMUUwODBFRkZDQkIyODMzNTQxNiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Plf0eOsAAAB4SURBVHjaYvz//z8DMYAFxph+BqyhA8qtQFaUacKIUAgFLkBsDMSCUMXvYRJMaApdgfgsEKcB8W6oJqwK30MVr4YqOgPEodgUgoASkkkgjfewKSyHmqIEdYIJlEZR6ILk606oonsYwQMEe6A+PQtlowBGYgMcIMAAF2wcFPVNZx8AAAAASUVORK5CYII=) !important;
    color: #fff !important;
  }

/**********************************************/
/* Elements/Network
/**********************************************/

  /**********************************************/
  /* Layout
  /**********************************************/
  #storage-views .script-view,
  #network-views .script-view,
  #script-resource-views .script-view {
    color: #ccc !important;
  }
  
  #storage-views .script-view,
  #elements-content,
  #network-views .text-editor-contents,
  #script-resource-views .script-view {
    background: #242424 !important;
    font-size: 12px !important;
  }
  
  #elements-content .highlight { 
    color: #f1f1f1;
  }
  
  #elements-content li.hovered:not(.selected) .selection {
    background: rgba(255, 255, 255, .2) !important;
  }

  #elements-content .selection.selected {
    z-index: 0 !important;
  }

  #elements-content ol:focus li.selected .selection {
    background: #3F4360 !important;
  }

  #elements-content .selected .highlight {
    position: relative;
    z-index: 2;
  }
  
  #elements-content .selected {
    background-color: #4c4d5d !important;
  }
  
  #elements-content .editing {
    background-color: #242424 !important;
  }
  
  #elements-content .parent::before {
    content: url(chrome-devtools://devtools/Images/treeRightTriangleWhite.png) !important;
    position: relative;
    z-index: 999;
  }
  
  #elements-content .parent.expanded::before {
    content: url(chrome-devtools://devtools/Images/treeDownTriangleWhite.png) !important;
  }
  
  /**********************************************/
  /* HTML
  /**********************************************/
  #storage-views .webkit-html-comment,
  #elements-content .webkit-html-comment,
  #network-views .webkit-html-comment,
  #script-resource-views .webkit-html-comment {
    color: #7c7c7c !important;
  }
  
  #storage-views .webkit-html-tag,
  #elements-content .webkit-html-tag,
  #network-views .webkit-html-tag,
  #script-resource-views .webkit-html-tag {
    color: #96cbfe !important;
  }
  
  #storage-views .webkit-html-attribute-name,
  #elements-content .webkit-html-attribute-name,
  #network-views .webkit-html-attribute-name,
  #script-resource-views .webkit-html-attribute-name {
    color: #ffd2a7 !important;
  }
  
  #storage-views .webkit-html-attribute-value,
  #elements-content .webkit-html-attribute-value,
  #network-views .webkit-html-attribute-value,
  #script-resource-views .webkit-html-attribute-value {
    color: #a8ff60 !important;
  }
  
  #storage-views .webkit-html-text-node,
  #elements-content .webkit-html-text-node,
  #network-views .webkit-html-text-node,
  #script-resource-views .webkit-html-text-node
  #storage-views .webkit-html-css-node,
  #elements-content .webkit-html-css-node,
  #network-views .webkit-html-css-node,
  #script-resource-views .webkit-html-css-node {
    color: #c2c3c3 !important;
  }
  
  #storage-views .webkit-html-js-node,
  #elements-content .webkit-html-js-node,
  #network-views .webkit-html-js-node,
  #script-resource-views .webkit-html-js-node {
    color: #c2c3c3 !important;
  }
  
  #storage-views .webkit-html-resource-link,
  #elements-content .webkit-html-resource-link,
  #network-views .webkit-html-resource-link,
  #script-resource-views .webkit-html-resource-link,
  #storage-views .webkit-html-external-link,
  #elements-content .webkit-html-external-link,
  #network-views .webkit-html-external-link,
  #script-resource-views .webkit-html-external-link {
    color: #ff73fd !important;
  }
  
  /**********************************************/
  /* CSS
  /**********************************************/
  
  #storage-views .webkit-css-comment,
  #elements-content .webkit-css-comment,
  #network-views .webkit-css-comment,
  #script-resource-views .webkit-css-comment {
    color: #7c7c7c !important;
  }
  
  #storage-views .webkit-css-selector,
  #elements-content .webkit-css-selector,
  #network-views .webkit-css-selector,
  #script-resource-views .webkit-css-selector {
    color: #62b1fe !important;
  }
  
  #storage-views .webkit-css-property,
  #elements-content .webkit-css-property,
  #network-views .webkit-css-property,
  #script-resource-views .webkit-css-property {
    color: #fff !important;
  }
  
  #storage-views .webkit-css-keyword,
  #elements-content .webkit-css-keyword,
  #network-views .webkit-css-keyword,
  #script-resource-views .webkit-css-keyword {
    color: #f9ee98 !important;
  }
  
  #storage-views .webkit-css-number,
  #elements-content .webkit-css-number,
  #network-views .webkit-css-number,
  #script-resource-views .webkit-css-number {
    color: #ff73fd !important;
  }
  
  #storage-views .webkit-css-important,
  #elements-content .webkit-css-important,
  #network-views .webkit-css-important,
  #script-resource-views .webkit-css-important
  #storage-views .webkit-css-at-rule,
  #elements-content .webkit-css-at-rule,
  #network-views .webkit-css-at-rule,
  #script-resource-views .webkit-css-at-rule {
    color: #96cbfe !important;
  }
  
  #storage-views .webkit-css-string,
  #elements-content .webkit-css-string,
  #network-views .webkit-css-string,
  #script-resource-views .webkit-css-string {
    color: #a8ff60 !important;
  }
  
  #storage-views .webkit-css-url,
  #elements-content .webkit-css-url,
  #network-views .webkit-css-url,
  #script-resource-views .webkit-css-url {
    color: #c6c5fe !important;
  }
  
  /**********************************************/
  /* JavaScript
  /**********************************************/
  
  #storage-views .webkit-line-content,
  #elements-content .webkit-line-content,
  #network-views .webkit-line-content,
  #script-resource-views .webkit-line-content,
  #storage-views .webkit-javascript-ident,
  #elements-content .webkit-javascript-ident,
  #network-views .webkit-javascript-ident,
  #script-resource-views .webkit-javascript-ident {
    color: #fff !important;
  }
  
  #storage-views .webkit-javascript-keyword,
  #elements-content .webkit-javascript-keyword,
  #network-views .webkit-javascript-keyword,
  #script-resource-views .webkit-javascript-keyword {
    color: #cfcb90 !important;
  }
  
  #storage-views .webkit-javascript-comment,
  #elements-content .webkit-javascript-comment,
  #network-views .webkit-javascript-comment,
  #script-resource-views .webkit-javascript-comment {
    color: #7c7c7c !important;
  }
  
  #storage-views .webkit-javascript-string,
  #elements-content .webkit-javascript-string,
  #network-views .webkit-javascript-string,
  #script-resource-views .webkit-javascript-string {
    color: #a8ff60 !important;
  }
  
  #storage-views .webkit-javascript-number,
  #elements-content .webkit-javascript-number,
  #network-views .webkit-javascript-number,
  #script-resource-views .webkit-javascript-number {
    color: #ff73fd !important;
  }
  
  #storage-views .webkit-javascript-regexp,
  #elements-content .webkit-javascript-regexp,
  #network-views .webkit-javascript-regexp,
  #script-resource-views .webkit-javascript-regexp {
    color: #e9c062 !important;
  }

Make your Chrome developer tools look like this:

As noted in Darcy Clarke's blog post, here's how to install this user stylesheet:

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

PC: C:\Users\YourUsername\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css ~Thanks to @vsc

Ubuntu (Chromium): ~/.config/chromium/Default/User\ StyleSheets/Custom.css ~Thanks to @carlos

You are a god.

Updated to use proper highlighting in "Scripts" tab, also some other minor fixes. New prompt arrow icons as well that look slightly better on a darker background.

Updated again because HTML and CSS can show in the "Scripts" tab.

Fixed the color of external/resource links.

Added pulsating effect on error messages in the console. Tell me if this is too obnoxious.

This looks awesome. Great work ben!

The pulsating error messages are awesome! Good work all around.

Please see here for code to restore full-width highlighting and hover highlighting in the element inspector:
https://gist.github.com/1151942

@guitarzan Glad you like it! And thanks for the heads up on the highlighting. <3

Restored highlighting as suggested by @guitarzan.

I started poking around the sidebar styles, using colors from your Tomorrow Theme:

https://gist.github.com/1168185

(The additions are at the end.)

made arrows display on selected elements (lines 167-168).

https://gist.github.com/1199703

Another version, based off of @davidl's sidebar theme but using colours from IR_Black and added a comprehensive selector to change font family, font size, and background color on all platforms (hopefully). Uses 13px Panic Sans by default.

https://gist.github.com/1245727

Edit: Also added view-source highlighting based on @mreinhardt's work here: https://gist.github.com/1207219

Thanks @curtisblackwell !

Made a fork that adds syntax highlighting for DOM snippets in console message output. https://gist.github.com/3838467

Thanks.
TextMate's Twilight version would be nice too.

Fail to import this file from the default Custom.css file.

@import url("Custom_devtools.css") /* does't work */

TextMate's Twilight theme styled for Elements tab: https://gist.github.com/3862950

#console-messages a:hover {
color: #B92722 !important;
}

#console-messages .console-message {
color: #9981BC !important;
}

#console-messages .console-message:hover{
background-color: #000 !important;;
}

i've change a little code to solve some color problem

Beautiful theme, but wish there was a version which also themed JS files in the sources pane.

Made a fork that prevents your cursor from disappearing when you're editing HTML:

#elements-content .editing,
#elements-content .editing *,
#elements-content .child-editing {
background-color: white !important;
color: black !important;
display: block;
}

Amazing. Much easier on my eyes. Is there anyway to change the font color for text input in the console? It's still black, and I can't seem to find the right class to modify.

Thanks for posting this.

@Cmaury #console-view { color: white;} at bottom of other declarations. don't forget to comment your code for change :)

@sideshowbarker Had the same problem! Slightly changed your styles though as display: block was throwing the format off in edit mode, e.g. editing the class of an HTML element looked like this:

class
=
"
large-3 columns
"

So I changed it to inline-block:

#elements-content .editing,
#elements-content .editing *,
#elements-content .child-editing {
  background-color: white !important;
  color: black !important;
  display: inline-block;
}

@bentruyman @JangoSteve @sideshowbarker

Awesome work ... I'm not so keen on the brash 'white' background editing color ... I think it's a bit ...sledge-hammer ... here's my 2¢

    #elements-content .editing
  , #elements-content .editing *
  , #elements-content .child-editing  {
        background-color: #171717  !important;
        font-weight: bold;
        color: white !important;
        display: inline-block;
  };

@yawboakye @Elorm would love to see this.

@bentruyman Thanks a lot! I am loving it...

seems not working in Chrome 33.0.1750.146 m?

+1 on not working. Did google remove support for this I wonder?
Version 33.0.1750.152

It seems support was dropped for this: https://code.google.com/p/chromium/issues/detail?id=318566

However devtools theme support seems to be a work in progress in the form of an extension. I was able to get it to work by doing the following:

1. Enable Developer Tools Experiments. Navigate to chrome://flags, search for #enable-devtools-experiments and click the enable link. Now restart Chrome.
2. In devtools click the settings gear, then Experiments in the left pane, then "Allow custom UI themes" in the right pane.
3. Create an extension. I did that with https://github.com/zenorocha/generator-devtools-theme. It will generate the base files you need. Then add the gist above to style.css and save it.
4. Click on the Tools -> Extensions menu within chrome and check the developer mode checkbox. Then click the "Load unpacked extension" button and navigate to the extension you made in step 2.

Its a whole lot more work and very kludgy but at this point it should work. At least it did for me: http://take.ms/4ZJOf