use different fonts

fonts/index.css

@@ -1,34 +1,34 @@
 @font-face {
-  font-family: "Victor Mono";
-  src: url("woff2/VictorMono-Regular.woff2") format("woff2"),
-       url("woff/VictorMono-Regular.woff") format("woff");
+  font-family: "IBM Plex Mono";
+  src: url("woff2/IBMPlexMono-Regular.woff2") format("woff2"),
+       url("woff/IBMPlexMono-Regular.woff") format("woff");
   font-weight: 400;
   font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: "Victor Mono";
-  src: url("woff2/VictorMono-Italic.woff2") format("woff2"),
-       url("woff/VictorMono-Italic.woff") format("woff");
+  font-family: "IBM PLex Mono";
+  src: url("woff2/IBMPlexMono-Italic.woff2") format("woff2"),
+       url("woff/IBMPlexMono-Italic.woff") format("woff");
   font-weight: 400;
   font-style: italic;
   font-display: swap;
 }
 
 @font-face {
-  font-family: "Victor Mono";
-  src: url("woff2/VictorMono-Bold.woff2") format("woff2"),
-       url("woff/VictorMono-Bold.woff") format("woff");
+  font-family: "IBM PLex Mono";
+  src: url("woff2/IBMPlexMono-Bold.woff2") format("woff2"),
+       url("woff/IBMPlexMono-Bold.woff") format("woff");
   font-weight: 700;
   font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: "Victor Mono";
-  src: url("woff2/VictorMono-BoldItalic.woff2") format("woff2"),
-       url("woff/VictorMono-BoldItalic.woff") format("woff");
+  font-family: "IBM Plex Mono";
+  src: url("woff2/IBMPlexMono-BoldItalic.woff2") format("woff2"),
+       url("woff/IBMPlexMono-BoldItalic.woff") format("woff");
   font-weight: 700;
   font-style: italic;
   font-display: swap;

index.html

@@ -12,7 +12,7 @@
   <style>
 
     body {
-      font-family: "Victor Mono";
+      font-family: "Arial";
       background-color: #111827;
 			overflow: hidden;
 			position: fixed;

src/themes/toposTheme.ts

@@ -5,7 +5,7 @@ import { tags as t } from "@lezer/highlight";
 
 const base00 = "#262626",
   base01 = "#3B4252",
-  base02 = "#FEFEFE",
+  base02 = "#BBBBBB",
   base03 = "#4C566A",
   base04 = "#D8DEE9",
   base05 = "#E5E9F0",
@@ -13,9 +13,9 @@ const base00 = "#262626",
   base_red = "#BF616A",
   base_deeporange = "#D08770",
   base_pink = "#B48EAD",
-  base_yellow = "#EBCB8B",
+  base_cyan = "#FBCF8B",
+  base_yellow = "#88C0D0",
   base_orange = "#D08770",
-  base_cyan = "#88C0D0",
   base_indigo = "#5E81AC",
   base_purple = "#B48EAD",
   base_green = "#A3BE8C",
@@ -23,7 +23,7 @@ const base00 = "#262626",
 
 const invalid = base_red,
   darkBackground = "#fdf6e3",
-  highlightBackground = "#454545",
+  highlightBackground = "#252525",
   // background = base00,
   tooltipBackground = base01,
   cursor = base04;
@@ -36,16 +36,17 @@ export const toposDarkTheme = EditorView.theme(
       // backgroundColor: background,
       backgroundColor: "transparent",
       fontSize: "24px",
-      fontFamily: "'Victor Mono', monospace",
+      fontFamily: "IBM Plex Mono",
     },
     ".cm-content": {
       caretColor: cursor,
-      fontFamily: "'Victor Mono', monospace",
+      fontFamily: "IBM Plex Mono",
     },
     ".cm-cursor, .cm-dropCursor": {
       borderLeftColor: cursor,
     },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": { 
+    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
+      {
         backgroundColor: base00,
         border: `0.5px solid ${base00}`,
       },
@@ -72,7 +73,7 @@ export const toposDarkTheme = EditorView.theme(
 
     "&.cm-focused .cm-matchingBracket": {
       color: base02,
-      outline: `1px solid ${base02}`,
+      // outline: `1px solid ${base02}`,
     },
 
     "&.cm-focused .cm-nonmatchingBracket": {