JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

<style id="temp"></style>

<div id="dark">
/**********************************************/
/*
/* Darker Skin by Darcy Clarke - 2011
/*
/* For how to install, or more themes, check out:
/* http://darcyclarke.me/design/skin-your-chrome-inspector/
/* 
/* Color scheme is based on Joe Bergantine's Specials Board:
/* http://joebergantine.com/werkstatt/seestyle
/*
/**********************************************/

/**********************************************/
/* Layout
/**********************************************/
#elements-content.source-code {
  background: #242537 !important;
  font-size: 12px !important;
}

#elements-content .highlight { 
  color: #d4d4d4;
}

#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 {
  
}

#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;
}

#elements-sidebar .styles-section .properties li.parent::before,
#elements-sidebar .section > .header::before,
#elements-sidebar .properties-tree li.parent::before,
#elements-sidebar .event-bars .event-bar .header::before {
  content: url(chrome-devtools://devtools/Images/treeRightTriangleWhite.png) !important;
}

#elements-sidebar .styles-section .properties li.parent.expanded::before,
#elements-sidebar .section.expanded >...

JavaScript

$("#temp").html($("#dark").text()).delay(50).queue(function(){
    var styles = [], rules = this.sheet.cssRules;
    for(var i=0;i<rules.length;i++){
        var rule = rules[i], 
            attrs = rule.style.cssText.split(";"), 
            attr_arr = [];
        for(x in attrs){
            var temp = attrs[x].split(":");
            attr_arr.push({name:temp[0],val:temp[1]});
        }
        styles.push({selector:rule.selectorText,attrs:attr_arr});
    }
    console.log(styles);
    $(this).dequeue();  
});