[Theme] Tokyo Night

[lnfel]

This custom style is inspired by Tokyo Night VSCode theme. Just open JSON viewer options page and paste this code in Custom Style textarea at the bottom of the page. Upon saving, default theme would switch to monokai, so we select it and override using the custom styles.

.CodeMirror {
  font-family: "FiraCode Nerd Font", monaco, Consolas, Menlo, Courier, monospace;
  font-size: 16px;
  line-height: 1.5em;
}

.cm-s-monokai .CodeMirror-gutters { color: #24283b; }
.cm-s-monokai .CodeMirror-cursor { border-left: solid 2px #c0caf5; }
.cm-s-monokai .CodeMirror-guttermarker-subtle, .cm-s-monokai .CodeMirror-linenumber { color: #565f89; }
.cm-s-monokai.CodeMirror-focused, div.CodeMirror-selected { background: #24283b; }
.cm-s-monokai span.cm-comment { color: #565f89; }
.cm-s-monokai span.cm-string, .cm-s-monokai span.cm-string-2 { color: #9ece6a; }
.cm-s-monokai span.cm-number { color: #ff9e64; }
.cm-s-monokai span.cm-variable { color: #33fa9d; }
.cm-s-monokai span.cm-operator { color: #bb9af7; }
.cm-s-monokai span.cm-atom { color: #ff9e64; }
.cm-s-monokai span.cm-property { color: #7aa2f7; }
.cm-s-monokai.CodeMirror, .cm-s-monokai .CodeMirror-gutters {
  background-color: #24283b;
  color: #a9b1d6 !important;
  border: none;
}
.cm-s-monokai .CodeMirror-line::selection, .cm-s-monokai .CodeMirror-line>span::selection, .cm-s-monokai .CodeMirror-line>span>span::selection { background: #565f89!important; }
.cm-s-monokai .CodeMirror-line::-moz-selection, .cm-s-monokai .CodeMirror-line > span::-moz-selection, .cm-s-monokai .CodeMirror-line > span > span::-moz-selection { background: #565f89!important; }

I couldn't figure out the ::selection background color tho, it seems it is overwritten by javascript or some sort of sorcery I don't know about.