From c8dc7d9ab6a8a25793f85c828c82e00a69268ccd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ra=C3=BAl=20G=C3=B3mez=20Morales?= <raul00gm@gmail.com>
Date: Mon, 25 Aug 2025 08:25:07 +0200
Subject: [PATCH] fix(editor): Add fallback color for NodeItem Icons (#18607)

---
 .../Node/NodeCreator/ItemTypes/NodeItem.vue     | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/editor-ui/src/components/Node/NodeCreator/ItemTypes/NodeItem.vue b/packages/frontend/editor-ui/src/components/Node/NodeCreator/ItemTypes/NodeItem.vue
index bb4e2323b0..1287645177 100644
--- a/packages/frontend/editor-ui/src/components/Node/NodeCreator/ItemTypes/NodeItem.vue
+++ b/packages/frontend/editor-ui/src/components/Node/NodeCreator/ItemTypes/NodeItem.vue
@@ -18,9 +18,9 @@ import { useNodeType } from '@/composables/useNodeType';
 import { useTelemetry } from '@/composables/useTelemetry';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { N8nTooltip } from '@n8n/design-system';
+import { useI18n } from '@n8n/i18n';
 import { useActions } from '../composables/useActions';
 import { useViewStacks } from '../composables/useViewStacks';
-import { useI18n } from '@n8n/i18n';
 import { isNodePreviewKey, removePreviewToken, shouldShowCommunityNodeDetails } from '../utils';
 
 export interface Props {
@@ -179,7 +179,11 @@ function onCommunityNodeTooltipClick(event: MouseEvent) {
 	>
 		<template #icon>
 			<div v-if="isSubNodeType" :class="$style.subNodeBackground"></div>
-			<NodeIcon :class="$style.nodeIcon" :node-type="nodeType" />
+			<NodeIcon
+				:class="$style.nodeIcon"
+				:node-type="nodeType"
+				color-default="var(--color-foreground-xdark)"
+			/>
 		</template>
 
 		<template v-if="isOfficial" #extraDetails>
@@ -222,7 +226,13 @@ function onCommunityNodeTooltipClick(event: MouseEvent) {
 				:class="$style.draggable"
 				:style="draggableStyle"
 			>
-				<NodeIcon :node-type="nodeType" :size="40" :shrink="false" @click.capture.stop />
+				<NodeIcon
+					:node-type="nodeType"
+					:size="40"
+					:shrink="false"
+					@click.capture.stop
+					color-default="var(--color-foreground-xdark)"
+				/>
 			</div>
 		</template>
 	</N8nNodeCreatorNode>
@@ -232,7 +242,6 @@ function onCommunityNodeTooltipClick(event: MouseEvent) {
 .nodeItem {
 	--trigger-icon-background-color: #{$trigger-icon-background-color};
 	--trigger-icon-border-color: #{$trigger-icon-border-color};
-	--canvas-node-icon-color: var(--color-foreground-xdark);
 	margin-left: 15px;
 	margin-right: 12px;
 	user-select: none;