From 8aebaa4ca5df6c6fc00906a1939eb8cf11a99c80 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Mon, 19 Aug 2024 17:07:12 +0300
Subject: [PATCH] fix(editor): Fix edge button background color in dark mode in
 new canvas (no-changelog) (#10475)

---
 .../canvas/elements/edges/CanvasEdgeToolbar.vue          | 9 +++++++++
 1 file changed, 9 insertions(+)

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 acd164f5fe25a..fab32bf008b56 100644
--- a/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdgeToolbar.vue
+++ b/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdgeToolbar.vue
@@ -35,6 +35,7 @@ function onDelete() {
 	<div :class="classes" data-test-id="canvas-edge-toolbar">
 		<N8nIconButton
 			v-if="isAddButtonVisible"
+			class="canvas-edge-toolbar-button"
 			data-test-id="add-connection-button"
 			type="tertiary"
 			size="small"
@@ -44,6 +45,7 @@ function onDelete() {
 		/>
 		<N8nIconButton
 			data-test-id="delete-connection-button"
+			class="canvas-edge-toolbar-button"
 			type="tertiary"
 			size="small"
 			icon="trash"
@@ -62,3 +64,10 @@ function onDelete() {
 	pointer-events: all;
 }
 </style>
+
+<style lang="scss">
+[data-theme='dark'] .canvas-edge-toolbar-button {
+	--button-background-color: var(--color-background-base);
+	--button-hover-background-color: var(--color-background-light);
+}
+</style>