Created
August 17, 2011 00:30
-
-
Save bentruyman/1150520 to your computer and use it in GitHub Desktop.
IR_Black Theme for Chrome Developer Tools
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/**********************************************/ | |
/* | |
/* 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; | |
} |
+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:
- Enable Developer Tools Experiments. Navigate to chrome://flags, search for #enable-devtools-experiments and click the enable link. Now restart Chrome.
- In devtools click the settings gear, then Experiments in the left pane, then "Allow custom UI themes" in the right pane.
- 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.
- 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
seems not working in Chrome 33.0.1750.146 m?