From 6895e75f700c9f99473174f5712e295559e9d522 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Fri, 3 Feb 2023 12:47:27 -0500
Subject: [PATCH] [v9.4.x] Canvas: Support color themes for arrows (#62896)

Canvas: Support color themes for arrows (#62829)

(cherry picked from commit db953c9a9cbb5ad7b13e571d14d130112c38d09a)

Co-authored-by: Drew Slobodnjak <60050885+drew08t@users.noreply.github.com>
---
 public/app/plugins/panel/canvas/ConnectionSVG.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/public/app/plugins/panel/canvas/ConnectionSVG.tsx b/public/app/plugins/panel/canvas/ConnectionSVG.tsx
index 31dc99e4755..63e98a7bc88 100644
--- a/public/app/plugins/panel/canvas/ConnectionSVG.tsx
+++ b/public/app/plugins/panel/canvas/ConnectionSVG.tsx
@@ -3,6 +3,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
+import { config } from 'app/core/config';
 import { CanvasConnection } from 'app/features/canvas/element';
 import { ElementState } from 'app/features/canvas/runtime/element';
 import { Scene } from 'app/features/canvas/runtime/scene';
@@ -23,6 +24,7 @@ export const ConnectionSVG = ({ setSVGRef, setLineRef, scene }: Props) => {
   const CONNECTION_LINE_ID = 'connectionLineId';
   const CONNECTION_HEAD_ID = useMemo(() => `head-${headId}`, [headId]);
   const EDITOR_HEAD_ID = useMemo(() => `editorHead-${headId}`, [headId]);
+  const defaultArrowColor = config.theme2.colors.text.primary;
 
   const [selectedConnection, setSelectedConnection] = useState<CanvasConnection | undefined>(undefined);
 
@@ -142,9 +144,9 @@ export const ConnectionSVG = ({ setSVGRef, setLineRef, scene }: Props) => {
                 refX="10"
                 refY="3.5"
                 orient="auto"
-                stroke="rgb(255,255,255)"
+                stroke={defaultArrowColor}
               >
-                <polygon points="0 0, 10 3.5, 0 7" fill="rgb(255,255,255)" />
+                <polygon points="0 0, 10 3.5, 0 7" fill={defaultArrowColor} />
               </marker>
             </defs>
             <line
@@ -160,7 +162,7 @@ export const ConnectionSVG = ({ setSVGRef, setLineRef, scene }: Props) => {
             />
             <line
               id={CONNECTION_LINE_ID}
-              stroke="rgb(255,255,255)"
+              stroke={defaultArrowColor}
               pointerEvents="auto"
               strokeWidth={2}
               markerEnd={`url(#${CONNECTION_HEAD_ID})`}
@@ -188,12 +190,12 @@ export const ConnectionSVG = ({ setSVGRef, setLineRef, scene }: Props) => {
             refX="10"
             refY="3.5"
             orient="auto"
-            stroke="rgb(255,255,255)"
+            stroke={defaultArrowColor}
           >
-            <polygon points="0 0, 10 3.5, 0 7" fill="rgb(255,255,255)" />
+            <polygon points="0 0, 10 3.5, 0 7" fill={defaultArrowColor} />
           </marker>
         </defs>
-        <line ref={setLineRef} stroke="rgb(255,255,255)" strokeWidth={2} markerEnd={`url(#${EDITOR_HEAD_ID})`} />
+        <line ref={setLineRef} stroke={defaultArrowColor} strokeWidth={2} markerEnd={`url(#${EDITOR_HEAD_ID})`} />
       </svg>
       {renderConnections()}
     </>