Skip to content

Instantly share code, notes, and snippets.

@bentruyman
Created August 17, 2011 00:30
Show Gist options
  • Save bentruyman/1150520 to your computer and use it in GitHub Desktop.
Save bentruyman/1150520 to your computer and use it in GitHub Desktop.
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;
}
@bentruyman
Copy link
Author

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

@tbranyen
Copy link

You are a god.

@bentruyman
Copy link
Author

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.

@bentruyman
Copy link
Author

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

@bentruyman
Copy link
Author

Fixed the color of external/resource links.

@bentruyman
Copy link
Author

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

@darcyclarke
Copy link

This looks awesome. Great work ben!

@dougwaldron
Copy link

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

@bentruyman
Copy link
Author

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

@bentruyman
Copy link
Author

Restored highlighting as suggested by @guitarzan.

@davidl
Copy link

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.)

@curtisblackwell
Copy link

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

https://gist.github.com/1199703

@star-szr
Copy link

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

@bentruyman
Copy link
Author

Thanks @curtisblackwell !

@sideshowbarker
Copy link

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

@ialphan
Copy link

ialphan commented Oct 5, 2012

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

@UncleBill
Copy link

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

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

@ialphan
Copy link

ialphan commented Oct 10, 2012

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

@hiwanz
Copy link

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

@bspingarn
Copy link

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

@sideshowbarker
Copy link

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
Copy link

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.

@HumanBlade
Copy link

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

@JangoSteve
Copy link

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

@edwardbeckett
Copy link

@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
Copy link

claudey commented Aug 14, 2013

@yawboakye @Elorm would love to see this.

@vijaymurukesan
Copy link

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

@hiwanz
Copy link

hiwanz commented Mar 7, 2014

seems not working in Chrome 33.0.1750.146 m?

@rickyn-gannett
Copy link

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

@rickyn-gannett
Copy link

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