#1542 Dark theme fixes for pie and user-journey

src/diagrams/pie/styles.js

@@ -7,8 +7,11 @@ const getStyles = options =>
   }
   .slice {
     font-family: ${options.fontFamily};
+    fill: ${options.textColor};
+    // fill: white;
   }
   .legend text {
+    fill: ${options.taskTextDarkColor};
     font-family: ${options.fontFamily};
     font-size: 17px;
   }

src/diagrams/user-journey/styles.js

@@ -2,13 +2,29 @@ const getStyles = options =>
   `.label {
     font-family: 'trebuchet ms', verdana, arial;
     font-family: var(--mermaid-font-family);
-    color: #333;
+    color: ${options.textColor};
+  }
+  .mouth {
+    stroke: #666;
+  }
+
+  line {
+    stroke: ${options.textColor}
+  }
+
+  .legend {
+    fill: ${options.textColor};
   }
 
   .label text {
     fill: #333;
   }
 
+  .face {
+    fill: #FFF8DC;
+    stroke: #999';
+  }
+
   .node rect,
   .node circle,
   .node ellipse,

src/diagrams/user-journey/svgDraw.js

@@ -24,8 +24,7 @@ export const drawFace = function(element, faceData) {
     .append('circle')
     .attr('cx', faceData.cx)
     .attr('cy', faceData.cy)
-    .attr('fill', '#FFF8DC')
+    .attr('class', 'face')
-    .attr('stroke', '#999')
     .attr('r', radius)
     .attr('stroke-width', 2)
     .attr('overflow', 'visible');
@@ -61,6 +60,7 @@ export const drawFace = function(element, faceData) {
     //mouth
     face
       .append('path')
+      .attr('class', 'mouth')
       .attr('d', arc)
       .attr('transform', 'translate(' + faceData.cx + ',' + (faceData.cy + 2) + ')');
   }
@@ -74,6 +74,7 @@ export const drawFace = function(element, faceData) {
     //mouth
     face
       .append('path')
+      .attr('class', 'mouth')
       .attr('d', arc)
       .attr('transform', 'translate(' + faceData.cx + ',' + (faceData.cy + 7) + ')');
   }
@@ -81,12 +82,13 @@ export const drawFace = function(element, faceData) {
   function ambivalent(face) {
     face
       .append('line')
+      .attr('class', 'mouth')
       .attr('stroke', 2)
       .attr('x1', faceData.cx - 5)
       .attr('y1', faceData.cy + 7)
       .attr('x2', faceData.cx + 5)
       .attr('y2', faceData.cy + 7)
-      .attr('class', 'task-line')
+      .attr('class', 'mouth')
       .attr('stroke-width', '1px')
       .attr('stroke', '#666');
   }
@@ -128,7 +130,8 @@ export const drawText = function(elem, textData) {
   const textElem = elem.append('text');
   textElem.attr('x', textData.x);
   textElem.attr('y', textData.y);
-  textElem.attr('fill', textData.fill);
+  textElem.attr('class', 'legend');
+
   textElem.style('text-anchor', textData.anchor);
 
   if (typeof textData.class !== 'undefined') {

src/styles.js

@@ -30,6 +30,7 @@ const getStyles = (type, userStyles, options) => {
   return ` {
     font-family: ${options.fontFamily};
     font-size: ${options.fontSize};
+    fill: ${options.textColor}
   }
 
   /* Classes common for multiple diagrams */

src/themes/theme-dark.js

@@ -1,4 +1,4 @@
-import { lighten, rgba } from 'khroma';
+import { invert, lighten, rgba } from 'khroma';
 
 class Theme {
   constructor() {
@@ -6,7 +6,7 @@ class Theme {
     this.mainBkg = '#1f2020';
     this.secondBkg = 'calculated';
     this.mainContrastColor = 'lightgrey';
-    this.darkTextColor = '#323D47';
+    this.darkTextColor = lighten(invert('#323D47'), 10);
     this.lineColor = 'calculated';
     this.border1 = '#81B1DB';
     this.border2 = rgba(255, 255, 255, 0.25);

src/themes/theme-default.js

@@ -1,4 +1,4 @@
-import { rgba } from 'khroma';
+import { lighten, rgba } from 'khroma';
 
 class Theme {
   constructor() {
@@ -103,7 +103,8 @@ class Theme {
 
     /* Sequence Diagram variables */
 
-    this.actorBorder = this.border1;
+    // this.actorBorder = lighten(this.border1, 0.5);
+    this.actorBorder = lighten(this.border1, 23);
     this.actorBkg = this.mainBkg;
     this.labelBoxBkgColor = this.actorBkg;
     this.signalColor = this.textColor;