diff --git a/src/diagrams/gantt/styles.js b/src/diagrams/gantt/styles.js
index 0b700e021..227530806 100644
--- a/src/diagrams/gantt/styles.js
+++ b/src/diagrams/gantt/styles.js
@@ -57,8 +57,8 @@ const getStyles = options =>
     opacity: 0.8;
     shape-rendering: crispEdges;
     text {
-      font-family: 'trebuchet ms', verdana, arial;
-      font-family: var(--mermaid-font-family);
+      font-family: ${options.fontFamily};
+      fill: ${options.textColor};
     }
   }
 
diff --git a/src/diagrams/user-journey/styles.js b/src/diagrams/user-journey/styles.js
index 72ed15809..c736b4d5f 100644
--- a/src/diagrams/user-journey/styles.js
+++ b/src/diagrams/user-journey/styles.js
@@ -22,7 +22,7 @@ const getStyles = options =>
 
   .face {
     fill: #FFF8DC;
-    stroke: #999';
+    stroke: #999;
   }
 
   .node rect,
diff --git a/src/themes/theme-dark.js b/src/themes/theme-dark.js
index 267294712..cf2b2bef8 100644
--- a/src/themes/theme-dark.js
+++ b/src/themes/theme-dark.js
@@ -3,7 +3,7 @@ import { invert, lighten, rgba } from 'khroma';
 class Theme {
   constructor() {
     this.background = '#333';
-    this.mainBkg = '#1f2020';
+    this.mainBkg = lighten('#1f2020', 15);
     this.secondBkg = 'calculated';
     this.mainContrastColor = 'lightgrey';
     this.darkTextColor = lighten(invert('#323D47'), 10);
@@ -49,7 +49,7 @@ class Theme {
     this.sectionBkgColor = rgba(255, 255, 255, 30);
     this.altSectionBkgColor = 'white';
     this.sectionBkgColor2 = '#EAE8B9';
-    this.taskBorderColor = rgba(255, 255, 255, 50);
+    this.taskBorderColor = rgba(255, 255, 255, 70);
     this.taskBkgColor = 'calculated';
     this.taskTextColor = 'calculated';
     this.taskTextLightColor = 'calculated';