IR_Black Theme (with sidebar and view-source colors) 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/
/*
/**********************************************/

/**********************************************/
/* Basic font and color settings
/**********************************************/

  body.platform-mac .monospace, body.platform-mac .source-code,
  body.platform-mac.platform-mac-snowleopard .monospace,
  body.platform-mac.platform-mac-snowleopard .source-code,
  body.platform-windows .monospace, body.platform-windows .source-code ,
  body.platform-linux .monospace, body.platform-linux .source-code,
  .webkit-line-number,
  .webkit-line-content,
  #elements-sidebar .editing,
  #elements-content .editing,
  #elements-sidebar .child-editing,
  #elements-sidebar .pane > .body .info {
    font-family: "Panic Sans", "DroidSansMono", Menlo, Consolas, Lucida Console, dejavu sans mono, monospace !important;  
    font-size: 13px !important;
    background: #242424 !important;
    color: #f1f1f1 !important;
  }
  
  .webkit-line-number { 
    color: #818181 !important;
  }
  
  .pane > .body .info,
  #elements-sidebar .pane > .body .info {
    font-size: 10px !important;
  }

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

  /**********************************************/
  /* Messages
  /**********************************************/
 
  #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;
  }
  
  #console-messages .outline-disclosure li.parent::before {
    content: url(chrome-devtools://devtools/Images/treeRightTriangleWhite.png) !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;
  }

/**********************************************/
/* View Source
/**********************************************/

  .webkit-line-number {
    background-color: #f0f0f0 !important;
  }

  .webkit-line-content {
    color: #fff !important;
  }

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

  /**********************************************/
  /* Layout
  /**********************************************/
  #storage-views .script-view,
  #network-views .script-view,
  #script-resource-views .script-view {
    color: #ccc !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 .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
  /**********************************************/
  .webkit-html-comment {
    color: #7c7c7c !important;
  }
  
  .webkit-html-tag {
    color: #96cbfe !important;
  }
  
  .webkit-html-attribute-name {
    color: #ffd2a7 !important;
  }
  
  .webkit-html-attribute-value {
    color: #a8ff60 !important;
  }
  
  .webkit-html-css-node {
    color: #c2c3c3 !important;
  }
  
  .webkit-html-js-node {
    color: #c2c3c3 !important;
  }
  
  .webkit-html-external-link {
    color: #ff73fd !important;
  }
  
  /**********************************************/
  /* CSS
  /**********************************************/
  
  .webkit-css-comment {
    color: #7c7c7c !important;
  }
  
  .webkit-css-selector {
    color: #62b1fe !important;
  }
  
  .webkit-css-property {
    color: #fff !important;
  }
  
  .webkit-css-keyword {
    color: #f9ee98 !important;
  }
  
  .webkit-css-number {
    color: #ff73fd !important;
  }
  
  .webkit-css-at-rule {
    color: #96cbfe !important;
  }
  
  .webkit-css-string {
    color: #a8ff60 !important;
  }
  
  .webkit-css-url {
    color: #c6c5fe !important;
  }
  
  /**********************************************/
  /* JavaScript
  /**********************************************/
  
  .webkit-javascript-ident {
    color: #fff !important;
  }
  
  .webkit-javascript-keyword {
    color: #cfcb90 !important;
  }
  
  .webkit-javascript-comment {
    color: #7c7c7c !important;
  }
  
  .webkit-javascript-string {
    color: #a8ff60 !important;
  }
  
  .webkit-javascript-number {
    color: #ff73fd !important;
  }
  
  .webkit-javascript-regexp {
    color: #e9c062 !important;
  }


/**********************************************/
/* Sidebar
/**********************************************/
  #elements-sidebar {
    background: #242424 !important;
  }
  
  #elements-sidebar .styles-section.read-only,
  #elements-sidebar .styles-section.read-only .monospace {
    background: #3f4360 !important;
  }
  
  #elements-sidebar .subtitle {
    color: #aaa !important;
  }
  
  #elements-sidebar .styles-section .header .title span:first-child,
  #elements-sidebar .styles-selector span:first-child {
    color: #62b1fe !important;
  }
  
  #elements-sidebar .webkit-css-property {
    color: #f1f1f1 !important;
  }
  
  #elements-sidebar .properties .value {
    color: #f9ee98 !important;
  }
  
  #elements-sidebar .webkit-html-external-link,
  #elements-sidebar .webkit-html-resource-link {
    color: #ff73fd !important;
  }
  
  #elements-sidebar .styles-section .properties li.parent::before {
    content: url(chrome-devtools://devtools/Images/treeRightTriangleWhite.png) !important;
  }
  
  #elements-sidebar .styles-section .properties li::before {
    opacity: 1 !important;
  }

Now themes view-source as well, based on @mreinhardt's work here: https://gist.github.com/1207219

This is awesome.

was hoping someone would do the sidebar. awesome that you also did view source. can get rid of my extension for view source now.

Tiny fix added for the "read only" sections in the sidebar - line 294. Happy to see it's being used!

Fixed text color while editing HTML and in the sidebar, consolidated and separated the text settings into their own section, and added the default fonts for Windows and Linux into the font stack. Not 100% sure on the order but I figure people will change that part anyway.

Added color for line numbers in view source that was accidentally lost in the last update.

added a few lines to put CSS property checkboxes on the left:

#elements-sidebar .enabled-button {
    left: 4px;
    position: absolute !important;
    margin-top: 2px !important;
  }

https://gist.github.com/1199703

@curtisblackwell - I like that. I also made the checkboxes always visible.

I didn't realize I was missing disclosure triangles in the sidebar (they were just about black-on-black). I've reverted the last change and made the disclosure triangles (and the text inside DOM Breakpoints and Event Listeners) visible in the sidebar now, as well as a bunch of other small tweaks to the sidebar. Next up may be updating the "Metrics" display :)

Put the checkboxes back on the left, indented the properties a bit.

Lines 307-311

#elements-sidebar .enabled-button {
    left: 4px;
    position: absolute !important;
    margin-top: 2px !important;
}

Lines 340-342

#elements-sidebar .styles-section .properties li {
    text-indent: 10px;
}

https://gist.github.com/1199703

There is a bug in the view source display, where some end tags (so far I've noticed </title> and </script>) are not properly wrapped in span tags, and are therefore shown in the default text colour. You can see this in the view source screenshot. Chrome bug I do believe.

From the view-source source:

&lt;/title&gt;<span class="webkit-html-tag"></span>

I added some style rules for the XML view-source page by adding two selectors to the "Basic font and color settings" section and rules to the "View Source" section:

https://gist.github.com/1847890

Sidebar font showing up all white...

Sorry, where is the file that I should edit?