diff --git a/v4/assets/sass/_articles.scss b/v4/assets/sass/_articles.scss
index e97d32d59..1e0dcdef3 100644
--- a/v4/assets/sass/_articles.scss
+++ b/v4/assets/sass/_articles.scss
@@ -11,7 +11,7 @@ article {
         content: "";
         display: block;
         border: 11px solid transparent;
-        border-right-color: $con-line-colorB;
+        border-right-color: $connection-dot-color;
         position: absolute;
         top: 49px;
         left: -22px;
@@ -21,7 +21,7 @@ article {
         content: "";
         display: block;
         border: 10px solid transparent;
-        border-right-color: #con-line-colorA;
+        border-right-color: $connection-line-color;
         position: absolute;
         top: 50px;
         left: -20px;
diff --git a/v4/assets/sass/_main.scss b/v4/assets/sass/_main.scss
index 44fc967fb..812b031c9 100644
--- a/v4/assets/sass/_main.scss
+++ b/v4/assets/sass/_main.scss
@@ -10,7 +10,7 @@
         bottom: 50px;
         width: 2px;
         height: 100%;
-        background: $con-line-colorA;
+        background: $connection-line-color;
         z-index: 1;
     }
 
@@ -22,7 +22,7 @@
         bottom: 32px;
         height: 20px;
         width: 20px;
-        background: $con-line-colorB;
+        background: $connection-dot-color;
         border-radius: 999px;
         z-index: 10;
     }
diff --git a/v4/assets/sass/dark-theme.scss b/v4/assets/sass/dark-theme.scss
index b86847a57..6071d6c87 100644
--- a/v4/assets/sass/dark-theme.scss
+++ b/v4/assets/sass/dark-theme.scss
@@ -28,8 +28,8 @@ $logo-color: {{ .Param "logoColor" | default "darken(#f1f1f1, 60)" }};
 $bubble-color: {{ .Param "bubbleColor" | default "$logo-color" }};
 $bubble-background-color: {{ .Param "bubbleBackgroundColor" | default "#373737" }};
 $bubble-hover-color: {{ .Param "bubbleHoverColor" | default "$highlight-color" }};
-$con-line-colorA: {{ .Param "conLineColorA" | default "rgba(invert(#000),0.05)" }};
-$con-line-colorB: {{ .Param "conLineColorB" | default "#444" }};
+$connection-line-color: {{ .Param "connectionLineColor" | default "rgba(invert(#000),0.05)" }};
+$connection-dot-color: {{ .Param "connectionDotColor" | default "#444" }};
 
 $article-background-color: {{ .Param "articleBackgroundColor" | default "#222" }};
 $meta-text-color: {{ .Param "metaTextColor" | default "darken(#f1f1f1,40)" }};
diff --git a/v4/assets/sass/theme.scss b/v4/assets/sass/theme.scss
index cf02a99a4..349783543 100644
--- a/v4/assets/sass/theme.scss
+++ b/v4/assets/sass/theme.scss
@@ -28,8 +28,8 @@ $logo-color: {{ .Param "logoColor" | default "darken($page-background-color, 1)"
 $bubble-color: {{ .Param "bubbleColor" | default "#fff" }};
 $bubble-background-color: {{ .Param "bubbleBackgroundColor" | default "#ccc" }};
 $bubble-hover-color: {{ .Param "bubbleHoverColor" | default "$highlight-color" }};
-$con-line-colorA: {{ .Param "conLineColorA" | default "rgba(#000,0.05)" }};
-$con-line-colorB: {{ .Param "conLineColorB" | default "#ddd" }};
+$connection-line-color: {{ .Param "connectionLineColor" | default "rgba(#000,0.05)" }};
+$connection-dot-color: {{ .Param "connectionDotColor" | default "#ddd" }};
 
 $article-background-color: {{ .Param "articleBackgroundColor" | default "#fff" }};
 $meta-text-color: {{ .Param "metaTextColor" | default "#999" }};