Create a gist now

Instantly share code, notes, and snippets.

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

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
Owner

@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