/**********************************************/ | |
/* | |
/* Tomorrow Skin by Ben Truyman - 2011 | |
/* | |
/* Based on Chris Kempson's Tomorrow Theme: | |
/* https://github.com/ChrisKempson/Tomorrow-Theme | |
/* | |
/* Inspired by Darcy Clarke's blog post: | |
/* http://darcyclarke.me/design/skin-your-chrome-inspector/ | |
/* | |
/**********************************************/ | |
/**********************************************/ | |
/* Toolbar | |
/**********************************************/ | |
#-webkit-web-inspector.compact #toolbar { | |
background-image: -webkit-linear-gradient(#555, #333) !important; | |
border-bottom: 1px solid #444 !important; | |
border-top: 5px solid #C96666 !important; | |
padding-top: 5px !important; | |
height: 50px !important; | |
} | |
#-webkit-web-inspector.compact #toolbar .toolbar-item { | |
/* height: 32px !important;*/ | |
} | |
#-webkit-web-inspector.compact #toolbar .toolbar-label { | |
color: #aaa !important; | |
} | |
#-webkit-web-inspector.compact #toolbar .toggled-on .toolbar-label { | |
color: #eee !important; | |
} | |
#-webkit-web-inspector.compact #toolbar .toolbar-item.toggleable.toggled-on { | |
background-image: -webkit-linear-gradient(#333, #555) !important; | |
} | |
#-webkit-web-inspector.compact #toolbar-controls { | |
margin-top: -5px !important; | |
} | |
#-webkit-web-inspector.compact #main { | |
top: 50px !important; | |
} | |
#-webkit-web-inspector.compact #search-results-matches { | |
color: #eee !important; | |
text-shadow: none !important; | |
} | |
#-webkit-web-inspector.compact #search { | |
background: #333 !important; | |
} | |
/**********************************************/ | |
/* Console | |
/**********************************************/ | |
/**********************************************/ | |
/* Messages | |
/**********************************************/ | |
#-webkit-web-inspector #console-messages { | |
font-family: 'DroidSansMono', Menlo, monospace !important; | |
background: #1C1E21; | |
} | |
#-webkit-web-inspector #console-messages a { | |
color: #666 !important; | |
} | |
#-webkit-web-inspector #console-messages a:hover { | |
color: #999 !important; | |
} | |
#-webkit-web-inspector .console-message { | |
color: #F1F1F1 !important; | |
} | |
#-webkit-web-inspector .console-message, .console-user-command { | |
border-bottom: 1px solid #444 !important; | |
} | |
#-webkit-web-inspector .console-user-command > .console-message-text { | |
color: #C4C7C6 !important; | |
} | |
#-webkit-web-inspector .console-formatted-number { | |
color: #EEC574 !important; | |
} | |
#-webkit-web-inspector .console-formatted-string { | |
color: #B5BC67 !important; | |
} | |
#-webkit-web-inspector .console-formatted-object { | |
color: #7C7C7C !important; | |
} | |
#-webkit-web-inspector .console-formatted-function { | |
color: #FFF !important; | |
} | |
#-webkit-web-inspector .console-formatted-regexp { | |
color: #C96666 !important; | |
} | |
#-webkit-web-inspector .console-group-messages .section .header .title { | |
color: #F1F1F1 !important; | |
} | |
#-webkit-web-inspector .console-group-messages .section .header::before, | |
#-webkit-web-inspector .properties-tree li.parent::before { | |
content: url(chrome-devtools://devtools/Images/treeRightTriangleWhite.png) !important; | |
} | |
#-webkit-web-inspector .console-group-messages .section.expanded .header::before, | |
#-webkit-web-inspector .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: #f22; !important } | |
100% { color: #f77; !important } | |
} | |
#-webkit-web-inspector .console-error-level .console-message-text .title { | |
color: #f66 !important; | |
-webkit-animation-name: webkit-error-level; | |
-webkit-animation-duration: 2s; | |
-webkit-animation-iteration-count: infinite; | |
-webkit-timing-function: ease-in-out; | |
} | |
#-webkit-web-inspector .console-user-command::before { | |
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTMzNzdGNUZDMTA1MTFFMDgwRUZGQ0JCMjgzMzU0MTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTMzNzdGNjBDMTA1MTFFMDgwRUZGQ0JCMjgzMzU0MTYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5MzM3N0Y1REMxMDUxMUUwODBFRkZDQkIyODMzNTQxNiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5MzM3N0Y1RUMxMDUxMUUwODBFRkZDQkIyODMzNTQxNiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pia6udAAAAB5SURBVHjaYvz//z8DMYAFxli9ejWI6oByK5AVhYaGIhRCgQsQGwOxIFTxe5gEE5pCVyA+C8RpQLwbqgmrwvdQxauhis6AbMamEASUkEwCabyHTWE51BQlqBNMoDSKQhckX3dCFd3DCB4g2AP16VkoGwUwEhvgAAEGAAzQHBRSxqPRAAAAAElFTkSuQmCC) !important; | |
} | |
/**********************************************/ | |
/* Prompt | |
/**********************************************/ | |
#-webkit-web-inspector #console-prompt { | |
color: #F1F1F1 !important; | |
} | |
#-webkit-web-inspector #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/Scripts | |
/**********************************************/ | |
/**********************************************/ | |
/* Layout | |
/**********************************************/ | |
#-webkit-web-inspector .script-view, | |
#-webkit-web-inspector .properties-tree, | |
#-webkit-web-inspector .pane, | |
#-webkit-web-inspector .breakpoint-list li, | |
#-webkit-web-inspector .pane > .body .info { | |
color: #CCC !important; | |
} | |
#-webkit-web-inspector .script-view, | |
#-webkit-web-inspector .text-editor-contents, | |
#-webkit-web-inspector .pane.expanded, | |
#-webkit-web-inspector #elements-content, | |
#-webkit-web-inspector .resource-view.json { | |
background: #1C1E21 !important; | |
font-size: 12px !important; | |
} | |
#-webkit-web-inspector .highlight { | |
color: #F1F1F1; | |
} | |
#-webkit-web-inspector li.hovered:not(.selected) .selection { | |
background: rgba(255, 255, 255, .2) !important; | |
} | |
#-webkit-web-inspector #elements-content .selected { | |
background-color: #373B41 !important; | |
} | |
#-webkit-web-inspector .parent::before { | |
content: url(chrome-devtools://devtools/Images/treeRightTriangleWhite.png) !important; | |
position: relative; | |
z-index: 999; | |
} | |
#-webkit-web-inspector .parent.expanded::before { | |
content: url(chrome-devtools://devtools/Images/treeDownTriangleWhite.png) !important; | |
} | |
/**********************************************/ | |
/* HTML | |
/**********************************************/ | |
#-webkit-web-inspector .webkit-html-comment { | |
color: #7C7C7C !important; | |
} | |
#-webkit-web-inspector .webkit-html-tag { | |
color: #C96666 !important; | |
} | |
#-webkit-web-inspector .webkit-html-attribute-name { | |
color: #C96666 !important; | |
} | |
#-webkit-web-inspector .webkit-html-attribute-value { | |
color: #B5BC67 !important; | |
} | |
#-webkit-web-inspector .webkit-html-text-node | |
#-webkit-web-inspector .webkit-html-css-node { | |
color: #C2C3C3 !important; | |
} | |
#-webkit-web-inspector .webkit-html-js-node { | |
color: #C2C3C3 !important; | |
} | |
#-webkit-web-inspector .webkit-html-resource-link, | |
#-webkit-web-inspector .webkit-html-external-link { | |
color: #EEC574 !important; | |
} | |
/**********************************************/ | |
/* CSS | |
/**********************************************/ | |
#-webkit-web-inspector .webkit-css-comment { | |
color: #7C7C7C !important; | |
} | |
#-webkit-web-inspector .webkit-css-selector, | |
#-webkit-web-inspector .styles-selector { | |
color: #C96666 !important; | |
} | |
#-webkit-web-inspector .webkit-css-property { | |
color: #EEC574 !important; | |
} | |
#-webkit-web-inspector .webkit-css-keyword { | |
color: #DB925F !important; | |
} | |
#-webkit-web-inspector .webkit-css-number, | |
#-webkit-web-inspector .properties-tree .value { | |
color: #DB925F !important; | |
} | |
#-webkit-web-inspector .webkit-css-important, | |
#-webkit-web-inspector .webkit-css-at-rule { | |
color: #B094BB !important; | |
} | |
#-webkit-web-inspector .webkit-css-string { | |
color: #B5BC67 !important; | |
} | |
#-webkit-web-inspector .webkit-css-url { | |
color: #EEC574 !important; | |
} | |
/**********************************************/ | |
/* JavaScript | |
/**********************************************/ | |
#-webkit-web-inspector .webkit-line-content, | |
#-webkit-web-inspector .webkit-javascript-ident { | |
color: #FFF !important; | |
} | |
#-webkit-web-inspector .webkit-javascript-keyword { | |
color: #DB925F !important; | |
} | |
#-webkit-web-inspector .webkit-javascript-comment { | |
color: #7C7C7C !important; | |
} | |
#-webkit-web-inspector .webkit-javascript-string { | |
color: #B5BC67 !important; | |
} | |
#-webkit-web-inspector .webkit-javascript-number { | |
color: #DB925F !important; | |
} | |
#-webkit-web-inspector .webkit-javascript-regexp { | |
color: #C96666 !important; | |
} | |
#-webkit-web-inspector .section .properties .name, | |
#-webkit-web-inspector .event-properties .name { | |
color: #82A1BE !important; | |
} | |
/**********************************************/ | |
/* Everything Else | |
/**********************************************/ | |
#-webkit-web-inspector .editing { | |
color: #fff !important; | |
background-color: #000 !important; | |
} | |
#-webkit-web-inspector .styles-section.read-only { | |
background: #373B41 !important; | |
} | |
#-webkit-web-inspector .styles-section, | |
#-webkit-web-inspector .subtitle { | |
color: #7C7C7C !important; | |
} | |
#-webkit-web-inspector .styles-sidebar-separator, | |
#-webkit-web-inspector .pane > .title { | |
background-image: -webkit-linear-gradient(#555, #333) !important; | |
border-top-color: #666 !important; | |
border-bottom-color: #333 !important; | |
color: #bbb !important; | |
text-shadow: black 0 1px 0 !important; | |
text-overflow: ellipsis !important; | |
} | |
#-webkit-web-inspector .pane > .title > button, | |
#-webkit-web-inspector .pane > .title > select { | |
-webkit-filter: invert(1); | |
} | |
#-webkit-web-inspector .split-view-sidebar-right { | |
background: #222 !important; | |
} | |
#-webkit-web-inspector .styles-section .properties li.parent::before, | |
#-webkit-web-inspector .section > .header::before, | |
#-webkit-web-inspector .properties-tree li.parent::before, | |
#-webkit-web-inspector .event-bars .event-bar .header::before, | |
#-webkit-web-inspector .outline-disclosure li.parent::before { | |
content: url(chrome-devtools://devtools/Images/treeRightTriangleWhite.png) !important; | |
} | |
#-webkit-web-inspector .styles-section .properties li.parent.expanded::before, | |
#-webkit-web-inspector .section.expanded > .header::before, | |
#-webkit-web-inspector .properties-tree li.parent.expanded::before, | |
#-webkit-web-inspector .event-bars .event-bar.expanded .header::before, | |
#-webkit-web-inspector .outline-disclosure li.parent.expanded::before { | |
content: url(chrome-devtools://devtools/Images/treeDownTriangleWhite.png) !important; | |
} | |
#-webkit-web-inspector .child-editing { | |
color: #fff !important; | |
} | |
#-webkit-web-inspector .section .properties .name, | |
#-webkit-web-inspector .event-properties .name { | |
color: #82A1BE !important; | |
} | |
#-webkit-web-inspector .styles-selector { | |
color: #C96666 !important; | |
} | |
#-webkit-web-inspector .section .header { | |
color: #CCC !important; | |
} | |
#-webkit-web-inspector .properties .value { | |
color: #C2C3C3 !important; | |
} | |
#-webkit-web-inspector .metrics { | |
color: #333 !important; | |
} | |
#-webkit-web-inspector .metrics .border { | |
border-color: #FFF !important; | |
} | |
#-webkit-web-inspector .event-bars .event-bar .header .title { | |
color: #969796 !important; | |
text-shadow: none !important; | |
} | |
#-webkit-web-inspector .console-formatted-number { | |
color: #EEC574 !important; | |
} | |
#-webkit-web-inspector .console-formatted-string { | |
color: #B5BC67 !important; | |
} | |
#-webkit-web-inspector .console-formatted-object, | |
#-webkit-web-inspector .console-formatted-node, | |
#-webkit-web-inspector .console-formatted-array { | |
color: #7C7C7C !important; | |
} | |
#-webkit-web-inspector .console-formatted-function { | |
color: #FFF !important; | |
} | |
#-webkit-web-inspector .console-formatted-regexp { | |
color: #C96666 !important; | |
} | |
#-webkit-web-inspector .styles-element-state-pane { | |
background: #373B41 !important; | |
} |
This comment has been minimized.
This comment has been minimized.
Restored highlighting as suggested by @guitarzan. |
This comment has been minimized.
This comment has been minimized.
Fixed missing background for JSON resource views. |
This comment has been minimized.
This comment has been minimized.
Fixes search result next to search box and css property after tabbing and also css panel icons |
This comment has been minimized.
This comment has been minimized.
Thanks @mohsen1. I added a couple of your changes. But I think this might only work with Chrome Dev. The line I didn't use was: |
This comment has been minimized.
This comment has been minimized.
@bentruyman I think this is a good change in the right panel. This is before and after I applied this rule. What's wrong with it? |
This comment has been minimized.
This comment has been minimized.
Ah, I see now. Are you on Chrome Dev channel? I think they may have updated some of the class names as my panels didn't have the dark gradient like yours did, so those buttons looked fine for me. I've updated it now, including your filter fix. Thank you! |
This comment has been minimized.
This comment has been minimized.
Fixed some minor buggers with the pseudo selector pane and arrays in the console. |
This comment has been minimized.
This comment has been minimized.
LESS version: https://gist.github.com/3040634 |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
Does this still work in Chrome 35+? I'm not finding the file suggested on a Win8.1 machine. |
This comment has been minimized.
This comment has been minimized.
No, the devtools changed; see https://github.com/gbraad/chrome-devtools-tomorrow-night-bright-theme for an easy to install extension |
This comment has been minimized.
Make your Chrome developer tools look like this:
As noted in Darcy Clarke's blog post, here's how to install this user stylesheet: