fix(editor): Make connector buttons background opaque when dark mode …

…is enabled system-wide (#13180)
n8n-io · Feb 12, 2025 · 77be25d · 77be25d
1 parent 9324e4f
commit 77be25d
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 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
@@ -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
@@ -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;
 }