Discord-like + Rouge theme, custom CSS for JSONView

jsonview.css

/* JSONView Discord-like Dark theme */
/* https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?utm_source=chrome-ntp-icon */

:root {
  --font: 'Operator Mono';
  
  /* discord colors */
  --grey: #99AAB5;
  --blurple: #7289DA;

  /* my colors */
  --bg: #172030;
  --yellow: #eabe9a;
}

body {
  background: var(--bg);
  color: var(--grey);
  white-space: pre;
  font-family: var(--font);
  font-size: 14px;
}

a {
  color: var(--blurple);
  filter: brightness(1.3);
}

.property {
#  font-weight: bold;
}

.type-null {
  color: var(--yellow);
#  font-weight: bold;
#  font-style: italic;
}

.type-boolean {
  color: var(--yellow);
  font-style: italic;
}

.type-number {
  color: var(--yellow);
}

.type-string {
  color: var(--blurple);
}

.callback-function {
  color: var(--grey);
}

.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-color: var(--bg);
  filter: brightness(1.3);
}

.collapser {
  padding-right: 6px;
  padding-left: 6px;
  color: var(--blurple);
}