Tomorrow Theme for Chrome Developer Tools

Custom.css

/**********************************************/
/*
/* Tomorrow Skin by Ben Truyman - 2011
/*
/* Based on Chris Kempson's Tomorrow Theme:
/* https://github.com/ChrisKempson/Tomorrow-Theme
/*
/* Inspired by Darcy Clarke's blog post:
/* http://darcyclarke.me/design/skin-your-chrome-inspector/
/*
/**********************************************/

/**********************************************/
/* Toolbar
/**********************************************/

#-webkit-web-inspector.compact #toolbar {
  background-image: -webkit-linear-gradient(#555, #333) !important;
  border-bottom: 1px solid #444 !important;
  border-top: 5px solid #C96666 !important;
  padding-top: 5px !important;
  height: 50px !important;
}

#-webkit-web-inspector.compact #toolbar .toolbar-item {
/*  height: 32px !important;*/
}

#-webkit-web-inspector.compact #toolbar .toolbar-label {
  color: #aaa !important;
}

#-webkit-web-inspector.compact #toolbar .toggled-on .toolbar-label {
  color: #eee !important;
}

#-webkit-web-inspector.compact #toolbar .toolbar-item.toggleable.toggled-on {
  background-image: -webkit-linear-gradient(#333, #555) !important;
}

#-webkit-web-inspector.compact #toolbar-controls {
  margin-top: -5px !important;
}

#-webkit-web-inspector.compact #main {
  top: 50px !important;
}

#-webkit-web-inspector.compact #search-results-matches {
  color: #eee !important;
  text-shadow: none !important;
}

#-webkit-web-inspector.compact #search {
  background: #333 !important;
}

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

  /**********************************************/
  /* Messages
  /**********************************************/
  
  #-webkit-web-inspector #console-messages {
    font-family: 'DroidSansMono', Menlo, monospace !important;
    background: #1C1E21;
  }
  
  #-webkit-web-inspector #console-messages a {
    color: #666 !important;
  }
  
  #-webkit-web-inspector #console-messages a:hover {
    color: #999 !important;
  }
  
  #-webkit-web-inspector .console-message {
    color: #F1F1F1 !important;
  }
  
  #-webkit-web-inspector .console-message, .console-user-command {
    border-bottom: 1px solid #444 !important;
  }
  
  #-webkit-web-inspector .console-user-command > .console-message-text {
    color: #C4C7C6 !important;
  }
  
  #-webkit-web-inspector .console-formatted-number {
    color: #EEC574 !important;
  }
  
  #-webkit-web-inspector .console-formatted-string {
    color: #B5BC67 !important;
  }
  
  #-webkit-web-inspector .console-formatted-object {
    color: #7C7C7C !important;
  }
  
  #-webkit-web-inspector .console-formatted-function {
    color: #FFF !important;
  }
  
  #-webkit-web-inspector .console-formatted-regexp {
    color: #C96666 !important;
  }
  
  #-webkit-web-inspector .console-group-messages .section .header .title {
    color: #F1F1F1 !important;
  }
  
  #-webkit-web-inspector .console-group-messages .section .header::before,
  #-webkit-web-inspector .properties-tree li.parent::before {
    content: url(chrome-devtools://devtools/Images/treeRightTriangleWhite.png) !important;
  }
  
  #-webkit-web-inspector .console-group-messages .section.expanded .header::before,
  #-webkit-web-inspector .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: #f22; !important }
    100% { color: #f77; !important }
  }
  
  #-webkit-web-inspector .console-error-level .console-message-text .title {
    color: #f66 !important;
    -webkit-animation-name: webkit-error-level;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-timing-function: ease-in-out;
  }
  
  #-webkit-web-inspector .console-user-command::before {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTMzNzdGNUZDMTA1MTFFMDgwRUZGQ0JCMjgzMzU0MTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTMzNzdGNjBDMTA1MTFFMDgwRUZGQ0JCMjgzMzU0MTYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5MzM3N0Y1REMxMDUxMUUwODBFRkZDQkIyODMzNTQxNiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5MzM3N0Y1RUMxMDUxMUUwODBFRkZDQkIyODMzNTQxNiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pia6udAAAAB5SURBVHjaYvz//z8DMYAFxli9ejWI6oByK5AVhYaGIhRCgQsQGwOxIFTxe5gEE5pCVyA+C8RpQLwbqgmrwvdQxauhis6AbMamEASUkEwCabyHTWE51BQlqBNMoDSKQhckX3dCFd3DCB4g2AP16VkoGwUwEhvgAAEGAAzQHBRSxqPRAAAAAElFTkSuQmCC) !important;
  }
  
  /**********************************************/
  /* Prompt
  /**********************************************/
  
  #-webkit-web-inspector #console-prompt {
    color: #F1F1F1 !important;
  }
  
  #-webkit-web-inspector #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/Scripts
