Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
IR_Black Theme (with sidebar and view-source colors) 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/
/*
/**********************************************/
/**********************************************/
/* Basic font and color settings
/**********************************************/
body.platform-mac .monospace, body.platform-mac .source-code,
body.platform-mac.platform-mac-snowleopard .monospace,
body.platform-mac.platform-mac-snowleopard .source-code,
body.platform-windows .monospace, body.platform-windows .source-code ,
body.platform-linux .monospace, body.platform-linux .source-code,
.webkit-line-number,
.webkit-line-content,
#elements-sidebar .editing,
#elements-content .editing,
#elements-sidebar .child-editing,
#elements-sidebar .pane > .body .info {
font-family: "Panic Sans", "DroidSansMono", Menlo, Consolas, Lucida Console, dejavu sans mono, monospace !important;
font-size: 13px !important;
background: #242424 !important;
color: #f1f1f1 !important;
}
.webkit-line-number {
color: #818181 !important;
}
.pane > .body .info,
#elements-sidebar .pane > .body .info {
font-size: 10px !important;
}
/**********************************************/
/* Console
/**********************************************/
/**********************************************/
/* Messages
/**********************************************/
#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;
}
#console-messages .outline-disclosure li.parent::before {
content: url(chrome-devtools://devtools/Images/treeRightTriangleWhite.png) !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;
}
/**********************************************/
/* View Source
/**********************************************/
.webkit-line-number {
background-color: #f0f0f0 !important;
}
.webkit-line-content {
color: #fff !important;
}
/**********************************************/
/* Elements/Network
/**********************************************/
/**********************************************/
/* Layout
/**********************************************/
#storage-views .script-view,
#network-views .script-view,
#script-resource-views .script-view {
color: #ccc !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 .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
/**********************************************/
.webkit-html-comment {
color: #7c7c7c !important;
}
.webkit-html-tag {
color: #96cbfe !important;
}
.webkit-html-attribute-name {
color: #ffd2a7 !important;
}
.webkit-html-attribute-value {
color: #a8ff60 !important;
}
.webkit-html-css-node {
color: #c2c3c3 !important;
}
.webkit-html-js-node {
color: #c2c3c3 !important;
}
.webkit-html-external-link {
color: #ff73fd !important;
}
/**********************************************/
/* CSS
/**********************************************/
.webkit-css-comment {
color: #7c7c7c !important;
}
.webkit-css-selector {
color: #62b1fe !important;
}
.webkit-css-property {
color: #fff !important;
}
.webkit-css-keyword {
color: #f9ee98 !important;
}
.webkit-css-number {
color: #ff73fd !important;
}
.webkit-css-at-rule {
color: #96cbfe !important;
}
.webkit-css-string {
color: #a8ff60 !important;
}
.webkit-css-url {
color: #c6c5fe !important;
}
/**********************************************/
/* JavaScript
/**********************************************/
.webkit-javascript-ident {
color: #fff !important;
}
.webkit-javascript-keyword {
color: #cfcb90 !important;
}
.webkit-javascript-comment {
color: #7c7c7c !important;
}
.webkit-javascript-string {
color: #a8ff60 !important;
}
.webkit-javascript-number {
color: #ff73fd !important;
}
.webkit-javascript-regexp {
color: #e9c062 !important;
}
/**********************************************/
/* Sidebar
/**********************************************/
#elements-sidebar {
background: #242424 !important;
}
#elements-sidebar .styles-section.read-only,
#elements-sidebar .styles-section.read-only .monospace {
background: #3f4360 !important;
}
#elements-sidebar .subtitle {
color: #aaa !important;
}
#elements-sidebar .styles-section .header .title span:first-child,
#elements-sidebar .styles-selector span:first-child {
color: #62b1fe !important;
}
#elements-sidebar .webkit-css-property {
color: #f1f1f1 !important;
}
#elements-sidebar .properties .value {
color: #f9ee98 !important;
}
#elements-sidebar .webkit-html-external-link,
#elements-sidebar .webkit-html-resource-link {
color: #ff73fd !important;
}
#elements-sidebar .styles-section .properties li.parent::before {
content: url(chrome-devtools://devtools/Images/treeRightTriangleWhite.png) !important;
}
#elements-sidebar .styles-section .properties li::before {
opacity: 1 !important;
}
@Cottser

This comment has been minimized.

Copy link
Owner Author

commented Sep 27, 2011

Elements and sidebar

Now themes view-source as well, based on @mreinhardt's work here: https://gist.github.com/1207219

View source

@davidl

This comment has been minimized.

Copy link

commented Sep 27, 2011

This is awesome.

@curtisblackwell

This comment has been minimized.

Copy link

commented Sep 28, 2011

was hoping someone would do the sidebar. awesome that you also did view source. can get rid of my extension for view source now.

@Cottser

This comment has been minimized.

Copy link
Owner Author

commented Sep 28, 2011

Tiny fix added for the "read only" sections in the sidebar - line 294. Happy to see it's being used!

@Cottser

This comment has been minimized.

Copy link
Owner Author

commented Sep 29, 2011

Fixed text color while editing HTML and in the sidebar, consolidated and separated the text settings into their own section, and added the default fonts for Windows and Linux into the font stack. Not 100% sure on the order but I figure people will change that part anyway.

@Cottser

This comment has been minimized.

Copy link
Owner Author

commented Oct 2, 2011

Added color for line numbers in view source that was accidentally lost in the last update.

@curtisblackwell

This comment has been minimized.

Copy link

commented Oct 9, 2011

added a few lines to put CSS property checkboxes on the left:

#elements-sidebar .enabled-button {
    left: 4px;
    position: absolute !important;
    margin-top: 2px !important;
  }

https://gist.github.com/1199703

@Cottser

This comment has been minimized.

Copy link
Owner Author

commented Oct 11, 2011

@curtisblackwell - I like that. I also made the checkboxes always visible.

@Cottser

This comment has been minimized.

Copy link
Owner Author

commented Oct 13, 2011

I didn't realize I was missing disclosure triangles in the sidebar (they were just about black-on-black). I've reverted the last change and made the disclosure triangles (and the text inside DOM Breakpoints and Event Listeners) visible in the sidebar now, as well as a bunch of other small tweaks to the sidebar. Next up may be updating the "Metrics" display :)

@curtisblackwell

This comment has been minimized.

Copy link

commented Oct 14, 2011

Put the checkboxes back on the left, indented the properties a bit.

Lines 307-311

#elements-sidebar .enabled-button {
    left: 4px;
    position: absolute !important;
    margin-top: 2px !important;
}

Lines 340-342

#elements-sidebar .styles-section .properties li {
    text-indent: 10px;
}

https://gist.github.com/1199703

@Cottser

This comment has been minimized.

Copy link
Owner Author

commented Oct 14, 2011

There is a bug in the view source display, where some end tags (so far I've noticed </title> and </script>) are not properly wrapped in span tags, and are therefore shown in the default text colour. You can see this in the view source screenshot. Chrome bug I do believe.

From the view-source source:

&lt;/title&gt;<span class="webkit-html-tag"></span>
@davidl

This comment has been minimized.

Copy link

commented Feb 16, 2012

I added some style rules for the XML view-source page by adding two selectors to the "Basic font and color settings" section and rules to the "View Source" section:

https://gist.github.com/1847890

@rguerrettaz

This comment has been minimized.

Copy link

commented Jul 16, 2013

Sidebar font showing up all white...

@merlyn333

This comment has been minimized.

Copy link

commented Aug 21, 2015

Sorry, where is the file that I should edit?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.