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