#1542 Base theme for simple custom themeing

src/diagrams/class/styles.js

@@ -1,9 +1,9 @@
 const getStyles = options =>
   `g.classGroup text {
   fill: ${options.nodeBorder};
+  fill: ${options.classText};
   stroke: none;
-  font-family: 'trebuchet ms', verdana, arial;
-  font-family: var(--mermaid-font-family);
+  font-family: ${options.fontFamily};
   font-size: 10px;
 
   .title {

src/diagrams/er/styles.js

@@ -1,5 +1,18 @@
-const getStyles = () =>
+Base theme for cusom themeingconst getStyles = options =>
   `
+  .entityBox {
+    fill: ${options.mainBkg};
+    stroke: ${options.nodeBorder};
+  }
+
+  .relationshipLabelBox {
+    fill: ${options.edgeLabelBackground};
+    fillopactity: 0;
+    background-color: ${options.edgeLabelBackground};
+      rect {
+        opacity: 0.5;
+      }
+  }
 `;
 
 export default getStyles;

src/diagrams/user-journey/journeyRenderer.js

@@ -232,12 +232,14 @@ export const drawTasks = function(diagram, tasks, verticalPos) {
   let sectionNumber = 0;
   let fill = '#CCC';
   let colour = 'black';
+  let num = 0;
 
   // Draw the tasks
   for (let i = 0; i < tasks.length; i++) {
     let task = tasks[i];
     if (lastSection !== task.section) {
       fill = fills[sectionNumber % fills.length];
+      num = sectionNumber % fills.length;
       colour = textColours[sectionNumber % textColours.length];
 
       const section = {
@@ -245,6 +247,7 @@ export const drawTasks = function(diagram, tasks, verticalPos) {
         y: 50,
         text: task.section,
         fill,
+        num,
         colour
       };
 
@@ -269,6 +272,7 @@ export const drawTasks = function(diagram, tasks, verticalPos) {
     task.height = conf.diagramMarginY;
     task.colour = colour;
     task.fill = fill;
+    task.num = num;
     task.actors = taskActors;
 
     // Draw the box with the attached line

src/diagrams/user-journey/styles.js

@@ -88,6 +88,31 @@ const getStyles = options =>
     pointer-events: none;
     z-index: 100;
   }
+
+  .task-type-0, .section-type-0  {
+    ${options.fillType0 ? `fill: ${options.fillType0}` : ''};
+  }
+  .task-type-1, .section-type-1  {
+    ${options.fillType0 ? `fill: ${options.fillType1}` : ''};
+  }
+  .task-type-2, .section-type-2  {
+    ${options.fillType0 ? `fill: ${options.fillType2}` : ''};
+  }
+  .task-type-3, .section-type-3  {
+    ${options.fillType0 ? `fill: ${options.fillType3}` : ''};
+  }
+  .task-type-4, .section-type-4  {
+    ${options.fillType0 ? `fill: ${options.fillType4}` : ''};
+  }
+  .task-type-5, .section-type-5  {
+    ${options.fillType0 ? `fill: ${options.fillType5}` : ''};
+  }
+  .task-type-6, .section-type-6  {
+    ${options.fillType0 ? `fill: ${options.fillType6}` : ''};
+  }
+  .task-type-7, .section-type-7  {
+    ${options.fillType0 ? `fill: ${options.fillType7}` : ''};
+  }
 `;
 
 export default getStyles;

src/diagrams/user-journey/svgDraw.js

@@ -187,7 +187,7 @@ export const drawSection = function(elem, section, conf) {
   rect.fill = section.fill;
   rect.width = conf.width;
   rect.height = conf.height;
-  rect.class = 'journey-section';
+  rect.class = 'journey-section section-type-' + section.num;
   rect.rx = 3;
   rect.ry = 3;
   drawRect(g, rect);
@@ -199,7 +199,7 @@ export const drawSection = function(elem, section, conf) {
     rect.y,
     rect.width,
     rect.height,
-    { class: 'journey-section' },
+    { class: 'journey-section section-type-' + section.num },
     conf,
     section.colour
   );
@@ -240,7 +240,7 @@ export const drawTask = function(elem, task, conf) {
   rect.fill = task.fill;
   rect.width = conf.width;
   rect.height = conf.height;
-  rect.class = 'task';
+  rect.class = 'task task-type-' + task.num;
   rect.rx = 3;
   rect.ry = 3;
   drawRect(g, rect);