README.md
· 373 B · Markdown
Brut
# Dark theme for JSONVue
1. Install extention from Chrome Webstore: https://chromewebstore.google.com/detail/jsonvue/chklaanhfefbnpoihckbnefhakgolnmc
2. Open settings page: [chrome-extension://chklaanhfefbnpoihckbnefhakgolnmc/css-editor.html](chrome-extension://chklaanhfefbnpoihckbnefhakgolnmc/css-editor.html)
3. Paste css from this gist to editor and press Save button
Dark theme for JSONVue
- Install extention from Chrome Webstore: https://chromewebstore.google.com/detail/jsonvue/chklaanhfefbnpoihckbnefhakgolnmc
- Open settings page: chrome-extension://chklaanhfefbnpoihckbnefhakgolnmc/css-editor.html
- Paste css from this gist to editor and press Save button
style.css
· 1.4 KiB · CSS
Brut
body {
white-space: pre-wrap;
word-break: break-word;
font-family: monospace;
}
.property {
font-weight: bold;
}
.type-null {
color: gray;
}
.type-boolean {
color: firebrick;
}
.type-number {
color: blue;
}
.type-string {
color: green;
}
.callback-function {
color: gray;
}
.ellipsis::after {
content: " … ";
}
.collapser {
position: absolute;
top: .1em;
left: -2ch;
cursor: default;
user-select: none;
padding-inline: 0.5ch;
}
.collapser::after {
cursor: pointer;
content: "-";
}
.collapsed > .collapser::after {
content: "+";
}
.collapsible {
margin-inline-start: 4ch;
}
.collapsible .collapsible::before {
content: "";
position: absolute;
left: 0.5ch;
top: 1.8em;
height: calc(100% - 3.6em);
border: 0;
border-inline-start: #d3d3d3 0.2ch dashed;
}
.hoverable {
display: inline-block;
padding: 0.1em;
transition: background-color 0.2s ease-out 0s;
}
.hovered {
background-color: rgba(235, 238, 249, 1);
transition-delay: 0.2s;
}
.selected {
outline: dotted 0.1ch;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #282828;
color: lightgrey;
}
.hovered {
background-color: #424242;
}
.type-boolean {
color: tomato;
}
.type-number {
color: dodgerblue;
}
.type-string {
color: yellowgreen;
}
a {
color: dodgerblue;
}
.collapsible .collapsible::before {
border-color: #484848;
}
}
| 1 | body { |
| 2 | white-space: pre-wrap; |
| 3 | word-break: break-word; |
| 4 | font-family: monospace; |
| 5 | } |
| 6 | |
| 7 | .property { |
| 8 | font-weight: bold; |
| 9 | } |
| 10 | |
| 11 | .type-null { |
| 12 | color: gray; |
| 13 | } |
| 14 | |
| 15 | .type-boolean { |
| 16 | color: firebrick; |
| 17 | } |
| 18 | |
| 19 | .type-number { |
| 20 | color: blue; |
| 21 | } |
| 22 | |
| 23 | .type-string { |
| 24 | color: green; |
| 25 | } |
| 26 | |
| 27 | .callback-function { |
| 28 | color: gray; |
| 29 | } |
| 30 | |
| 31 | .ellipsis::after { |
| 32 | content: " … "; |
| 33 | } |
| 34 | |
| 35 | .collapser { |
| 36 | position: absolute; |
| 37 | top: .1em; |
| 38 | left: -2ch; |
| 39 | cursor: default; |
| 40 | user-select: none; |
| 41 | padding-inline: 0.5ch; |
| 42 | } |
| 43 | |
| 44 | .collapser::after { |
| 45 | cursor: pointer; |
| 46 | content: "-"; |
| 47 | } |
| 48 | |
| 49 | .collapsed > .collapser::after { |
| 50 | content: "+"; |
| 51 | } |
| 52 | |
| 53 | .collapsible { |
| 54 | margin-inline-start: 4ch; |
| 55 | } |
| 56 | |
| 57 | .collapsible .collapsible::before { |
| 58 | content: ""; |
| 59 | position: absolute; |
| 60 | left: 0.5ch; |
| 61 | top: 1.8em; |
| 62 | height: calc(100% - 3.6em); |
| 63 | border: 0; |
| 64 | border-inline-start: #d3d3d3 0.2ch dashed; |
| 65 | } |
| 66 | |
| 67 | .hoverable { |
| 68 | display: inline-block; |
| 69 | padding: 0.1em; |
| 70 | transition: background-color 0.2s ease-out 0s; |
| 71 | } |
| 72 | |
| 73 | .hovered { |
| 74 | background-color: rgba(235, 238, 249, 1); |
| 75 | transition-delay: 0.2s; |
| 76 | } |
| 77 | |
| 78 | .selected { |
| 79 | outline: dotted 0.1ch; |
| 80 | } |
| 81 | |
| 82 | @media (prefers-color-scheme: dark) { |
| 83 | body { |
| 84 | background-color: #282828; |
| 85 | color: lightgrey; |
| 86 | } |
| 87 | |
| 88 | .hovered { |
| 89 | background-color: #424242; |
| 90 | } |
| 91 | |
| 92 | .type-boolean { |
| 93 | color: tomato; |
| 94 | } |
| 95 | |
| 96 | .type-number { |
| 97 | color: dodgerblue; |
| 98 | } |
| 99 | |
| 100 | .type-string { |
| 101 | color: yellowgreen; |
| 102 | } |
| 103 | |
| 104 | a { |
| 105 | color: dodgerblue; |
| 106 | } |
| 107 | |
| 108 | .collapsible .collapsible::before { |
| 109 | border-color: #484848; |
| 110 | } |
| 111 | } |