diff --git a/src/public/stylesheets/relation_map.css b/src/public/stylesheets/relation_map.css
index b1a35aaea..062fd01ff 100644
--- a/src/public/stylesheets/relation_map.css
+++ b/src/public/stylesheets/relation_map.css
@@ -12,12 +12,13 @@
 .note-box {
     padding: 16px;
     position: absolute !important;
+    background-color: var(--accented-background-color);
+    color: var(--main-text-color);
     z-index: 4;
     border: 1px solid #666;
     box-shadow: 2px 2px 19px #999;
     border-radius: 8px;
     opacity: 0.8;
-    background-color: white;
     font-size: 11px;
     width: auto;
     height: auto;
@@ -28,7 +29,7 @@
 }
 
 .note-box:hover {
-    background-color: #ddd;
+    background-color: var(--more-accented-background-color);
 }
 
 .note-box .title {
@@ -37,11 +38,12 @@
 }
 
 .connection-label.jtk-hover, .jtk-source-hover, .jtk-target-hover {
-    background-color: #ddd;
+    background-color: var(--more-accented-background-color);
 }
 
 .connection-label {
-    background-color: white;
+    background-color: var(--accented-background-color);
+    color: var(--main-text-color);
     opacity: 0.8;
     padding: 0.3em;
     border-radius: 0.5em;
@@ -64,10 +66,6 @@
     box-shadow: 0 0 6px black;
 }
 
-.statemachine-demo .jtk-endpoint {
-    z-index: 3;
-}
-
 .dragHover {
     border: 2px solid orange;
 }
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index e727f6351..edc9c11b0 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -20,14 +20,14 @@
     --menu-background-color: white;
 }
 
-body.theme-black {
+html.theme-black {
     --main-background-color: black;
     --main-text-color: white;
-    --accented-background-color: #222; /*#eee;*/
-    --more-accented-background-color: #444; /*#eee;*/
-    --header-background-color: black; /*#f8f8f8;*/
-    --button-background-color: #333; /*#eee;*/
-    --button-border-color: #444; /*#ddd;*/
+    --accented-background-color: #222;
+    --more-accented-background-color: #444;
+    --header-background-color: black;
+    --button-background-color: #333;
+    --button-border-color: #444;
     --button-text-color: white;
     --button-border-radius: 3px;
     --muted-text-color: #ccc;
@@ -42,6 +42,10 @@ body.theme-black {
     --menu-background-color: #222;
 }
 
+html.theme-black .CodeMirror {
+    filter: invert(100%) hue-rotate(180deg);
+}
+
 html {
     /* this fixes FF filter vs. position fixed bug: https://github.com/zadam/trilium/issues/233 */
     height: 100%;