Diagram theme

forum-network/public/classes/scene.js

@@ -21,7 +21,18 @@ export class Scene {
     this.seqDiagramBox = this.box.addBox(`${this.name}-seq-diagram`);
     this.box.addBox('Spacer').setInnerHTML(' ');
     this.logBox = this.box.addBox(`${this.name}-log`);
-    mermaid.mermaidAPI.initialize({ startOnLoad: false });
+    mermaid.mermaidAPI.initialize({
+      startOnLoad: false,
+      theme: 'base',
+      themeVariables: {
+        darkMode: true,
+        primaryColor: '#2a5b6c',
+        primaryTextColor: '#b6b6b6',
+        fontFamily: 'monospace',
+        noteBkgColor: '#516f77',
+        noteTextColor: '#cecece',
+      },
+    });
     this.dateLastRender = null;
   }
 

forum-network/public/index.css

@@ -1,8 +1,12 @@
+body {
+  background-color: #2a5b6c;
+  background-color: #114754;
+  color: #b6b6b6;
+  font-family: monospace;
+  font-size: 8pt;
+}
 .box {
-  /* border: 1px #eee solid; */
   width: fit-content;
-  font-family: sans-serif;
-  font-size: 12pt;
 }
 .box .name {
   width: 15em;
@@ -12,15 +16,13 @@
 }
 .box .value {
   width: fit-content;
-  /* border: 0px; */
 }
 .flex {
   display: flex;
 }
 .monospace {
-  /* border: 0px; */
   font-family: monospace;
-  font-size: 11pt;
+  font-size: 8pt;
 }
 svg {
   width: 800px;