diff --git a/packages/mermaid/src/diagrams/architecture/architectureStyles.ts b/packages/mermaid/src/diagrams/architecture/architectureStyles.ts
index c05f87ba9..7f494ecd1 100644
--- a/packages/mermaid/src/diagrams/architecture/architectureStyles.ts
+++ b/packages/mermaid/src/diagrams/architecture/architectureStyles.ts
@@ -4,8 +4,8 @@ import type { ArchitectureStyleOptions } from './architectureTypes.js';
 const getStyles: DiagramStylesProvider = (options: ArchitectureStyleOptions) =>
   `
   .edge {
-    stroke-width: ${options.archEdgeStrokeWidth};
-    stroke: ${options.archEdgeStrokeColor};
+    stroke-width: ${options.archEdgeWidth};
+    stroke: ${options.archEdgeColor};
     fill: none;
   }
 
@@ -15,8 +15,8 @@ const getStyles: DiagramStylesProvider = (options: ArchitectureStyleOptions) =>
 
   .node-bkg {
     fill: none;
-    stroke: ${options.archGroupBorderStrokeColor};
-    stroke-width: ${options.archGroupBorderStrokeWidth};
+    stroke: ${options.archGroupBorderColor};
+    stroke-width: ${options.archGroupBorderWidth};
     stroke-dasharray: 8;
   }
   .node-icon-text {
diff --git a/packages/mermaid/src/diagrams/architecture/architectureTypes.ts b/packages/mermaid/src/diagrams/architecture/architectureTypes.ts
index 2b5c7019f..b3ef55ec6 100644
--- a/packages/mermaid/src/diagrams/architecture/architectureTypes.ts
+++ b/packages/mermaid/src/diagrams/architecture/architectureTypes.ts
@@ -171,11 +171,11 @@ export const getArchitectureDirectionXYFactors = function (
 };
 
 export interface ArchitectureStyleOptions {
-  archEdgeStrokeColor: string;
+  archEdgeColor: string;
   archEdgeArrowColor: string;
-  archEdgeStrokeWidth: string;
-  archGroupBorderStrokeColor: string;
-  archGroupBorderStrokeWidth: string;
+  archEdgeWidth: string;
+  archGroupBorderColor: string;
+  archGroupBorderWidth: string;
 }
 
 export interface ArchitectureService {
diff --git a/packages/mermaid/src/themes/theme-base.js b/packages/mermaid/src/themes/theme-base.js
index 7b1312eae..6e572ea5f 100644
--- a/packages/mermaid/src/themes/theme-base.js
+++ b/packages/mermaid/src/themes/theme-base.js
@@ -221,11 +221,11 @@ class Theme {
     this.pieOpacity = this.pieOpacity || '0.7';
 
     /* architecture */
-    this.archEdgeStrokeColor = this.archEdgeStrokeColor || '#777';
+    this.archEdgeColor = this.archEdgeColor || '#777';
     this.archEdgeArrowColor = this.archEdgeArrowColor || '#777';
-    this.archEdgeStrokeWidth = this.archEdgeStrokeWidth || '3';
-    this.archGroupBorderStrokeColor = this.archGroupBorderStrokeColor || '#000';
-    this.archGroupBorderStrokeWidth = this.archGroupBorderStrokeWidth || '2px';
+    this.archEdgeWidth = this.archEdgeWidth || '3';
+    this.archGroupBorderColor = this.archGroupBorderColor || '#000';
+    this.archGroupBorderWidth = this.archGroupBorderWidth || '2px';
 
     /* quadrant-graph */
     this.quadrant1Fill = this.quadrant1Fill || this.primaryColor;
diff --git a/packages/mermaid/src/themes/theme-dark.js b/packages/mermaid/src/themes/theme-dark.js
index d956a7d55..cdb2eeffd 100644
--- a/packages/mermaid/src/themes/theme-dark.js
+++ b/packages/mermaid/src/themes/theme-dark.js
@@ -86,11 +86,11 @@ class Theme {
     this.personBkg = this.mainBkg;
 
     /* Architecture Diagram variables */
-    this.archEdgeStrokeColor = 'calculated';
+    this.archEdgeColor = 'calculated';
     this.archEdgeArrowColor = 'calculated';
-    this.archEdgeStrokeWidth = 'calculated';
-    this.archGroupBorderStrokeColor = '#FFF';
-    this.archGroupBorderStrokeWidth = 'calculated';
+    this.archEdgeWidth = '3';
+    this.archGroupBorderColor = this.primaryBorderColor;
+    this.archGroupBorderWidth = '2px';
 
     /* state colors */
     this.labelColor = 'calculated';
@@ -140,6 +140,10 @@ class Theme {
     this.doneTaskBkgColor = this.mainContrastColor;
     this.taskTextDarkColor = this.darkTextColor;
 
+    /* Architecture Diagram variables */
+    this.archEdgeColor = this.lineColor;
+    this.archEdgeArrowColor = this.lineColor;
+
     /* state colors */
     this.transitionColor = this.transitionColor || this.lineColor;
     this.transitionLabelColor = this.transitionLabelColor || this.textColor;
diff --git a/packages/mermaid/src/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js
index 35fa3d094..f2fbd955e 100644
--- a/packages/mermaid/src/themes/theme-default.js
+++ b/packages/mermaid/src/themes/theme-default.js
@@ -113,11 +113,11 @@ class Theme {
     this.personBkg = this.mainBkg;
 
     /* Architecture Diagram variables */
-    this.archEdgeStrokeColor = 'calculated';
+    this.archEdgeColor = 'calculated';
     this.archEdgeArrowColor = 'calculated';
-    this.archEdgeStrokeWidth = 'calculated';
-    this.archGroupBorderStrokeColor = 'calculated';
-    this.archGroupBorderStrokeWidth = 'calculated';
+    this.archEdgeWidth = '3';
+    this.archGroupBorderColor = this.primaryBorderColor;
+    this.archGroupBorderWidth = '2px';
 
     /* state colors */
     this.labelColor = 'black';
@@ -201,6 +201,10 @@ class Theme {
     this.taskTextColor = this.taskTextLightColor;
     this.taskTextOutsideColor = this.taskTextDarkColor;
 
+    /* Architecture Diagram variables */
+    this.archEdgeColor = this.lineColor;
+    this.archEdgeArrowColor = this.lineColor;
+
     /* state colors */
     this.transitionColor = this.transitionColor || this.lineColor;
     this.transitionLabelColor = this.transitionLabelColor || this.textColor;
diff --git a/packages/mermaid/src/themes/theme-forest.js b/packages/mermaid/src/themes/theme-forest.js
index 4bb7d2441..97c0682f3 100644
--- a/packages/mermaid/src/themes/theme-forest.js
+++ b/packages/mermaid/src/themes/theme-forest.js
@@ -86,6 +86,13 @@ class Theme {
     this.personBorder = this.primaryBorderColor;
     this.personBkg = this.mainBkg;
 
+    /* Architecture Diagram variables */
+    this.archEdgeColor = 'calculated';
+    this.archEdgeArrowColor = 'calculated';
+    this.archEdgeWidth = '3';
+    this.archGroupBorderColor = this.primaryBorderColor;
+    this.archGroupBorderWidth = '2px';
+
     /* state colors */
     this.labelColor = 'black';
 
@@ -162,6 +169,10 @@ class Theme {
     this.activeTaskBorderColor = this.taskBorderColor;
     this.activeTaskBkgColor = this.mainBkg;
 
+    /* Architecture Diagram variables */
+    this.archEdgeColor = this.lineColor;
+    this.archEdgeArrowColor = this.lineColor;
+
     /* state colors */
     this.transitionColor = this.transitionColor || this.lineColor;
     this.transitionLabelColor = this.transitionLabelColor || this.textColor;
diff --git a/packages/mermaid/src/themes/theme-neutral.js b/packages/mermaid/src/themes/theme-neutral.js
index 40963839e..4a622cbcc 100644
--- a/packages/mermaid/src/themes/theme-neutral.js
+++ b/packages/mermaid/src/themes/theme-neutral.js
@@ -98,6 +98,13 @@ class Theme {
     this.personBorder = this.primaryBorderColor;
     this.personBkg = this.mainBkg;
 
+    /* Architecture Diagram variables */
+    this.archEdgeColor = 'calculated';
+    this.archEdgeArrowColor = 'calculated';
+    this.archEdgeWidth = '3';
+    this.archGroupBorderColor = this.primaryBorderColor;
+    this.archGroupBorderWidth = '2px';
+
     /* state colors */
     this.labelColor = 'black';
 
@@ -199,6 +206,10 @@ class Theme {
 
     this.todayLineColor = this.critBkgColor;
 
+    /* Architecture Diagram variables */
+    this.archEdgeColor = this.lineColor;
+    this.archEdgeArrowColor = this.lineColor;
+
     /* state colors */
     this.transitionColor = this.transitionColor || '#000';
     this.transitionLabelColor = this.transitionLabelColor || this.textColor;