JSONView Dracula Theme

jsonview_dracula-theme.css

/*
Dracula Theme CSS for JSONView
Link to chrome extension: https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc
Color Palette from https://github.com/dracula/dracula-theme
Made by https://github.com/grippado with 💜
*/

/*
To use this theme follow steps above:
1 - Install JSONView from link: https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc
2 - Right click in JSONView icon on chrome topbar
2.1 - Select 'Options'
3 - Click button 'Open' in 'Build custom theme with style editor' option
4 - Copy this entire file, and paste in CSS Editor inside extension page option
5 - Click in save
6 - Refresh page with JSON result in your chrome
*/

body {
  white-space: pre;
  font-family: Arial;
  color: #f1fa8c;
  background: #282a36; /*Background*/
}

.property {
  color: #f8f8f2; /*Foreground*/
  font-weight: normal;
}

.type-null {
  color: #8be9fd; /*Cyan*/
}

.type-boolean {
  color: #50fa7b; /*Green*/
}

.type-number {
  color: #ffb86c; /*Orange*/
}

.type-string {
  color: #ff79c6; /*Pink*/
}

a {
  color: #bd93f9; /*Purple*/
}

.callback-function {
  color: #ff5555; /*Red*/
}

.collapser:after {
  content: "-";
  color: #ffb86c;
}

.collapsed > .collapser:after {
  content: "+";
  color: #f1fa8c; /*Yellow*/
}

.ellipsis:after {
  content: " … ";
  color: #f1fa8c; /*Yellow*/
}

.collapsible {
  margin-left: 2em;
  color: #f1fa8c; /*Yellow*/
}

.hoverable {
  padding: 1px 2px 1px 2px;
  border-radius: 3px;
}

.hovered {
  background-color: #44475a; /*Selection*/
  
}

.collapser {
  padding-right: 5px;
  padding-left: 5px;
}