-
-
Save drewwells/1317519 to your computer and use it in GitHub Desktop.
Solarized Dark Theme (with sidebar and view-source colors) for Google Chrome Dev Tools
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /**********************************************/ | |
| /* | |
| /* 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; | |
| } |
See this blog post http://darcyclarke.me/design/skin-your-chrome-inspector/
Thanks Drew!
👍
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!
Four years, no reply? Ouch
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi there. How does one use this?