Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Espresso syntax theme for Google Chrome Inspector
/**********************************************/
/*
/* Espresso-inspired theme for Google Chrome Inspector
/*
/* By: Paul Redmond http://github.com/paulredmond
/*
/* Inspired by Darcy Clarke's post - http://darcyclarke.me/design/skin-your-chrome-inspector/
/* Darcy Clarke's "Darker Skin" theme - http://darcyclarke.me/dev/inspectorskin/Custom.css
/*
/**********************************************/
/**********************************************/
/* Layout
/**********************************************/
#elements-content.source-code {
background: #fff !important;
font-size: 12px !important;
}
#elements-content .highlight {
color: blue;
}
#elements-content .selection {
}
#elements-content .selection.selected {
}
#elements-content .parent {
}
/*.outline-disclosure ol:focus li.parent.expanded.selected::before*/
#elements-content .outline-disclosure li.parent::before,
#elements-content .outline-disclosure ol:focus li.parent.expanded.selected::before {
background: none !important;
content: '' !important;
}
#elements-content .parent.selected {
}
#elements-content .parent.selected {
padding-top: 2px !important;
padding-bottom: 2px !important;
}
#elements-content .parent.expanded {
}
/**********************************************/
/* HTML
/**********************************************/
#elements-content .webkit-html-comment {
color: #b2b2b2 !important;
}
#elements-content .webkit-html-doctype {
}
#elements-content .webkit-html-tag {
/* color: #ffc97c !important;*/
color: #4F9FCF !important;
}
#elements-content .webkit-html-tag-name {
color: #2F6F9F !important;
background-color: rgb(244, 250, 255);
}
#elements-content .webkit-html-attribute {
}
#elements-content .webkit-html-attribute-name {
color: #4F9FCF !important;
}
#elements-content .webkit-html-attribute-value {
color: #d44950 !important;
}
#elements-content .webkit-html-external-link {
}
#elements-content .webkit-html-resource-link {
}
#elements-content .webkit-html-text-tag {
}
#elements-content .webkit-html-text-node {
color: #333 !important;
}
#elements-content .webkit-html-css-node {
color: #333 !important;
}
#elements-content .webkit-html-js-node {
color: #333 !important;
}
/**********************************************/
/* CSS
/**********************************************/
#elements-content .webkit-css-comment {
color: #b2b2b2 !important;
}
#elements-content .webkit-css-url {
}
#elements-content .webkit-css-color {
}
#elements-content .webkit-css-selector {
color: #2F6F9F !important;
}
#elements-content .webkit-css-property {
color: #db6336 !important;
}
#elements-content .webkit-css-number {
color: #8161c6 !important;
}
#elements-content .webkit-css-keyword {
color: #3a1d72 !important;
}
#elements-content .webkit-css-string {
color: #c37a2f !important;
}
#elements-content .webkit-css-important {
color: #6700b9 !important;
font-weight: bold;
}
/**********************************************/
/* JavaScript
/**********************************************/
#elements-content .webkit-javascript-comment {
}
#elements-content .webkit-javascript-keyword {
color: #d97640 !important;
}
#elements-content .webkit-javascript-ident {
color: #d97640 !important;
}
#elements-content .webkit-javascript-string {
}
#elements-content .webkit-javascript-number {
}
#elements-content .webkit-javascript-regexp {
}
/**********************************************/
/* Black arrows all the time
/**********************************************/
.audit-result-tree li.parent::before,
.console-group-messages .section .header::before,
.outline-disclosure li.parent::before,
.outline-disclosure ol:focus li.parent.selected::before,
.section .header::before,
.properties-tree li.parent::before,
.event-bars .event-bar .header::before,
.data-grid tr.parent td.disclosure::before,
.data-grid:focus tr.parent.selected td.disclosure::before,
.styles-section .properties li.parent::before
{
font-family: 'Arial' !important;
color: #aaa !important;
content: url(chrome-devtools://devtools/Images/treeRightTriangleBlack.png) !important;
padding-right: 5px !important;
font-size: 9px !important;
}
.audit-result-tree li.parent.expanded::before,
.console-group-messages .section.expanded .header::before,
.outline-disclosure li.parent.expanded::before,
.outline-disclosure ol:focus li.parent.expanded.selected::before,
.section.expanded .header::before,
.properties-tree li.parent.expanded::before,
.event-bars .event-bar.expanded .header::before,
.data-grid th.sort-descending > div::after,
.data-grid tr.expanded td.disclosure::before,
.data-grid:focus tr.expanded.selected td.disclosure::before,
.styles-section .properties li.parent.expanded::before {
font-family: 'Arial' !important;
color: #aaa !important;
content: url(chrome-devtools://devtools/Images/treeDownTriangleBlack.png) !important;
padding-right: 5px !important;
font-size: 9px !important;
}
@bentruyman

This comment has been minimized.

Copy link

bentruyman commented Aug 17, 2011

I don't know if it would help at all to use mine as a base, but it works (I think) in all of the tabs -- not just the elements tab. :)
https://gist.github.com/1150520

@paulredmond

This comment has been minimized.

Copy link
Owner Author

paulredmond commented Aug 18, 2011

@bentruyman nice job, thanks for the tip!

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.