From d0986ace8ceb96db7d0701100d459bd9e0780394 Mon Sep 17 00:00:00 2001
From: yari-dewalt <yari.dewalt@gmail.com>
Date: Fri, 28 Feb 2025 11:05:16 -0800
Subject: [PATCH] Fix styling of erBox rows

---
 packages/mermaid/src/diagrams/er/styles.ts    |  2 +-
 .../rendering-elements/shapes/erBox.ts        | 19 ++++++++++++++++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/diagrams/er/styles.ts b/packages/mermaid/src/diagrams/er/styles.ts
index ecf8cc571..8ce468550 100644
--- a/packages/mermaid/src/diagrams/er/styles.ts
+++ b/packages/mermaid/src/diagrams/er/styles.ts
@@ -30,7 +30,7 @@ const getStyles = (options: FlowChartStyleOptions) =>
   }
 
   .labelBkg {
-    background-color: ${fade(options.edgeLabelBackground, 0.5)};
+    background-color: ${fade(options.tertiaryColor, 0.5)};
   }
 
   .edgeLabel .label {
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/erBox.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/erBox.ts
index 0815ab6c5..26aae412b 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/erBox.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/erBox.ts
@@ -142,7 +142,6 @@ export async function erBox<T extends SVGGraphicsElement>(parent: D3Selection<T>
       TEXT_PADDING;
     yOffsets.push(yOffset);
   }
-
   yOffsets.pop();
   let totalWidthSections = 4;
 
@@ -228,6 +227,24 @@ export async function erBox<T extends SVGGraphicsElement>(parent: D3Selection<T>
   const roughRect = rc.rectangle(x, y, w, h, options);
   const rect = shapeSvg.insert(() => roughRect, ':first-child').attr('style', cssStyles!.join(''));
 
+  const { themeVariables } = getConfig();
+  const { secondaryColor, tertiaryColor, nodeBorder } = themeVariables;
+
+  yOffsets.push(0);
+  // Draw row rects
+  for (const [i, yOffset] of yOffsets.entries()) {
+    const isEven = i % 2 === 0 && yOffset !== 0;
+    const roughRect = rc.rectangle(x, nameBBox.height + y + yOffset, w, nameBBox.height, {
+      ...options,
+      fill: isEven ? tertiaryColor : secondaryColor,
+      stroke: nodeBorder,
+    });
+    shapeSvg
+      .insert(() => roughRect, 'g.label')
+      .attr('style', cssStyles!.join(''))
+      .attr('class', `row-rect-${i % 2 === 0 ? 'even' : 'odd'}`);
+  }
+
   // Draw divider lines
   // Name line
   let roughLine = rc.line(x, nameBBox.height + y, w + x, nameBBox.height + y, options);