/**********************************************/

  /**********************************************/
  /* Layout
  /**********************************************/
  
  #-webkit-web-inspector .script-view,
  #-webkit-web-inspector .properties-tree,
  #-webkit-web-inspector .pane,
  #-webkit-web-inspector .breakpoint-list li,
  #-webkit-web-inspector .pane > .body .info {
    color: #CCC !important;
  }
  
  #-webkit-web-inspector .script-view,
  #-webkit-web-inspector .text-editor-contents,
  #-webkit-web-inspector .pane.expanded,
  #-webkit-web-inspector #elements-content,
  #-webkit-web-inspector .resource-view.json {
    background: #1C1E21 !important;
    font-size: 12px !important;
  }
  
  #-webkit-web-inspector .highlight {
    color: #F1F1F1;
  }
  
  #-webkit-web-inspector li.hovered:not(.selected) .selection {
    background: rgba(255, 255, 255, .2) !important;
  }
  
  #-webkit-web-inspector #elements-content .selected {
    background-color: #373B41 !important;
  }
  
  #-webkit-web-inspector .parent::before {
    content: url(chrome-devtools://devtools/Images/treeRightTriangleWhite.png) !important;
    position: relative;
    z-index: 999;
  }
  
  #-webkit-web-inspector .parent.expanded::before {
    content: url(chrome-devtools://devtools/Images/treeDownTriangleWhite.png) !important;
  }
  
  /**********************************************/
  /* HTML
  /**********************************************/
  
  #-webkit-web-inspector .webkit-html-comment {
    color: #7C7C7C !important;
  }
  
  #-webkit-web-inspector .webkit-html-tag {
    color: #C96666 !important;
  }
  
  #-webkit-web-inspector .webkit-html-attribute-name {
    color: #C96666 !important;
  }
  
  #-webkit-web-inspector .webkit-html-attribute-value {
    color: #B5BC67 !important;
  }
  
  #-webkit-web-inspector .webkit-html-text-node
  #-webkit-web-inspector .webkit-html-css-node {
    color: #C2C3C3 !important;
  }
  
  #-webkit-web-inspector .webkit-html-js-node {
    color: #C2C3C3 !important;
  }
  
  #-webkit-web-inspector .webkit-html-resource-link,
  #-webkit-web-inspector .webkit-html-external-link {
    color: #EEC574 !important;
  }
  
  /**********************************************/
  /* CSS
  /**********************************************/
  
  #-webkit-web-inspector .webkit-css-comment {
    color: #7C7C7C !important;
  }
  
  #-webkit-web-inspector .webkit-css-selector,
  #-webkit-web-inspector .styles-selector {
    color: #C96666 !important;
  }
  
  #-webkit-web-inspector .webkit-css-property {
    color: #EEC574 !important;
  }
  
  #-webkit-web-inspector .webkit-css-keyword {
    color: #DB925F !important;
  }
  
  #-webkit-web-inspector .webkit-css-number,
  #-webkit-web-inspector .properties-tree .value {
    color: #DB925F !important;
  }
  
  #-webkit-web-inspector .webkit-css-important,
  #-webkit-web-inspector .webkit-css-at-rule {
    color: #B094BB !important;
  }
  
  #-webkit-web-inspector .webkit-css-string {
    color: #B5BC67 !important;
  }
  
  #-webkit-web-inspector .webkit-css-url {
    color: #EEC574 !important;
  }
  
  /**********************************************/
  /* JavaScript
  /**********************************************/
  
  #-webkit-web-inspector .webkit-line-content,
  #-webkit-web-inspector .webkit-javascript-ident {
    color: #FFF !important;
  }
  
  #-webkit-web-inspector .webkit-javascript-keyword {
    color: #DB925F !important;
  }
  
  #-webkit-web-inspector .webkit-javascript-comment {
    color: #7C7C7C !important;
  }
  
  #-webkit-web-inspector .webkit-javascript-string {
    color: #B5BC67 !important;
  }
  
  #-webkit-web-inspector .webkit-javascript-number {
    color: #DB925F !important;
  }
  
  #-webkit-web-inspector .webkit-javascript-regexp {
    color: #C96666 !important;
  }
  
  #-webkit-web-inspector .section .properties .name,
  #-webkit-web-inspector .event-properties .name {
    color: #82A1BE !important;
  }
  
  /**********************************************/
  /* Everything Else
  /**********************************************/
  
  #-webkit-web-inspector .editing {
    color: #fff !important;
    background-color: #000 !important;
  }
  
  #-webkit-web-inspector .styles-section.read-only {
    background: #373B41 !important;
  }
  
  #-webkit-web-inspector .styles-section,
  #-webkit-web-inspector .subtitle {
    color: #7C7C7C !important;
  }
  
  #-webkit-web-inspector .styles-sidebar-separator,
  #-webkit-web-inspector .pane > .title {
    background-image: -webkit-linear-gradient(#555, #333) !important;
    border-top-color: #666 !important;
    border-bottom-color: #333 !important;
    color: #bbb !important;
    text-shadow: black 0 1px 0 !important;
    text-overflow: ellipsis !important;
  }
  
  #-webkit-web-inspector .pane > .title > button,
  #-webkit-web-inspector .pane > .title > select {
    -webkit-filter: invert(1);
  }
  
  #-webkit-web-inspector .split-view-sidebar-right {
    background: #222 !important;
  }
  
  #-webkit-web-inspector .styles-section .properties li.parent::before,
  #-webkit-web-inspector .section > .header::before,
  #-webkit-web-inspector .properties-tree li.parent::before,
  #-webkit-web-inspector .event-bars .event-bar .header::before,
  #-webkit-web-inspector .outline-disclosure li.parent::before {
    content: url(chrome-devtools://devtools/Images/treeRightTriangleWhite.png) !important;
  }
  
  #-webkit-web-inspector .styles-section .properties li.parent.expanded::before,
  #-webkit-web-inspector .section.expanded > .header::before,
  #-webkit-web-inspector .properties-tree li.parent.expanded::before,
  #-webkit-web-inspector .event-bars .event-bar.expanded .header::before,
  #-webkit-web-inspector .outline-disclosure li.parent.expanded::before {
    content: url(chrome-devtools://devtools/Images/treeDownTriangleWhite.png) !important;
  }
  
  #-webkit-web-inspector .child-editing {
    color: #fff !important;
  }
  
  #-webkit-web-inspector .section .properties .name,
  #-webkit-web-inspector .event-properties .name {
    color: #82A1BE !important;
  }
  
  #-webkit-web-inspector .styles-selector {
    color: #C96666 !important;
  }
  
  #-webkit-web-inspector .section .header {
    color: #CCC !important;
  }
  
  #-webkit-web-inspector .properties .value {
    color: #C2C3C3 !important;
  }
  
  #-webkit-web-inspector .metrics {
    color: #333 !important;
  }
  
  #-webkit-web-inspector .metrics .border {
    border-color: #FFF !important;
  }
  
  #-webkit-web-inspector .event-bars .event-bar .header .title {
    color: #969796 !important;
    text-shadow: none !important;
  }
  
  #-webkit-web-inspector .console-formatted-number {
    color: #EEC574 !important;
  }
  
  #-webkit-web-inspector .console-formatted-string {
    color: #B5BC67 !important;
  }
  
  #-webkit-web-inspector .console-formatted-object,
  #-webkit-web-inspector .console-formatted-node,
  #-webkit-web-inspector .console-formatted-array {
    color: #7C7C7C !important;
  }
  
  #-webkit-web-inspector .console-formatted-function {
    color: #FFF !important;
  }
  
  #-webkit-web-inspector .console-formatted-regexp {
    color: #C96666 !important;
  }
  
  #-webkit-web-inspector .styles-element-state-pane {
    background: #373B41 !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: ~/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

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: ~/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

