Skip to content

Instantly share code, notes, and snippets.

@bentruyman
Created August 22, 2011 19:35
Show Gist options
  • Save bentruyman/1163300 to your computer and use it in GitHub Desktop.
Save bentruyman/1163300 to your computer and use it in GitHub Desktop.
Tomorrow Theme for Chrome Developer Tools
/**********************************************/
/*
/* 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;
}
@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: ~/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

@bentruyman
Copy link
Author

Restored highlighting as suggested by @guitarzan.

@bentruyman
Copy link
Author

Fixed missing background for JSON resource views.

@mohsen1
Copy link

mohsen1 commented Mar 1, 2012

Fixes search result next to search box and css property after tabbing and also css panel icons
#search-results-matches{color:#eee;}
.child-editing span.webkit-css-property{color:black !important;}
.pane > .title > button, .pane > .title > select{-webkit-filter: invert(1);}

@bentruyman
Copy link
Author

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: .pane > .title > button, .pane > .title > select{-webkit-filter: invert(1);} That seemed to make the icons in the right panel unreadable on the grey background.

@mohsen1
Copy link

mohsen1 commented Mar 1, 2012

@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?
(left is after)

@bentruyman
Copy link
Author

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!

@bentruyman
Copy link
Author

Fixed some minor buggers with the pseudo selector pane and arrays in the console.

@bentruyman
Copy link
Author

@simonexmachina
Copy link

There's something strange going on with the CSS inspector (in both Chrome and Canary). There seems to be an arrow and unusual indenting. Any suggestions how I can fix this?

@SeanGephardt
Copy link

Does this still work in Chrome 35+? I'm not finding the file suggested on a Win8.1 machine.

@gbraad
Copy link

gbraad commented Dec 19, 2014

No, the devtools changed; see https://github.com/gbraad/chrome-devtools-tomorrow-night-bright-theme for an easy to install extension

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment