Skip to content

Instantly share code, notes, and snippets.

@devdrops
Last active August 30, 2016 20:36
Show Gist options
  • Select an option

  • Save devdrops/76d51adb926f4155cb211e3d81c433e5 to your computer and use it in GitHub Desktop.

Select an option

Save devdrops/76d51adb926f4155cb211e3d81c433e5 to your computer and use it in GitHub Desktop.
JSONView Custom CSS Themes
/***
* JSONView Custom CSS Theme: First-Theme
* @author Davi Marcondes Moreira (@devdrops) <davi.marcondes.moreira@gmail.com>
*
* Credits:
* - https://github.com/gildas-lormeau
* - https://github.com/gildas-lormeau/JSONView-for-Chrome
*
* Usage:
* 1. Open `Options` > `Build custom theme with style editor`;
* 2. Copy and paste this theme, save;
* 3. PROFIT!
***/
body {
white-space: pre;
font-family: monospace;
background: #383838;
}
.property {
font-weight: bold;
}
.type-null {
color: firebrick;
}
.type-boolean {
color: firebrick;
}
.type-number {
color: #7247C1;
}
.type-string {
color: #46B9EA;
}
.callback-function {
}
.collapser:after {
content: "-";
}
.collapsed > .collapser:after {
content: "+";
}
.ellipsis:after {
content: " … ";
}
.collapsible {
margin-left: 2em;
}
.hoverable {
padding-top: 1px;
padding-bottom: 1px;
padding-left: 2px;
padding-right: 2px;
border-radius: 2px;
}
.hovered {
background: #787878;
}
.collapser {
padding-right: 6px;
padding-left: 6px;
}
/***
* JSONView Custom CSS Theme: Monokai
* @author Davi Marcondes Moreira (@devdrops) <davi.marcondes.moreira@gmail.com>
*
* Credits:
* - https://github.com/gildas-lormeau
* - https://github.com/gildas-lormeau/JSONView-for-Chrome
*
* Usage:
* 1. Open `Options` > `Build custom theme with style editor`;
* 2. Copy and paste this theme, save;
* 3. PROFIT!
***/
#json {
color: white;
}
body {
white-space: pre;
font-family: monospace;
background: #272822;
}
.property {
font-weight: bold;
color: #A6E22E;
}
.type-null {
color: #F92673;
}
.type-boolean {
color: #F92673;
}
.type-number {
color: #AD81FF;
}
.type-string {
color: #E6DB74;
}
.callback-function {
}
.collapser:after {
content: "-";
color: white;
}
.collapsed > .collapser:after {
content: "+";
color: white;
}
.ellipsis:after {
content: " … ";
color: white;
}
.collapsible {
margin-left: 2em;
}
.hoverable {
color: white;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 2px;
padding-right: 2px;
border-radius: 2px;
}
.hovered {
background: #787878;
}
.collapser {
padding-right: 6px;
padding-left: 6px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment