diff --git a/packages/mermaid/src/themes/theme-neo.js b/packages/mermaid/src/themes/theme-neo.js
index dc66095f4..f9d9f36fa 100644
--- a/packages/mermaid/src/themes/theme-neo.js
+++ b/packages/mermaid/src/themes/theme-neo.js
@@ -142,18 +142,21 @@ class Theme {
 
     /* Color Scale */
     /* Each color-set will have a background, a foreground and a border color */
-    this.cScale0 = this.cScale0 || this.primaryColor;
-    this.cScale1 = this.cScale1 || this.secondaryColor;
-    this.cScale2 = this.cScale2 || this.tertiaryColor;
-    this.cScale3 = this.cScale3 || adjust(this.primaryColor, { h: 30 });
-    this.cScale4 = this.cScale4 || adjust(this.primaryColor, { h: 60 });
-    this.cScale5 = this.cScale5 || adjust(this.primaryColor, { h: 90 });
-    this.cScale6 = this.cScale6 || adjust(this.primaryColor, { h: 120 });
-    this.cScale7 = this.cScale7 || adjust(this.primaryColor, { h: 150 });
-    this.cScale8 = this.cScale8 || adjust(this.primaryColor, { h: 210, l: 150 });
-    this.cScale9 = this.cScale9 || adjust(this.primaryColor, { h: 270 });
-    this.cScale10 = this.cScale10 || adjust(this.primaryColor, { h: 300 });
-    this.cScale11 = this.cScale11 || adjust(this.primaryColor, { h: 330 });
+    const primaryColor = '#ECECFE';
+    const secondaryColor = '#E9E9F1';
+    const tertiaryColor = adjust(primaryColor, { h: 180, l: 5 });
+    this.cScale0 = this.cScale0 || primaryColor;
+    this.cScale1 = this.cScale1 || secondaryColor;
+    this.cScale2 = this.cScale2 || tertiaryColor;
+    this.cScale3 = this.cScale3 || adjust(primaryColor, { h: 30 });
+    this.cScale4 = this.cScale4 || adjust(primaryColor, { h: 60 });
+    this.cScale5 = this.cScale5 || adjust(primaryColor, { h: 90 });
+    this.cScale6 = this.cScale6 || adjust(primaryColor, { h: 120 });
+    this.cScale7 = this.cScale7 || adjust(primaryColor, { h: 150 });
+    this.cScale8 = this.cScale8 || adjust(primaryColor, { h: 210, l: 150 });
+    this.cScale9 = this.cScale9 || adjust(primaryColor, { h: 270 });
+    this.cScale10 = this.cScale10 || adjust(primaryColor, { h: 300 });
+    this.cScale11 = this.cScale11 || adjust(primaryColor, { h: 330 });
     if (this.darkMode) {
       for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
         this['cScale' + i] = darken(this['cScale' + i], 75);
@@ -198,28 +201,28 @@ class Theme {
     this.classText = this.classText || this.textColor;
 
     /* user-journey */
-    this.fillType0 = this.fillType0 || this.primaryColor;
-    this.fillType1 = this.fillType1 || this.secondaryColor;
-    this.fillType2 = this.fillType2 || adjust(this.primaryColor, { h: 64 });
-    this.fillType3 = this.fillType3 || adjust(this.secondaryColor, { h: 64 });
-    this.fillType4 = this.fillType4 || adjust(this.primaryColor, { h: -64 });
-    this.fillType5 = this.fillType5 || adjust(this.secondaryColor, { h: -64 });
-    this.fillType6 = this.fillType6 || adjust(this.primaryColor, { h: 128 });
-    this.fillType7 = this.fillType7 || adjust(this.secondaryColor, { h: 128 });
+    this.fillType0 = this.fillType0 || primaryColor;
+    this.fillType1 = this.fillType1 || secondaryColor;
+    this.fillType2 = this.fillType2 || adjust(primaryColor, { h: 64 });
+    this.fillType3 = this.fillType3 || adjust(secondaryColor, { h: 64 });
+    this.fillType4 = this.fillType4 || adjust(primaryColor, { h: -64 });
+    this.fillType5 = this.fillType5 || adjust(secondaryColor, { h: -64 });
+    this.fillType6 = this.fillType6 || adjust(primaryColor, { h: 128 });
+    this.fillType7 = this.fillType7 || adjust(secondaryColor, { h: 128 });
 
     /* pie */
-    this.pie1 = this.pie1 || this.primaryColor;
-    this.pie2 = this.pie2 || this.secondaryColor;
-    this.pie3 = this.pie3 || this.tertiaryColor;
-    this.pie4 = this.pie4 || adjust(this.primaryColor, { l: -10 });
-    this.pie5 = this.pie5 || adjust(this.secondaryColor, { l: -10 });
-    this.pie6 = this.pie6 || adjust(this.tertiaryColor, { l: -10 });
-    this.pie7 = this.pie7 || adjust(this.primaryColor, { h: +60, l: -10 });
-    this.pie8 = this.pie8 || adjust(this.primaryColor, { h: -60, l: -10 });
-    this.pie9 = this.pie9 || adjust(this.primaryColor, { h: 120, l: 0 });
-    this.pie10 = this.pie10 || adjust(this.primaryColor, { h: +60, l: -20 });
-    this.pie11 = this.pie11 || adjust(this.primaryColor, { h: -60, l: -20 });
-    this.pie12 = this.pie12 || adjust(this.primaryColor, { h: 120, l: -10 });
+    this.pie1 = this.pie1 || primaryColor;
+    this.pie2 = this.pie2 || secondaryColor;
+    this.pie3 = this.pie3 || tertiaryColor;
+    this.pie4 = this.pie4 || adjust(primaryColor, { l: -10 });
+    this.pie5 = this.pie5 || adjust(secondaryColor, { l: -10 });
+    this.pie6 = this.pie6 || adjust(tertiaryColor, { l: -10 });
+    this.pie7 = this.pie7 || adjust(primaryColor, { h: +60, l: -10 });
+    this.pie8 = this.pie8 || adjust(primaryColor, { h: -60, l: -10 });
+    this.pie9 = this.pie9 || adjust(primaryColor, { h: 120, l: 0 });
+    this.pie10 = this.pie10 || adjust(primaryColor, { h: +60, l: -20 });
+    this.pie11 = this.pie11 || adjust(primaryColor, { h: -60, l: -20 });
+    this.pie12 = this.pie12 || adjust(primaryColor, { h: 120, l: -10 });
     this.pieTitleTextSize = this.pieTitleTextSize || '25px';
     this.pieTitleTextColor = this.pieTitleTextColor || this.taskTextDarkColor;
     this.pieSectionTextSize = this.pieSectionTextSize || '17px';
@@ -233,10 +236,10 @@ class Theme {
     this.pieOpacity = this.pieOpacity || '0.7';
 
     /* quadrant-graph */
-    this.quadrant1Fill = this.quadrant1Fill || this.primaryColor;
-    this.quadrant2Fill = this.quadrant2Fill || adjust(this.primaryColor, { r: 5, g: 5, b: 5 });
-    this.quadrant3Fill = this.quadrant3Fill || adjust(this.primaryColor, { r: 10, g: 10, b: 10 });
-    this.quadrant4Fill = this.quadrant4Fill || adjust(this.primaryColor, { r: 15, g: 15, b: 15 });
+    this.quadrant1Fill = this.quadrant1Fill || primaryColor;
+    this.quadrant2Fill = this.quadrant2Fill || adjust(primaryColor, { r: 5, g: 5, b: 5 });
+    this.quadrant3Fill = this.quadrant3Fill || adjust(primaryColor, { r: 10, g: 10, b: 10 });
+    this.quadrant4Fill = this.quadrant4Fill || adjust(primaryColor, { r: 15, g: 15, b: 15 });
     this.quadrant1TextFill = this.quadrant1TextFill || this.primaryTextColor;
     this.quadrant2TextFill =
       this.quadrant2TextFill || adjust(this.primaryTextColor, { r: -5, g: -5, b: -5 });
@@ -275,7 +278,7 @@ class Theme {
     };
 
     /* requirement-diagram */
-    this.requirementBackground = this.requirementBackground || this.primaryColor;
+    this.requirementBackground = this.requirementBackground || primaryColor;
     this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;
     this.requirementBorderSize = this.requirementBorderSize || '1';
     this.requirementTextColor = this.requirementTextColor || this.primaryTextColor;
@@ -286,14 +289,14 @@ class Theme {
     this.relationLabelColor = this.relationLabelColor || this.actorTextColor;
 
     /* git */
-    this.git0 = this.git0 || this.primaryColor;
-    this.git1 = this.git1 || this.secondaryColor;
-    this.git2 = this.git2 || this.tertiaryColor;
-    this.git3 = this.git3 || adjust(this.primaryColor, { h: -30 });
-    this.git4 = this.git4 || adjust(this.primaryColor, { h: -60 });
-    this.git5 = this.git5 || adjust(this.primaryColor, { h: -90 });
-    this.git6 = this.git6 || adjust(this.primaryColor, { h: +60 });
-    this.git7 = this.git7 || adjust(this.primaryColor, { h: +120 });
+    this.git0 = this.git0 || primaryColor;
+    this.git1 = this.git1 || secondaryColor;
+    this.git2 = this.git2 || tertiaryColor;
+    this.git3 = this.git3 || adjust(primaryColor, { h: -30 });
+    this.git4 = this.git4 || adjust(primaryColor, { h: -60 });
+    this.git5 = this.git5 || adjust(primaryColor, { h: -90 });
+    this.git6 = this.git6 || adjust(primaryColor, { h: +60 });
+    this.git7 = this.git7 || adjust(primaryColor, { h: +120 });
     if (this.darkMode) {
       this.git0 = lighten(this.git0, 25);
       this.git1 = lighten(this.git1, 25);