Restored highlighting as suggested by @guitarzan.

Restored highlighting as suggested by @guitarzan.

Fixed missing background for JSON resource views.

Fixed missing background for JSON resource views.

Fixes search result next to search box and css property after tabbing and also css panel icons
#search-results-matches{color:#eee;}
.child-editing span.webkit-css-property{color:black !important;}
.pane > .title > button, .pane > .title > select{-webkit-filter: invert(1);}

Fixes search result next to search box and css property after tabbing and also css panel icons
#search-results-matches{color:#eee;}
.child-editing span.webkit-css-property{color:black !important;}
.pane > .title > button, .pane > .title > select{-webkit-filter: invert(1);}

Thanks @mohsen1. I added a couple of your changes. But I think this might only work with Chrome Dev.

The line I didn't use was: .pane > .title > button, .pane > .title > select{-webkit-filter: invert(1);} That seemed to make the icons in the right panel unreadable on the grey background.

Thanks @mohsen1. I added a couple of your changes. But I think this might only work with Chrome Dev.

The line I didn't use was: .pane > .title > button, .pane > .title > select{-webkit-filter: invert(1);} That seemed to make the icons in the right panel unreadable on the grey background.

@bentruyman I think this is a good change in the right panel. This is before and after I applied this rule. What's wrong with it?
(left is after)

@bentruyman I think this is a good change in the right panel. This is before and after I applied this rule. What's wrong with it?
(left is after)

Ah, I see now. Are you on Chrome Dev channel? I think they may have updated some of the class names as my panels didn't have the dark gradient like yours did, so those buttons looked fine for me. I've updated it now, including your filter fix. Thank you!

Ah, I see now. Are you on Chrome Dev channel? I think they may have updated some of the class names as my panels didn't have the dark gradient like yours did, so those buttons looked fine for me. I've updated it now, including your filter fix. Thank you!

Fixed some minor buggers with the pseudo selector pane and arrays in the console.

Fixed some minor buggers with the pseudo selector pane and arrays in the console.

LESS version: https://gist.github.com/3040634

LESS version: https://gist.github.com/3040634

There's something strange going on with the CSS inspector (in both Chrome and Canary). There seems to be an arrow and unusual indenting. Any suggestions how I can fix this?

There's something strange going on with the CSS inspector (in both Chrome and Canary). There seems to be an arrow and unusual indenting. Any suggestions how I can fix this?

Does this still work in Chrome 35+? I'm not finding the file suggested on a Win8.1 machine.

Does this still work in Chrome 35+? I'm not finding the file suggested on a Win8.1 machine.

No, the devtools changed; see https://github.com/gbraad/chrome-devtools-tomorrow-night-bright-theme for an easy to install extension

No, the devtools changed; see https://github.com/gbraad/chrome-devtools-tomorrow-night-bright-theme for an easy to install extension