adding monkeytype

frontend/static/themes/dark_note.css

@@ -0,0 +1,80 @@
+:root {
+  /* custom vars */
+  --theme-bg-stripe-color: #434653;
+  --theme-bg-stripe-opacity: 0.1;
+  --theme-accent-stripe-color: #bf8200;
+  --current-color: var(--text-color);
+}
+
+.colorfulMode {
+  --current-color: var(--main-color);
+}
+
+button:not(.accountButtonAndMenu *),
+.button:not(.accountButtonAndMenu *),
+[data-ui-element="testConfig"] {
+  --roundness: 5em; /* overwriting default roundness to make it softer */
+}
+
+/* Notepad style overlay */
+body {
+  position: relative;
+}
+
+body::before,
+body::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  height: 100%;
+  opacity: var(--theme-bg-stripe-opacity);
+  display: block;
+  z-index: -9999;
+}
+
+body::after {
+  left: 0;
+  width: 100%;
+  background-image: linear-gradient(
+    0deg,
+    var(--theme-bg-stripe-color) 0.1em,
+    transparent 0.1em,
+    transparent 100%
+  );
+  background-size: 1em 2em;
+}
+
+body::before {
+  left: 10vw;
+  width: 0.1em;
+  background: var(--theme-accent-stripe-color);
+}
+
+#commandLine .modal {
+  --roundness: 0; /* making command line sharp */
+}
+
+/* restyling error displays to be strike-through instead of underlined */
+#wordsWrapper .word.error {
+  border-bottom: none;
+}
+
+#words .word.error {
+  text-shadow: none;
+}
+
+#words:not(.blind).colorfulMode .word letter.incorrect:not(.extra),
+#words:not(.blind) .word letter.incorrect:not(.extra) {
+  color: var(--current-color);
+}
+
+#words:not(.blind) .word.error letter:not(.correct):not(.incorrect)::after {
+  background: var(--sub-color);
+}
+
+#words:not(.blind) .word letter.incorrect,
+#words:not(.blind).colorfulMode .word letter.incorrect {
+  text-decoration: line-through;
+  text-decoration-color: var(--error-color);
+  text-decoration-thickness: 2px;
+}