Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Solarized Dark Theme (with sidebar and view-source colors) for Google Chrome Dev Tools
/**********************************************/
/*
/* Solarized Dark Skin by Mark Osborne - 2011
/*
/* Based on IR_Black Skin by Ben Truyman:
/* https://gist.github.com/1245727
/*
/* and 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 {
font-family: "Ubuntu mono", "Espresso Mono", "Panic Sans", "DroidSansMono", Menlo, Consolas, Lucida Console, dejavu sans mono, monospace !important;
font-size: 14px !important;
font-weight: 400;
background: #002b36 !important;
color: #cccccc !important;
}
body.platform-linux ::-webkit-scrollbar,
body.platform-windows ::-webkit-scrollbar,
body.platform-mac ::-webkit-scrollbar {
background-color: #002b36;
width: 10px;
height: 10px;
}
::-webkit-scrollbar-thumb{
background-color: rgba(0,0,0,0.2);
-webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,0.10),
inset 0 -1px 0 rgba(0,0,0,0.07);
}
::-webkit-scrollbar-track-piece{
border-color: #c4c1bd;
}
::-webkit-scrollbar-corner{
background-color: transparent;
}
::-webkit-scrollbar-button {
width: 0;
height: 0;
display: none;
}
.webkit-line-gutter-backdrop, .webkit-line-number {
border-right-color: #000 !important; /* doesn't work for some reason */
}
/**********************************************/
/* Console
/**********************************************/
/**********************************************/
/* Messages
/**********************************************/
#console-messages a {
color: #666 !important;
}
#console-messages a:hover {
color: #999 !important;
}
#console-messages .console-message {
color: #cccccc !important;
}
#console-messages .console-message, .console-user-command {
border-bottom: 1px solid #444 !important;
}
#console-messages .console-user-command > .console-message-text {
color: #00A298 !important;
}
#console-messages .console-formatted-number {
color: #ff73fd !important;
}
#console-messages .console-formatted-string {
color: #DB3380 !important;
}
#console-messages .console-formatted-object {
color: #92A1A1 !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: #cccccc !important;
}
#console-messages .section .properties .name, .event-properties .name {
color: #268bd2 !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: #cccccc !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: #09313B !important;
color: #2A4B53 !important;
font-size: 10px !important;
font-weight: normal !important;
}
.webkit-line-content {
color: #CCC !important;
}
/**********************************************/
/* Elements/Network
/**********************************************/
/**********************************************/
/* Layout
/**********************************************/
#storage-views .script-view,
#network-views .script-view,
#script-resource-views .script-view {
color: #ccc !important;
}
#elements-content .highlight {
color: #cccccc;
}
#elements-content li.hovered:not(.selected) .selection {
background: rgba(255, 255, 255, .2) !important;
}
/* These two parts combined remove the cursor from view when live editing in the console.
#elements-content .selection.selected {
z-index: 0 !important;
}
#elements-content .selected .highlight {
position: relative;
z-index: 2;
}
*/
#elements-content ol:focus li.selected .selection {
background: #3f4360 !important;
}
#elements-content .selected {
background-color: #003641 !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: #92A1A1 !important;
}
.webkit-html-tag {
color: #268bd2 !important;
}
.webkit-html-attribute-name {
color: #00A298 !important;
}
.webkit-html-attribute-value {
color: #DB3380 !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: #92A1A1 !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: #268bd2 !important;
}
.webkit-css-string {
color: #DB3380 !important;
}
.webkit-css-url {
color: #c6c5fe !important;
}
/**********************************************/
/* JavaScript
/**********************************************/
.webkit-javascript-ident {
color: #fff !important;
}
.webkit-javascript-keyword {
color: #cfcb90 !important;
}
.webkit-javascript-comment {
color: #92A1A1 !important;
}
.webkit-javascript-string {
color: #DB3380 !important;
}
.webkit-javascript-number {
color: #ff73fd !important;
}
.webkit-javascript-regexp {
color: #e9c062 !important;
}
/**********************************************
Scripts sidebar
**********************************************/
.section .properties .name, .event-properties .name{
color: #DB3380 !important;
}
.properties-tree .console-formatted-object,
.properties-tree .console-formatted-node,
.properties-tree .console-formatted-number {
color: #657b83 !important;
}
.section .properties .value.error.watch-expressions-error-level{
color: #cb4b16 !important;
font-weight: 500;
}
/*
color: #92A1A1 !important;
*/
/**********************************************/
/* Sidebar
/**********************************************/
#elements-sidebar {
background: #002b36 !important;
}
#elements-sidebar .styles-section.read-only,
#elements-sidebar .styles-section.read-only .monospace {
background: #002b36 !important;
}
#elements-sidebar .styles-section,
#elements-sidebar .subtitle {
color: #D33682 !important;
}
#elements-sidebar .styles-selector {
color: #6C71C4 !important;
}
#elements-sidebar .webkit-css-property {
color: #D33682 !important;
}
#elements-sidebar .properties .value {
color: #2AA198 !important;
}
.webkit-html-external-link,
.webkit-html-resource-link {
color: #DB3380 !important;
text-decoration: none !important;
}
@niksosf

This comment has been minimized.

Copy link

@niksosf niksosf commented Mar 9, 2012

Hi there. How does one use this?

@drewwells

This comment has been minimized.

Copy link
Owner Author

@drewwells drewwells commented Mar 13, 2012

@niksosf

This comment has been minimized.

Copy link

@niksosf niksosf commented Mar 14, 2012

Thanks Drew!

@mjc-gh

This comment has been minimized.

Copy link

@mjc-gh mjc-gh commented Oct 3, 2012

👍

@NileTaruma

This comment has been minimized.

Copy link

@NileTaruma NileTaruma commented Mar 15, 2014

For me, your colour scheme seems to work only for the “Web Inspector / Console”, but not for “View Source”.

It if matters, I am using Chromium version 33.0.1750.149 (255236) on Arch Linux.

Actually your colour scheme did not work at all for me until I followed the steps found here: http://stackoverflow.com/questions/21207474/custom-css-stop-to-work-in-32-0-1700-76-m-google-chrome-update

I followed the instructions found at that link for the “Official method (Chrome 33+ only)”, so I created a subdirectory named “~/.config/chromium/Default/User StyleSheets/Solarized Dark/” and in that directory I place four files: manifest.json, devtools.html, devtools.js, and for Custom.css I used your file, after which I clicked on “Load unpacked extension…” in the Developer Mode Extensions and selected my “Solarized Dark” subdir.

Those steps made your colour scheme display correctly in the “Web Inspector / Console”, but not in “View Source” :(

Any advice? Thanks!

@mark-c

This comment has been minimized.

Copy link

@mark-c mark-c commented Jun 5, 2018

Four years, no reply? Ouch

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.