From a43d6f0c5ec653de60e24ce3ace3fda57611c297 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E0=A4=95=E0=A4=BE=E0=A4=B0=E0=A4=A4=E0=A5=8B=E0=A4=AB?=
 =?UTF-8?q?=E0=A5=8D=E0=A4=AB=E0=A5=87=E0=A4=B2=E0=A4=B8=E0=A5=8D=E0=A4=95?=
 =?UTF-8?q?=E0=A5=8D=E0=A4=B0=E0=A4=BF=E0=A4=AA=E0=A5=8D=E0=A4=9F=E2=84=A2?=
 <netroy@users.noreply.github.com>
Date: Thu, 27 Jun 2024 12:09:43 +0200
Subject: [PATCH] fix(LangChain Code Node): Fix icon in dark mode
 (no-changelog) (#9863)

Co-authored-by: Giulio Andreini <g.andreini@gmail.com>
---
 .../@n8n/nodes-langchain/nodes/code/Code.node.ts    |  1 +
 packages/design-system/src/css/_tokens.dark.scss    | 13 ++++++++-----
 .../nodes/EmailReadImap/v2/EmailReadImapV2.node.ts  |  1 +
 packages/workflow/src/Interfaces.ts                 |  8 +++++---
 4 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/packages/@n8n/nodes-langchain/nodes/code/Code.node.ts b/packages/@n8n/nodes-langchain/nodes/code/Code.node.ts
index 30c9f0735a..4f4d45c9dc 100644
--- a/packages/@n8n/nodes-langchain/nodes/code/Code.node.ts
+++ b/packages/@n8n/nodes-langchain/nodes/code/Code.node.ts
@@ -120,6 +120,7 @@ export class Code implements INodeType {
 		displayName: 'LangChain Code',
 		name: 'code',
 		icon: 'fa:code',
+		iconColor: 'black',
 		group: ['transform'],
 		version: 1,
 		description: 'LangChain Code Node',
diff --git a/packages/design-system/src/css/_tokens.dark.scss b/packages/design-system/src/css/_tokens.dark.scss
index 7d13e53982..982d82b257 100644
--- a/packages/design-system/src/css/_tokens.dark.scss
+++ b/packages/design-system/src/css/_tokens.dark.scss
@@ -79,16 +79,19 @@
 	--color-sticky-border-7: var(--prim-gray-670);
 
 	// NodeIcon
-	--color-node-icon-gray: var(--prim-gray-200);
-	--color-node-icon-black: var(--prim-gray-70);
-	--color-node-icon-blue: #766dfb;
-	--color-node-icon-dark-blue: #6275ad;
+	--color-node-icon-gray: var(--prim-gray-120);
+	--color-node-icon-black: var(--prim-gray-10);
+	--color-node-icon-blue: #898fff;
+	--color-node-icon-light-blue: #58abff;
+	--color-node-icon-dark-blue: #7ba7ff;
 	--color-node-icon-orange-red: var(--prim-color-primary);
+	--color-node-icon-pink-red: #f85d82;
 	--color-node-icon-red: var(--prim-color-alt-k);
 	--color-node-icon-light-green: #20b69e;
+	--color-node-icon-green: #38cb7a;
 	--color-node-icon-dark-green: #86decc;
 	--color-node-icon-purple: #9b6dd5;
-	--color-node-icon-crimson: #d05876;
+	--color-node-icon-crimson: #f188a2;
 
 	// Expressions, autocomplete, infobox
 	--color-valid-resolvable-foreground: var(--prim-color-alt-a-tint-300);
diff --git a/packages/nodes-base/nodes/EmailReadImap/v2/EmailReadImapV2.node.ts b/packages/nodes-base/nodes/EmailReadImap/v2/EmailReadImapV2.node.ts
index 2d0cee5f5f..768a86debc 100644
--- a/packages/nodes-base/nodes/EmailReadImap/v2/EmailReadImapV2.node.ts
+++ b/packages/nodes-base/nodes/EmailReadImap/v2/EmailReadImapV2.node.ts
@@ -67,6 +67,7 @@ const versionDescription: INodeTypeDescription = {
 	displayName: 'Email Trigger (IMAP)',
 	name: 'emailReadImap',
 	icon: 'fa:inbox',
+	iconColor: 'green',
 	group: ['trigger'],
 	version: 2,
 	description: 'Triggers the workflow when a new email is received',
diff --git a/packages/workflow/src/Interfaces.ts b/packages/workflow/src/Interfaces.ts
index d8d824db8f..564fc498ba 100644
--- a/packages/workflow/src/Interfaces.ts
+++ b/packages/workflow/src/Interfaces.ts
@@ -310,7 +310,7 @@ type ICredentialHttpRequestNode = {
 export interface ICredentialType {
 	name: string;
 	displayName: string;
-	icon?: Themed<Icon>;
+	icon?: Icon;
 	iconUrl?: Themed<string>;
 	extends?: string[];
 	properties: INodeProperties[];
@@ -1571,13 +1571,15 @@ export type NodeIconColor =
 	| 'azure'
 	| 'purple'
 	| 'crimson';
-export type Icon = `fa:${string}` | `file:${string}` | `node:${string}`;
 export type Themed<T> = T | { light: T; dark: T };
+export type IconRef = `fa:${string}` | `node:${string}.${string}`;
+export type IconFile = `file:${string}.png` | `file:${string}.svg`;
+export type Icon = IconRef | Themed<IconFile>;
 
 export interface INodeTypeBaseDescription {
 	displayName: string;
 	name: string;
-	icon?: Themed<Icon>;
+	icon?: Icon;
 	iconColor?: NodeIconColor;
 	iconUrl?: Themed<string>;
 	badgeIconUrl?: Themed<string>;