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;
  }

#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