From 77be25d337e32f2bb32e191ee579f30d0442b537 Mon Sep 17 00:00:00 2001
From: autologie <suguru@n8n.io>
Date: Wed, 12 Feb 2025 09:05:42 +0100
Subject: [PATCH] fix(editor): Make connector buttons background opaque when
 dark mode is enabled system-wide (#13180)

---
 .../components/canvas/elements/edges/CanvasEdge.vue  |  6 +++---
 .../canvas/elements/edges/CanvasEdgeToolbar.vue      | 12 +++++++++++-
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue b/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue
index 4233bcd26f0..385ef7f834e 100644
--- a/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue
+++ b/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue
@@ -76,12 +76,12 @@ const edgeStyle = computed(() => ({
 	...props.style,
 	...(isMainConnection.value ? {} : { strokeDasharray: '8,8' }),
 	strokeWidth: 2,
-	stroke: props.hovered ? 'var(--color-primary)' : edgeColor.value,
+	stroke: delayedHovered.value ? 'var(--color-primary)' : edgeColor.value,
 }));
 
 const edgeClasses = computed(() => ({
 	[$style.edge]: true,
-	hovered: props.hovered,
+	hovered: delayedHovered.value,
 	'bring-to-front': props.bringToFront,
 }));
 
@@ -94,7 +94,7 @@ const isConnectorStraight = computed(() => renderData.value.isConnectorStraight)
 
 const edgeToolbarStyle = computed(() => ({
 	transform: `translate(-50%, -50%) translate(${labelPosition.value[0]}px, ${labelPosition.value[1]}px)`,
-	...(props.hovered ? { zIndex: 1 } : {}),
+	...(delayedHovered.value ? { zIndex: 1 } : {}),
 }));
 
 const edgeToolbarClasses = computed(() => ({
diff --git a/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdgeToolbar.vue b/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdgeToolbar.vue
index cf487042d5e..efc43f1a227 100644
--- a/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdgeToolbar.vue
+++ b/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdgeToolbar.vue
@@ -66,11 +66,21 @@ function onDelete() {
 </style>
 
 <style lang="scss">
-[data-theme='dark'] .canvas-edge-toolbar-button {
+@mixin dark-button-styles {
 	--button-background-color: var(--color-background-base);
 	--button-hover-background-color: var(--color-background-light);
 }
 
+@media (prefers-color-scheme: dark) {
+	body:not([data-theme]) .canvas-edge-toolbar-button {
+		@include dark-button-styles();
+	}
+}
+
+[data-theme='dark'] .canvas-edge-toolbar-button {
+	@include dark-button-styles();
+}
+
 .canvas-edge-toolbar-button {
 	border-width: 2px;
 }