Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
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

This comment has been minimized.

Show comment Hide comment
@bentruyman

bentruyman Aug 22, 2011

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

Owner

bentruyman commented Aug 22, 2011

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

This comment has been minimized.

Show comment Hide comment
@bentruyman

bentruyman Aug 23, 2011

Restored highlighting as suggested by @guitarzan.

Owner

bentruyman commented Aug 23, 2011

Restored highlighting as suggested by @guitarzan.

@bentruyman

This comment has been minimized.

Show comment Hide comment
@bentruyman

bentruyman Feb 24, 2012

Fixed missing background for JSON resource views.

Owner

bentruyman commented Feb 24, 2012

Fixed missing background for JSON resource views.

@mohsen1

This comment has been minimized.

Show comment Hide comment
@mohsen1

mohsen1 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);}

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

This comment has been minimized.

Show comment Hide comment
@bentruyman

bentruyman Mar 1, 2012

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.

Owner

bentruyman commented Mar 1, 2012

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

This comment has been minimized.

Show comment Hide comment
@mohsen1

mohsen1 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)

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

This comment has been minimized.

Show comment Hide comment
@bentruyman

bentruyman Mar 1, 2012

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!

Owner

bentruyman commented Mar 1, 2012

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

This comment has been minimized.

Show comment Hide comment
@bentruyman

bentruyman May 30, 2012

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

Owner

bentruyman commented May 30, 2012

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

@bentruyman

This comment has been minimized.

Show comment Hide comment
@bentruyman

bentruyman Jul 3, 2012

@aexmachina

This comment has been minimized.

Show comment Hide comment
@aexmachina

aexmachina Oct 24, 2012

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?

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

This comment has been minimized.

Show comment Hide comment
@SeanGephardt

SeanGephardt Jun 30, 2014

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

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

@gbraad

This comment has been minimized.

Show comment Hide comment
@gbraad

gbraad Dec 19, 2014

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

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