Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
IR_Black Theme for Chrome Developer Tools
/**********************************************/
/*
/* 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;
}
Owner

bentruyman commented Aug 17, 2011

Make your Chrome developer tools look like this:

"Elements"
 "Console"

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.

Owner

bentruyman commented Aug 17, 2011

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.

Owner

bentruyman commented Aug 17, 2011

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

Owner

bentruyman commented Aug 17, 2011

Fixed the color of external/resource links.

Owner

bentruyman commented Aug 17, 2011

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

Owner

bentruyman commented Aug 23, 2011

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

Owner

bentruyman commented Aug 23, 2011

Restored highlighting as suggested by @guitarzan.

davidl commented Aug 24, 2011

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

Cottser commented Sep 27, 2011

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

Owner

bentruyman commented Oct 1, 2011

Thanks @curtisblackwell !

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

ialphan commented Oct 5, 2012

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 */

ialphan commented Oct 10, 2012

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

hiwanz commented Oct 19, 2012

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

Cmaury commented Mar 5, 2013

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

claudey commented Aug 14, 2013

@yawboakye @Elorm would love to see this.

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

hiwanz commented Mar 7, 2014

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment