Dark Mode view for JSONVue Chrome Extension that is readable

JSONVue-Dark.css

body {
  white-space: pre;
  font-family: monospace;
  color: #ddd; /* Light grey color for general text */
  background-color: black; /* Black background */
}

a {
  color: #66ccff; /* Light blue color for links */
  text-decoration: none; /* Removes the underline */
}

a:visited {
  color: #cc66ff; /* Light purple color for visited links */
}

a:hover {
  color: #ffcc66; /* Light orange color when hovering over links */
}

a:active {
  color: #66ffcc; /* Light teal color when clicking on links */
}

.property {
  font-weight: bold;
  color: #ffdd6f; /* Light yellow color for property names */
}

.type-null {
  color: #ddd; /* Light grey color for null values */
}

.type-boolean {
  color: #ff9494; /* Light red color for boolean values */
}

.type-number {
  color: #84b1ff; /* Light blue color for numbers */
}

.type-string {
  color: #9eff98; /* Light green color for strings */
}

.callback-function {
  color: #ddd; /* Light grey color for callback functions */
}

.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: rgba(80, 80, 80, 1); /* Slightly lighter grey background for hovered items */
}

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