jsBench.me Dark theme

Dark_theme_-_jsbench.me.user.js

// ==UserScript==
// @name      Dark theme - jsbench.me
// @namespace intermission
// @match     https://jsbench.me/*
// @version   1
// @run-at    document-start
// @grant     none
// ==/UserScript==

const animName = "jsBenchNodeInserted";
const CSS = new Text(`body, .footer, #topnav {
  background: #0f0f0f;
  color: rgb(160, 202, 222);
}
#topnav #logo {
  filter: brightness(250%);
}
.menu {
  background: #181818;
}
.row-left {
  background: #222;
}
div.buttonBar {
  background: #333;
}
.floatTR {
  background: hsla(0,0%,25%,.6);
}
.suiteOutput > .row-right {
  background: #1a1a1a ! important;
}
input[type="password"]:focus, input[type="text"]:focus, textarea.description:focus {
  background: transparent;
}
textarea.description {
  color: rgb(160, 202, 222);
}

@keyframes ${animName} { from { clip: rect(1px, auto, auto, auto); } to { clip: rect(0px, auto, auto, auto); } }
.CodeMirror.cm-s-default { animation: ${animName} .001s; }`);
const cmAmbientTheme = document.createElement("link");
const style = document.createElement("style");

cmAmbientTheme.href = "https://codemirror.net/theme/ambiance.css";
cmAmbientTheme.setAttribute("rel", "stylesheet");
document.documentElement.appendChild(cmAmbientTheme);

style.setAttribute("rel", "stylesheet");
style.appendChild(CSS);
document.documentElement.appendChild(style);

document.addEventListener("animationstart", e => {
  if (e.animationName !== animName) return;
  const { target } = e;
  target.classList.remove("cm-s-default");
  target.classList.add("cm-s-ambiance");
});