diff --git a/packages/@n8n/nodes-langchain/nodes/agents/Agent/Agent.node.ts b/packages/@n8n/nodes-langchain/nodes/agents/Agent/Agent.node.ts
index e4843f356c..828dd1309e 100644
--- a/packages/@n8n/nodes-langchain/nodes/agents/Agent/Agent.node.ts
+++ b/packages/@n8n/nodes-langchain/nodes/agents/Agent/Agent.node.ts
@@ -235,6 +235,7 @@ export class Agent implements INodeType {
displayName: 'AI Agent',
name: 'agent',
icon: 'fa:robot',
+ iconColor: 'black',
group: ['transform'],
version: [1, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6],
description: 'Generates an action plan and executes it. Can use external tools.',
diff --git a/packages/@n8n/nodes-langchain/nodes/embeddings/EmbeddingsOpenAI/EmbeddingsOpenAi.node.ts b/packages/@n8n/nodes-langchain/nodes/embeddings/EmbeddingsOpenAI/EmbeddingsOpenAi.node.ts
index fa43876299..31180cd1e9 100644
--- a/packages/@n8n/nodes-langchain/nodes/embeddings/EmbeddingsOpenAI/EmbeddingsOpenAi.node.ts
+++ b/packages/@n8n/nodes-langchain/nodes/embeddings/EmbeddingsOpenAI/EmbeddingsOpenAi.node.ts
@@ -71,7 +71,7 @@ export class EmbeddingsOpenAi implements INodeType {
description: INodeTypeDescription = {
displayName: 'Embeddings OpenAI',
name: 'embeddingsOpenAi',
- icon: 'file:openAi.svg',
+ icon: { light: 'file:openAiLight.svg', dark: 'file:openAiLight.dark.svg' },
credentials: [
{
name: 'openAiApi',
diff --git a/packages/@n8n/nodes-langchain/nodes/embeddings/EmbeddingsOpenAI/openAi.svg b/packages/@n8n/nodes-langchain/nodes/embeddings/EmbeddingsOpenAI/openAi.svg
deleted file mode 100644
index 73d7895782..0000000000
--- a/packages/@n8n/nodes-langchain/nodes/embeddings/EmbeddingsOpenAI/openAi.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/packages/@n8n/nodes-langchain/nodes/embeddings/EmbeddingsOpenAI/openAiLight.dark.svg b/packages/@n8n/nodes-langchain/nodes/embeddings/EmbeddingsOpenAI/openAiLight.dark.svg
new file mode 100644
index 0000000000..ceaa2c40b3
--- /dev/null
+++ b/packages/@n8n/nodes-langchain/nodes/embeddings/EmbeddingsOpenAI/openAiLight.dark.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/@n8n/nodes-langchain/nodes/embeddings/EmbeddingsOpenAI/openAiLight.svg b/packages/@n8n/nodes-langchain/nodes/embeddings/EmbeddingsOpenAI/openAiLight.svg
new file mode 100644
index 0000000000..c8a79cebab
--- /dev/null
+++ b/packages/@n8n/nodes-langchain/nodes/embeddings/EmbeddingsOpenAI/openAiLight.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/@n8n/nodes-langchain/nodes/llms/LMChatOpenAi/LmChatOpenAi.node.ts b/packages/@n8n/nodes-langchain/nodes/llms/LMChatOpenAi/LmChatOpenAi.node.ts
index 42bb08aaea..5cf188e752 100644
--- a/packages/@n8n/nodes-langchain/nodes/llms/LMChatOpenAi/LmChatOpenAi.node.ts
+++ b/packages/@n8n/nodes-langchain/nodes/llms/LMChatOpenAi/LmChatOpenAi.node.ts
@@ -16,7 +16,7 @@ export class LmChatOpenAi implements INodeType {
displayName: 'OpenAI Chat Model',
// eslint-disable-next-line n8n-nodes-base/node-class-description-name-miscased
name: 'lmChatOpenAi',
- icon: 'file:openAi.svg',
+ icon: { light: 'file:openAiLight.svg', dark: 'file:openAiLight.dark.svg' },
group: ['transform'],
version: 1,
description: 'For advanced usage with an AI chain',
diff --git a/packages/@n8n/nodes-langchain/nodes/llms/LMChatOpenAi/openAi.svg b/packages/@n8n/nodes-langchain/nodes/llms/LMChatOpenAi/openAi.svg
deleted file mode 100644
index 73d7895782..0000000000
--- a/packages/@n8n/nodes-langchain/nodes/llms/LMChatOpenAi/openAi.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/packages/@n8n/nodes-langchain/nodes/llms/LMChatOpenAi/openAiLight.dark.svg b/packages/@n8n/nodes-langchain/nodes/llms/LMChatOpenAi/openAiLight.dark.svg
new file mode 100644
index 0000000000..ceaa2c40b3
--- /dev/null
+++ b/packages/@n8n/nodes-langchain/nodes/llms/LMChatOpenAi/openAiLight.dark.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/@n8n/nodes-langchain/nodes/llms/LMChatOpenAi/openAiLight.svg b/packages/@n8n/nodes-langchain/nodes/llms/LMChatOpenAi/openAiLight.svg
new file mode 100644
index 0000000000..c8a79cebab
--- /dev/null
+++ b/packages/@n8n/nodes-langchain/nodes/llms/LMChatOpenAi/openAiLight.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/@n8n/nodes-langchain/nodes/llms/LMOpenAi/LmOpenAi.node.ts b/packages/@n8n/nodes-langchain/nodes/llms/LMOpenAi/LmOpenAi.node.ts
index 70b8970cc2..3f2d1c4315 100644
--- a/packages/@n8n/nodes-langchain/nodes/llms/LMOpenAi/LmOpenAi.node.ts
+++ b/packages/@n8n/nodes-langchain/nodes/llms/LMOpenAi/LmOpenAi.node.ts
@@ -28,7 +28,7 @@ export class LmOpenAi implements INodeType {
displayName: 'OpenAI Model',
// eslint-disable-next-line n8n-nodes-base/node-class-description-name-miscased
name: 'lmOpenAi',
- icon: 'file:openAi.svg',
+ icon: { light: 'file:openAiLight.svg', dark: 'file:openAiLight.dark.svg' },
group: ['transform'],
version: 1,
description: 'For advanced usage with an AI chain',
diff --git a/packages/@n8n/nodes-langchain/nodes/llms/LMOpenAi/openAi.svg b/packages/@n8n/nodes-langchain/nodes/llms/LMOpenAi/openAi.svg
deleted file mode 100644
index 73d7895782..0000000000
--- a/packages/@n8n/nodes-langchain/nodes/llms/LMOpenAi/openAi.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/packages/@n8n/nodes-langchain/nodes/llms/LMOpenAi/openAiLight.dark.svg b/packages/@n8n/nodes-langchain/nodes/llms/LMOpenAi/openAiLight.dark.svg
new file mode 100644
index 0000000000..ceaa2c40b3
--- /dev/null
+++ b/packages/@n8n/nodes-langchain/nodes/llms/LMOpenAi/openAiLight.dark.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/@n8n/nodes-langchain/nodes/llms/LMOpenAi/openAiLight.svg b/packages/@n8n/nodes-langchain/nodes/llms/LMOpenAi/openAiLight.svg
new file mode 100644
index 0000000000..c8a79cebab
--- /dev/null
+++ b/packages/@n8n/nodes-langchain/nodes/llms/LMOpenAi/openAiLight.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/@n8n/nodes-langchain/nodes/memory/MemoryManager/MemoryManager.node.ts b/packages/@n8n/nodes-langchain/nodes/memory/MemoryManager/MemoryManager.node.ts
index 83918616c1..04d6035e7f 100644
--- a/packages/@n8n/nodes-langchain/nodes/memory/MemoryManager/MemoryManager.node.ts
+++ b/packages/@n8n/nodes-langchain/nodes/memory/MemoryManager/MemoryManager.node.ts
@@ -68,6 +68,7 @@ export class MemoryManager implements INodeType {
displayName: 'Chat Memory Manager',
name: 'memoryManager',
icon: 'fa:database',
+ iconColor: 'black',
group: ['transform'],
version: [1, 1.1],
description: 'Manage chat messages memory and use it in the workflow',
diff --git a/packages/@n8n/nodes-langchain/nodes/trigger/ChatTrigger/ChatTrigger.node.ts b/packages/@n8n/nodes-langchain/nodes/trigger/ChatTrigger/ChatTrigger.node.ts
index cf00bb2d82..8e3c6aefd4 100644
--- a/packages/@n8n/nodes-langchain/nodes/trigger/ChatTrigger/ChatTrigger.node.ts
+++ b/packages/@n8n/nodes-langchain/nodes/trigger/ChatTrigger/ChatTrigger.node.ts
@@ -19,6 +19,7 @@ export class ChatTrigger implements INodeType {
displayName: 'Chat Trigger',
name: 'chatTrigger',
icon: 'fa:comments',
+ iconColor: 'black',
group: ['trigger'],
version: 1,
description: 'Runs the workflow when an n8n generated webchat is submitted',
diff --git a/packages/@n8n/nodes-langchain/nodes/vector_store/shared/createVectorStoreNode.ts b/packages/@n8n/nodes-langchain/nodes/vector_store/shared/createVectorStoreNode.ts
index 7eb40d6371..39617d873d 100644
--- a/packages/@n8n/nodes-langchain/nodes/vector_store/shared/createVectorStoreNode.ts
+++ b/packages/@n8n/nodes-langchain/nodes/vector_store/shared/createVectorStoreNode.ts
@@ -12,6 +12,7 @@ import type {
INodeType,
ILoadOptionsFunctions,
INodeListSearchResult,
+ Icon,
} from 'n8n-workflow';
import type { Embeddings } from '@langchain/core/embeddings';
import type { Document } from '@langchain/core/documents';
@@ -27,7 +28,7 @@ interface NodeMeta {
name: string;
description: string;
docsUrl: string;
- icon: string;
+ icon: Icon;
credentials?: INodeCredentialDescription[];
}
interface VectorStoreNodeConstructorArgs {
diff --git a/packages/@n8n/nodes-langchain/nodes/vendors/OpenAi/actions/versionDescription.ts b/packages/@n8n/nodes-langchain/nodes/vendors/OpenAi/actions/versionDescription.ts
index 3c8aa518f7..2ed98f89f9 100644
--- a/packages/@n8n/nodes-langchain/nodes/vendors/OpenAi/actions/versionDescription.ts
+++ b/packages/@n8n/nodes-langchain/nodes/vendors/OpenAi/actions/versionDescription.ts
@@ -67,7 +67,7 @@ const configureNodeInputs = (resource: string, operation: string, hideTools: str
export const versionDescription: INodeTypeDescription = {
displayName: 'OpenAI',
name: 'openAi',
- icon: 'file:openAi.svg',
+ icon: { light: 'file:openAi.svg', dark: 'file:openAi.dark.svg' },
group: ['transform'],
version: [1, 1.1, 1.2, 1.3],
subtitle: `={{(${prettifyOperation})($parameter.resource, $parameter.operation)}}`,
diff --git a/packages/@n8n/nodes-langchain/nodes/vendors/OpenAi/openAi.dark.svg b/packages/@n8n/nodes-langchain/nodes/vendors/OpenAi/openAi.dark.svg
new file mode 100644
index 0000000000..afc9e5cb6a
--- /dev/null
+++ b/packages/@n8n/nodes-langchain/nodes/vendors/OpenAi/openAi.dark.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/@n8n/nodes-langchain/nodes/vendors/OpenAi/openAi.svg b/packages/@n8n/nodes-langchain/nodes/vendors/OpenAi/openAi.svg
index 4f8812da72..1a25faf77d 100644
--- a/packages/@n8n/nodes-langchain/nodes/vendors/OpenAi/openAi.svg
+++ b/packages/@n8n/nodes-langchain/nodes/vendors/OpenAi/openAi.svg
@@ -1 +1,3 @@
-
\ No newline at end of file
+
diff --git a/packages/core/src/DirectoryLoader.ts b/packages/core/src/DirectoryLoader.ts
index 698076c07c..77c107ef73 100644
--- a/packages/core/src/DirectoryLoader.ts
+++ b/packages/core/src/DirectoryLoader.ts
@@ -101,11 +101,11 @@ export abstract class DirectoryLoader {
tempNode.description.name = fullNodeName;
- this.fixIconPath(tempNode.description, filePath);
+ this.fixIconPaths(tempNode.description, filePath);
if ('nodeVersions' in tempNode) {
for (const versionNode of Object.values(tempNode.nodeVersions)) {
- this.fixIconPath(versionNode.description, filePath);
+ this.fixIconPaths(versionNode.description, filePath);
}
for (const version of Object.values(tempNode.nodeVersions)) {
@@ -169,7 +169,7 @@ export abstract class DirectoryLoader {
// include the credential type in the predefined credentials (HTTP node)
Object.assign(tempCredential, { toJSON });
- this.fixIconPath(tempCredential, filePath);
+ this.fixIconPaths(tempCredential, filePath);
} catch (e) {
if (e instanceof TypeError) {
throw new ApplicationError(
@@ -281,14 +281,29 @@ export abstract class DirectoryLoader {
}
}
- private fixIconPath(
+ private getIconPath(icon: string, filePath: string) {
+ const iconPath = path.join(path.dirname(filePath), icon.replace('file:', ''));
+ const relativePath = path.relative(this.directory, iconPath);
+ return `icons/${this.packageName}/${relativePath}`;
+ }
+
+ private fixIconPaths(
obj: INodeTypeDescription | INodeTypeBaseDescription | ICredentialType,
filePath: string,
) {
- if (obj.icon?.startsWith('file:')) {
- const iconPath = path.join(path.dirname(filePath), obj.icon.substring(5));
- const relativePath = path.relative(this.directory, iconPath);
- obj.iconUrl = `icons/${this.packageName}/${relativePath}`;
+ const { icon } = obj;
+ if (!icon) return;
+
+ if (typeof icon === 'string') {
+ if (icon.startsWith('file:')) {
+ obj.iconUrl = this.getIconPath(icon, filePath);
+ delete obj.icon;
+ }
+ } else if (icon.light.startsWith('file:') && icon.dark.startsWith('file:')) {
+ obj.iconUrl = {
+ light: this.getIconPath(icon.light, filePath),
+ dark: this.getIconPath(icon.dark, filePath),
+ };
delete obj.icon;
}
}
diff --git a/packages/design-system/src/components/N8nNodeIcon/NodeIcon.vue b/packages/design-system/src/components/N8nNodeIcon/NodeIcon.vue
index 86fa08b8b5..7ba2287fe6 100644
--- a/packages/design-system/src/components/N8nNodeIcon/NodeIcon.vue
+++ b/packages/design-system/src/components/N8nNodeIcon/NodeIcon.vue
@@ -83,7 +83,7 @@ const badgeSize = computed((): number => {
return 10;
case 18:
default:
- return 8;
+ return 12;
}
});
@@ -142,9 +142,10 @@ const badgeStyleData = computed((): Record => {
text-align: center;
}
.nodeIconImage {
- width: 100%;
max-width: 100%;
max-height: 100%;
+ width: auto;
+ height: auto;
}
.badge {
diff --git a/packages/design-system/src/css/_tokens.dark.scss b/packages/design-system/src/css/_tokens.dark.scss
index 44ee54404f..4b8288cc42 100644
--- a/packages/design-system/src/css/_tokens.dark.scss
+++ b/packages/design-system/src/css/_tokens.dark.scss
@@ -47,7 +47,7 @@
--color-canvas-background-l: 18%;
--color-canvas-dot: var(--prim-gray-670);
--color-canvas-read-only-line: var(--prim-gray-800);
- --color-canvas-node-background: var(--prim-gray-40);
+ --color-canvas-node-background: var(--prim-gray-740);
--color-canvas-node-pinned-border: var(--prim-color-secondary-tint-100);
--color-canvas-selected: var(--prim-gray-0-alpha-025);
--node-type-main-color: var(--prim-gray-420);
@@ -74,6 +74,18 @@
--color-sticky-background-7: var(--prim-gray-740);
--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-orange-red: var(--prim-color-primary);
+ --color-node-icon-red: var(--prim-color-alt-k);
+ --color-node-icon-light-green: #20b69e;
+ --color-node-icon-dark-green: #86decc;
+ --color-node-icon-purple: #9b6dd5;
+ --color-node-icon-crimson: #d05876;
+
// Expressions, autocomplete, infobox
--color-valid-resolvable-foreground: var(--prim-color-alt-a-tint-300);
--color-valid-resolvable-background: var(--prim-color-alt-a-alpha-025);
@@ -222,6 +234,175 @@
--color-mfa-recovery-code-color: var(--color-text-dark);
--color-mfa-lose-access-text-color: var(--color-danger);
+ // AI
+ --node-type-background-l: 20%;
+ --node-type-supplemental-label-color-h: 235;
+ --node-type-supplemental-label-color-s: 28%;
+ --node-type-supplemental-label-color-l: 40%;
+ --node-type-supplemental-color-h: 235;
+ --node-type-supplemental-color-s: 13%;
+ --node-type-supplemental-color-l: 60%;
+ --node-type-supplemental-label-color: hsl(
+ var(--node-type-supplemental-label-color-h),
+ var(--node-type-supplemental-label-color-s),
+ var(--node-type-supplemental-label-color-l)
+ );
+ --node-type-supplemental-icon: var(--color-foreground-dark);
+ --node-type-supplemental-color: hsl(
+ var(--node-type-supplemental-color-h),
+ var(--node-type-supplemental-color-s),
+ var(--node-type-supplemental-color-l)
+ );
+ --node-type-supplemental-background: hsl(
+ var(--node-type-supplemental-color-h),
+ var(--node-type-supplemental-color-s),
+ var(--node-type-background-l)
+ );
+ --node-type-supplemental-connector-color: var(--color-foreground-dark);
+ --node-type-ai_chain-color-h: var(--node-type-supplemental-color-h);
+ --node-type-ai_chain-color-s: var(--node-type-supplemental-color-s);
+ --node-type-ai_chain-color-l: var(--node-type-supplemental-color-l);
+ --node-type-ai_chain-color: hsl(
+ var(--node-type-ai_chain-color-h),
+ var(--node-type-ai_chain-color-s),
+ var(--node-type-ai_chain-color-l)
+ );
+ --node-type-chain-background: hsl(
+ var(--node-type-ai_chain-color-h),
+ var(--node-type-ai_chain-color-s),
+ var(--node-type-background-l)
+ );
+ --node-type-ai_document-color-h: var(--node-type-supplemental-color-h);
+ --node-type-ai_document-color-s: var(--node-type-supplemental-color-s);
+ --node-type-ai_document-color-l: var(--node-type-supplemental-color-l);
+ --node-type-ai_document-color: hsl(
+ var(--node-type-ai_document-color-h),
+ var(--node-type-ai_document-color-s),
+ var(--node-type-ai_document-color-l)
+ );
+ --node-type-ai_document-background: hsl(
+ var(--node-type-ai_document-color-h),
+ var(--node-type-ai_document-color-s),
+ var(--node-type-background-l)
+ );
+ --node-type-ai_embedding-color-h: var(--node-type-supplemental-color-h);
+ --node-type-ai_embedding-color-s: var(--node-type-supplemental-color-s);
+ --node-type-ai_embedding-color-l: var(--node-type-supplemental-color-l);
+ --node-type-ai_embedding-color: hsl(
+ var(--node-type-ai_embedding-color-h),
+ var(--node-type-ai_embedding-color-s),
+ var(--node-type-ai_embedding-color-l)
+ );
+ --node-type-ai_embedding-background: hsl(
+ var(--node-type-ai_embedding-color-h),
+ var(--node-type-ai_embedding-color-s),
+ var(--node-type-background-l)
+ );
+ --node-type-ai_languageModel-color-h: var(--node-type-supplemental-color-h);
+ --node-type-ai_languageModel-color-s: var(--node-type-supplemental-color-s);
+ --node-type-ai_languageModel-color-l: var(--node-type-supplemental-color-l);
+ --node-type-ai_languageModel-color: hsl(
+ var(--node-type-ai_languageModel-color-h),
+ var(--node-type-ai_languageModel-color-s),
+ var(--node-type-ai_languageModel-color-l)
+ );
+ --node-type-ai_languageModel-background: hsl(
+ var(--node-type-ai_languageModel-color-h),
+ var(--node-type-ai_languageModel-color-s),
+ var(--node-type-background-l)
+ );
+ --node-type-ai_memory-color-h: var(--node-type-supplemental-color-h);
+ --node-type-ai_memory-color-s: var(--node-type-supplemental-color-s);
+ --node-type-ai_memory-color-l: var(--node-type-supplemental-color-l);
+ --node-type-ai_memory-color: hsl(
+ var(--node-type-ai_memory-color-h),
+ var(--node-type-ai_memory-color-s),
+ var(--node-type-ai_memory-color-l)
+ );
+ --node-type-ai_memory-background: hsl(
+ var(--node-type-ai_memory-color-h),
+ var(--node-type-ai_memory-color-s),
+ var(--node-type-background-l)
+ );
+ --node-type-ai_outputParser-color-h: var(--node-type-supplemental-color-h);
+ --node-type-ai_outputParser-color-s: var(--node-type-supplemental-color-s);
+ --node-type-ai_outputParser-color-l: var(--node-type-supplemental-color-l);
+ --node-type-ai_outputParser-color: hsl(
+ var(--node-type-ai_outputParser-color-h),
+ var(--node-type-ai_outputParser-color-s),
+ var(--node-type-ai_outputParser-color-l)
+ );
+ --node-type-ai_outputParser-background: hsl(
+ var(--node-type-ai_outputParser-color-h),
+ var(--node-type-ai_outputParser-color-s),
+ var(--node-type-background-l)
+ );
+ --node-type-ai_tool-color-h: var(--node-type-supplemental-color-h);
+ --node-type-ai_tool-color-s: var(--node-type-supplemental-color-s);
+ --node-type-ai_tool-color-l: var(--node-type-supplemental-color-l);
+ --node-type-ai_tool-color: hsl(
+ var(--node-type-ai_tool-color-h),
+ var(--node-type-ai_tool-color-s),
+ var(--node-type-ai_tool-color-l)
+ );
+ --node-type-ai_tool-background: hsl(
+ var(--node-type-ai_tool-color-h),
+ var(--node-type-ai_tool-color-s),
+ var(--node-type-background-l)
+ );
+ --node-type-ai_retriever-color-h: var(--node-type-supplemental-color-h);
+ --node-type-ai_retriever-color-s: var(--node-type-supplemental-color-s);
+ --node-type-ai_retriever-color-l: var(--node-type-supplemental-color-l);
+ --node-type-ai_retriever-color: hsl(
+ var(--node-type-ai_retriever-color-h),
+ var(--node-type-ai_retriever-color-s),
+ var(--node-type-ai_retriever-color-l)
+ );
+ --node-type-ai_retriever-background: hsl(
+ var(--node-type-ai_retriever-color-h),
+ var(--node-type-ai_retriever-color-s),
+ var(--node-type-background-l)
+ );
+ --node-type-ai_textSplitter-color-h: var(--node-type-supplemental-color-h);
+ --node-type-ai_textSplitter-color-s: var(--node-type-supplemental-color-s);
+ --node-type-ai_textSplitter-color-l: var(--node-type-supplemental-color-l);
+ --node-type-ai_textSplitter-color: hsl(
+ var(--node-type-ai_textSplitter-color-h),
+ var(--node-type-ai_textSplitter-color-s),
+ var(--node-type-ai_textSplitter-color-l)
+ );
+ --node-type-ai_textSplitter-background: hsl(
+ var(--node-type-ai_textSplitter-color-h),
+ var(--node-type-ai_textSplitter-color-s),
+ var(--node-type-background-l)
+ );
+ --node-type-ai_vectorRetriever-color-h: var(--node-type-supplemental-color-h);
+ --node-type-ai_vectorRetriever-color-s: var(--node-type-supplemental-color-s);
+ --node-type-ai_vectorRetriever-color-l: var(--node-type-supplemental-color-l);
+ --node-type-ai_vectorRetriever-color: hsl(
+ var(--node-type-ai_vectorRetriever-color-h),
+ var(--node-type-ai_vectorRetriever-color-s),
+ var(--node-type-ai_vectorRetriever-color-l)
+ );
+ --node-type-ai_vectorRetriever-background: hsl(
+ var(--node-type-ai_vectorRetriever-color-h),
+ var(--node-type-ai_vectorRetriever-color-s),
+ var(--node-type-background-l)
+ );
+ --node-type-ai_vectorStore-color-h: var(--node-type-supplemental-color-h);
+ --node-type-ai_vectorStore-color-s: var(--node-type-supplemental-color-s);
+ --node-type-ai_vectorStore-color-l: var(--node-type-supplemental-color-l);
+ --node-type-ai_vectorStore-color: hsl(
+ var(--node-type-ai_vectorStore-color-h),
+ var(--node-type-ai_vectorStore-color-s),
+ var(--node-type-ai_vectorStore-color-l)
+ );
+ --node-type-ai_vectorStore-background: hsl(
+ var(--node-type-ai_vectorStore-color-h),
+ var(--node-type-ai_vectorStore-color-s),
+ var(--node-type-background-l)
+ );
+
// Various
--color-info-tint-1: var(--prim-gray-420);
--color-info-tint-2: var(--prim-gray-740);
@@ -234,7 +415,7 @@
var(--node-type-supplemental-label-color-s),
var(--node-type-supplemental-label-color-l)
);
- --color-configurable-node-name: var(--color-text-lighter);
+ --color-configurable-node-name: var(--color-text-dark);
--color-secondary-link: var(--prim-color-secondary-tint-200);
--color-secondary-link-hover: var(--prim-color-secondary-tint-100);
}
diff --git a/packages/design-system/src/css/_tokens.scss b/packages/design-system/src/css/_tokens.scss
index 0b2940f015..11bff5141b 100644
--- a/packages/design-system/src/css/_tokens.scss
+++ b/packages/design-system/src/css/_tokens.scss
@@ -79,7 +79,7 @@
--color-canvas-background-l: 99%;
--color-canvas-dot: var(--prim-gray-120);
--color-canvas-read-only-line: var(--prim-gray-30);
- --color-canvas-node-background: var(--prim-gray-0);
+ --color-canvas-node-background: var(--color-background-xlight);
--color-canvas-node-pinned-border: var(--color-secondary);
--color-canvas-selected: var(--prim-gray-70);
--node-type-main-color: var(--prim-gray-490);
@@ -106,6 +106,23 @@
--color-sticky-background-7: var(--prim-gray-10);
--color-sticky-border-7: var(--prim-gray-120);
+ // NodeIcon
+ --color-node-icon-gray: var(--prim-gray-420);
+ --color-node-icon-black: var(--prim-gray-780);
+ --color-node-icon-blue: #3a42e9;
+ --color-node-icon-light-blue: #5fabf7;
+ --color-node-icon-dark-blue: #353f6e;
+ --color-node-icon-orange: #ff965a;
+ --color-node-icon-orange-red: #ff6d5a;
+ --color-node-icon-pink-red: #ea4b71;
+ --color-node-icon-red: var(--prim-color-alt-c);
+ --color-node-icon-light-green: #31c4ab;
+ --color-node-icon-green: #108e49;
+ --color-node-icon-dark-green: #157562;
+ --color-node-icon-azure: #54b8c9;
+ --color-node-icon-purple: #553399;
+ --color-node-icon-crimson: #772244;
+
// Expressions, autocomplete, infobox
--color-valid-resolvable-foreground: var(--prim-color-alt-a);
--color-valid-resolvable-background: var(--prim-color-alt-a-tint-500);
@@ -282,6 +299,175 @@
--color-mfa-recovery-code-color: var(--prim-gray-490);
--color-mfa-lose-access-text-color: var(--color-danger);
+ // AI
+ --node-type-background-l: 95%;
+ --node-type-supplemental-label-color-h: 235;
+ --node-type-supplemental-label-color-s: 28%;
+ --node-type-supplemental-label-color-l: 40%;
+ --node-type-supplemental-color-h: 235;
+ --node-type-supplemental-color-s: 28%;
+ --node-type-supplemental-color-l: 60%;
+ --node-type-supplemental-label-color: hsl(
+ var(--node-type-supplemental-label-color-h),
+ var(--node-type-supplemental-label-color-s),
+ var(--node-type-supplemental-label-color-l)
+ );
+ --node-type-supplemental-icon: var(--color-foreground-dark);
+ --node-type-supplemental-color: hsl(
+ var(--node-type-supplemental-color-h),
+ var(--node-type-supplemental-color-s),
+ var(--node-type-supplemental-color-l)
+ );
+ --node-type-supplemental-background: hsl(
+ var(--node-type-supplemental-color-h),
+ var(--node-type-supplemental-color-s),
+ var(--node-type-background-l)
+ );
+ --node-type-supplemental-connector-color: var(--color-foreground-dark);
+ --node-type-ai_chain-color-h: var(--node-type-supplemental-color-h);
+ --node-type-ai_chain-color-s: var(--node-type-supplemental-color-s);
+ --node-type-ai_chain-color-l: var(--node-type-supplemental-color-l);
+ --node-type-ai_chain-color: hsl(
+ var(--node-type-ai_chain-color-h),
+ var(--node-type-ai_chain-color-s),
+ var(--node-type-ai_chain-color-l)
+ );
+ --node-type-chain-background: hsl(
+ var(--node-type-ai_chain-color-h),
+ var(--node-type-ai_chain-color-s),
+ var(--node-type-background-l)
+ );
+ --node-type-ai_document-color-h: var(--node-type-supplemental-color-h);
+ --node-type-ai_document-color-s: var(--node-type-supplemental-color-s);
+ --node-type-ai_document-color-l: var(--node-type-supplemental-color-l);
+ --node-type-ai_document-color: hsl(
+ var(--node-type-ai_document-color-h),
+ var(--node-type-ai_document-color-s),
+ var(--node-type-ai_document-color-l)
+ );
+ --node-type-ai_document-background: hsl(
+ var(--node-type-ai_document-color-h),
+ var(--node-type-ai_document-color-s),
+ var(--node-type-background-l)
+ );
+ --node-type-ai_embedding-color-h: var(--node-type-supplemental-color-h);
+ --node-type-ai_embedding-color-s: var(--node-type-supplemental-color-s);
+ --node-type-ai_embedding-color-l: var(--node-type-supplemental-color-l);
+ --node-type-ai_embedding-color: hsl(
+ var(--node-type-ai_embedding-color-h),
+ var(--node-type-ai_embedding-color-s),
+ var(--node-type-ai_embedding-color-l)
+ );
+ --node-type-ai_embedding-background: hsl(
+ var(--node-type-ai_embedding-color-h),
+ var(--node-type-ai_embedding-color-s),
+ var(--node-type-background-l)
+ );
+ --node-type-ai_languageModel-color-h: var(--node-type-supplemental-color-h);
+ --node-type-ai_languageModel-color-s: var(--node-type-supplemental-color-s);
+ --node-type-ai_languageModel-color-l: var(--node-type-supplemental-color-l);
+ --node-type-ai_languageModel-color: hsl(
+ var(--node-type-ai_languageModel-color-h),
+ var(--node-type-ai_languageModel-color-s),
+ var(--node-type-ai_languageModel-color-l)
+ );
+ --node-type-ai_languageModel-background: hsl(
+ var(--node-type-ai_languageModel-color-h),
+ var(--node-type-ai_languageModel-color-s),
+ var(--node-type-background-l)
+ );
+ --node-type-ai_memory-color-h: var(--node-type-supplemental-color-h);
+ --node-type-ai_memory-color-s: var(--node-type-supplemental-color-s);
+ --node-type-ai_memory-color-l: var(--node-type-supplemental-color-l);
+ --node-type-ai_memory-color: hsl(
+ var(--node-type-ai_memory-color-h),
+ var(--node-type-ai_memory-color-s),
+ var(--node-type-ai_memory-color-l)
+ );
+ --node-type-ai_memory-background: hsl(
+ var(--node-type-ai_memory-color-h),
+ var(--node-type-ai_memory-color-s),
+ var(--node-type-background-l)
+ );
+ --node-type-ai_outputParser-color-h: var(--node-type-supplemental-color-h);
+ --node-type-ai_outputParser-color-s: var(--node-type-supplemental-color-s);
+ --node-type-ai_outputParser-color-l: var(--node-type-supplemental-color-l);
+ --node-type-ai_outputParser-color: hsl(
+ var(--node-type-ai_outputParser-color-h),
+ var(--node-type-ai_outputParser-color-s),
+ var(--node-type-ai_outputParser-color-l)
+ );
+ --node-type-ai_outputParser-background: hsl(
+ var(--node-type-ai_outputParser-color-h),
+ var(--node-type-ai_outputParser-color-s),
+ var(--node-type-background-l)
+ );
+ --node-type-ai_tool-color-h: var(--node-type-supplemental-color-h);
+ --node-type-ai_tool-color-s: var(--node-type-supplemental-color-s);
+ --node-type-ai_tool-color-l: var(--node-type-supplemental-color-l);
+ --node-type-ai_tool-color: hsl(
+ var(--node-type-ai_tool-color-h),
+ var(--node-type-ai_tool-color-s),
+ var(--node-type-ai_tool-color-l)
+ );
+ --node-type-ai_tool-background: hsl(
+ var(--node-type-ai_tool-color-h),
+ var(--node-type-ai_tool-color-s),
+ var(--node-type-background-l)
+ );
+ --node-type-ai_retriever-color-h: var(--node-type-supplemental-color-h);
+ --node-type-ai_retriever-color-s: var(--node-type-supplemental-color-s);
+ --node-type-ai_retriever-color-l: var(--node-type-supplemental-color-l);
+ --node-type-ai_retriever-color: hsl(
+ var(--node-type-ai_retriever-color-h),
+ var(--node-type-ai_retriever-color-s),
+ var(--node-type-ai_retriever-color-l)
+ );
+ --node-type-ai_retriever-background: hsl(
+ var(--node-type-ai_retriever-color-h),
+ var(--node-type-ai_retriever-color-s),
+ var(--node-type-background-l)
+ );
+ --node-type-ai_textSplitter-color-h: var(--node-type-supplemental-color-h);
+ --node-type-ai_textSplitter-color-s: var(--node-type-supplemental-color-s);
+ --node-type-ai_textSplitter-color-l: var(--node-type-supplemental-color-l);
+ --node-type-ai_textSplitter-color: hsl(
+ var(--node-type-ai_textSplitter-color-h),
+ var(--node-type-ai_textSplitter-color-s),
+ var(--node-type-ai_textSplitter-color-l)
+ );
+ --node-type-ai_textSplitter-background: hsl(
+ var(--node-type-ai_textSplitter-color-h),
+ var(--node-type-ai_textSplitter-color-s),
+ var(--node-type-background-l)
+ );
+ --node-type-ai_vectorRetriever-color-h: var(--node-type-supplemental-color-h);
+ --node-type-ai_vectorRetriever-color-s: var(--node-type-supplemental-color-s);
+ --node-type-ai_vectorRetriever-color-l: var(--node-type-supplemental-color-l);
+ --node-type-ai_vectorRetriever-color: hsl(
+ var(--node-type-ai_vectorRetriever-color-h),
+ var(--node-type-ai_vectorRetriever-color-s),
+ var(--node-type-ai_vectorRetriever-color-l)
+ );
+ --node-type-ai_vectorRetriever-background: hsl(
+ var(--node-type-ai_vectorRetriever-color-h),
+ var(--node-type-ai_vectorRetriever-color-s),
+ var(--node-type-background-l)
+ );
+ --node-type-ai_vectorStore-color-h: var(--node-type-supplemental-color-h);
+ --node-type-ai_vectorStore-color-s: var(--node-type-supplemental-color-s);
+ --node-type-ai_vectorStore-color-l: var(--node-type-supplemental-color-l);
+ --node-type-ai_vectorStore-color: hsl(
+ var(--node-type-ai_vectorStore-color-h),
+ var(--node-type-ai_vectorStore-color-s),
+ var(--node-type-ai_vectorStore-color-l)
+ );
+ --node-type-ai_vectorStore-background: hsl(
+ var(--node-type-ai_vectorStore-color-h),
+ var(--node-type-ai_vectorStore-color-s),
+ var(--node-type-background-l)
+ );
+
// Various
--color-avatar-accent-1: var(--prim-gray-120);
--color-avatar-accent-2: var(--prim-color-alt-e-shade-100);
diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index f3d536cc4f..b08d3ab4a5 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -930,6 +930,7 @@ export type SimplifiedNodeType = Pick<
| 'group'
| 'icon'
| 'iconUrl'
+ | 'iconColor'
| 'badgeIconUrl'
| 'codex'
| 'defaults'
diff --git a/packages/editor-ui/src/components/CredentialIcon.vue b/packages/editor-ui/src/components/CredentialIcon.vue
index 43cdcd32fb..038c5c1f40 100644
--- a/packages/editor-ui/src/components/CredentialIcon.vue
+++ b/packages/editor-ui/src/components/CredentialIcon.vue
@@ -15,6 +15,8 @@ import { useRootStore } from '@/stores/n8nRoot.store';
import { useNodeTypesStore } from '@/stores/nodeTypes.store';
import type { ICredentialType, INodeTypeDescription } from 'n8n-workflow';
import NodeIcon from '@/components/NodeIcon.vue';
+import { getThemedValue } from '@/utils/nodeTypesUtils';
+import { useUIStore } from '@/stores/ui.store';
export default defineComponent({
components: {
@@ -26,22 +28,28 @@ export default defineComponent({
},
},
computed: {
- ...mapStores(useCredentialsStore, useNodeTypesStore, useRootStore),
+ ...mapStores(useCredentialsStore, useNodeTypesStore, useRootStore, useUIStore),
credentialWithIcon(): ICredentialType | null {
return this.credentialTypeName ? this.getCredentialWithIcon(this.credentialTypeName) : null;
},
filePath(): string | null {
- const iconUrl = this.credentialWithIcon?.iconUrl;
- if (!iconUrl) {
+ const themeIconUrl = getThemedValue(
+ this.credentialWithIcon?.iconUrl,
+ this.uiStore.appliedTheme,
+ );
+
+ if (!themeIconUrl) {
return null;
}
- return this.rootStore.getBaseUrl + iconUrl;
+
+ return this.rootStore.getBaseUrl + themeIconUrl;
},
relevantNode(): INodeTypeDescription | null {
- if (this.credentialWithIcon?.icon?.startsWith('node:')) {
- const nodeType = this.credentialWithIcon.icon.replace('node:', '');
+ const icon = this.credentialWithIcon?.icon;
+ if (typeof icon === 'string' && icon.startsWith('node:')) {
+ const nodeType = icon.replace('node:', '');
return this.nodeTypesStore.getNodeType(nodeType);
}
if (!this.credentialTypeName) {
diff --git a/packages/editor-ui/src/components/NDVFloatingNodes.vue b/packages/editor-ui/src/components/NDVFloatingNodes.vue
index f7abf5f1e1..fd1aa2d054 100644
--- a/packages/editor-ui/src/components/NDVFloatingNodes.vue
+++ b/packages/editor-ui/src/components/NDVFloatingNodes.vue
@@ -121,7 +121,7 @@ const tooltipPositionMapper = {
[FloatingNodePosition.top]: 'bottom',
[FloatingNodePosition.right]: 'left',
[FloatingNodePosition.left]: 'right',
-};
+} as const;
onMounted(() => {
document.addEventListener('keydown', onKeyDown, true);
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/composables/useActionsGeneration.ts b/packages/editor-ui/src/components/Node/NodeCreator/composables/useActionsGeneration.ts
index 1c5cf66952..7385100141 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/composables/useActionsGeneration.ts
+++ b/packages/editor-ui/src/components/Node/NodeCreator/composables/useActionsGeneration.ts
@@ -254,6 +254,7 @@ export function useActionsGenerator() {
group,
icon,
iconUrl,
+ iconColor,
badgeIconUrl,
outputs,
codex,
@@ -266,6 +267,7 @@ export function useActionsGenerator() {
name,
group,
icon,
+ iconColor,
iconUrl,
badgeIconUrl,
outputs,
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/viewsData.ts b/packages/editor-ui/src/components/Node/NodeCreator/viewsData.ts
index d97a7329b8..d0f3d7fd15 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/viewsData.ts
+++ b/packages/editor-ui/src/components/Node/NodeCreator/viewsData.ts
@@ -123,13 +123,7 @@ function getAiNodesBySubcategory(nodes: INodeTypeDescription[], subcategory: str
description: node.description,
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
icon: node.icon!,
- iconData: node.name.toLowerCase().includes('openai')
- ? {
- type: 'file',
- icon: 'openai',
- fileBuffer: '/static/open-ai.svg',
- }
- : undefined,
+ iconUrl: node.iconUrl,
},
}))
.sort((a, b) => a.properties.displayName.localeCompare(b.properties.displayName));
diff --git a/packages/editor-ui/src/components/NodeIcon.vue b/packages/editor-ui/src/components/NodeIcon.vue
index f438111e71..47dba118c2 100644
--- a/packages/editor-ui/src/components/NodeIcon.vue
+++ b/packages/editor-ui/src/components/NodeIcon.vue
@@ -1,6 +1,6 @@
$emit('click')"
+ @click="emit('click')"
>
-
-
+
diff --git a/packages/editor-ui/src/n8n-theme.scss b/packages/editor-ui/src/n8n-theme.scss
index 7893d0610d..802f8f4bc2 100644
--- a/packages/editor-ui/src/n8n-theme.scss
+++ b/packages/editor-ui/src/n8n-theme.scss
@@ -2,175 +2,6 @@
@import 'styles';
:root {
- --node-type-background-l: 95%;
-
- --node-type-supplemental-label-color-h: 235;
- --node-type-supplemental-label-color-s: 28%;
- --node-type-supplemental-label-color-l: 40%;
- --node-type-supplemental-label-color: hsl(
- var(--node-type-supplemental-label-color-h),
- var(--node-type-supplemental-label-color-s),
- var(--node-type-supplemental-label-color-l)
- );
- --node-type-supplemental-color-h: 235;
- --node-type-supplemental-color-s: 28%;
- --node-type-supplemental-color-l: 60%;
- --node-type-supplemental-icon: var(--color-foreground-dark);
- --node-type-supplemental-color: hsl(
- var(--node-type-supplemental-color-h),
- var(--node-type-supplemental-color-s),
- var(--node-type-supplemental-color-l)
- );
- --node-type-supplemental-background: hsl(
- var(--node-type-supplemental-color-h),
- var(--node-type-supplemental-color-s),
- var(--node-type-background-l)
- );
- --node-type-supplemental-connector-color: var(--color-foreground-dark);
- --node-type-ai_chain-color-h: var(--node-type-supplemental-color-h);
- --node-type-ai_chain-color-s: var(--node-type-supplemental-color-s);
- --node-type-ai_chain-color-l: var(--node-type-supplemental-color-l);
- --node-type-ai_chain-color: hsl(
- var(--node-type-ai_chain-color-h),
- var(--node-type-ai_chain-color-s),
- var(--node-type-ai_chain-color-l)
- );
- --node-type-chain-background: hsl(
- var(--node-type-ai_chain-color-h),
- var(--node-type-ai_chain-color-s),
- var(--node-type-background-l)
- );
- --node-type-ai_document-color-h: var(--node-type-supplemental-color-h);
- --node-type-ai_document-color-s: var(--node-type-supplemental-color-s);
- --node-type-ai_document-color-l: var(--node-type-supplemental-color-l);
- --node-type-ai_document-color: hsl(
- var(--node-type-ai_document-color-h),
- var(--node-type-ai_document-color-s),
- var(--node-type-ai_document-color-l)
- );
- --node-type-ai_document-background: hsl(
- var(--node-type-ai_document-color-h),
- var(--node-type-ai_document-color-s),
- var(--node-type-background-l)
- );
- --node-type-ai_embedding-color-h: var(--node-type-supplemental-color-h);
- --node-type-ai_embedding-color-s: var(--node-type-supplemental-color-s);
- --node-type-ai_embedding-color-l: var(--node-type-supplemental-color-l);
- --node-type-ai_embedding-color: hsl(
- var(--node-type-ai_embedding-color-h),
- var(--node-type-ai_embedding-color-s),
- var(--node-type-ai_embedding-color-l)
- );
- --node-type-ai_embedding-background: hsl(
- var(--node-type-ai_embedding-color-h),
- var(--node-type-ai_embedding-color-s),
- var(--node-type-background-l)
- );
- --node-type-ai_languageModel-color-h: var(--node-type-supplemental-color-h);
- --node-type-ai_languageModel-color-s: var(--node-type-supplemental-color-s);
- --node-type-ai_languageModel-color-l: var(--node-type-supplemental-color-l);
- --node-type-ai_languageModel-color: hsl(
- var(--node-type-ai_languageModel-color-h),
- var(--node-type-ai_languageModel-color-s),
- var(--node-type-ai_languageModel-color-l)
- );
- --node-type-ai_languageModel-background: hsl(
- var(--node-type-ai_languageModel-color-h),
- var(--node-type-ai_languageModel-color-s),
- var(--node-type-background-l)
- );
- --node-type-ai_memory-color-h: var(--node-type-supplemental-color-h);
- --node-type-ai_memory-color-s: var(--node-type-supplemental-color-s);
- --node-type-ai_memory-color-l: var(--node-type-supplemental-color-l);
- --node-type-ai_memory-color: hsl(
- var(--node-type-ai_memory-color-h),
- var(--node-type-ai_memory-color-s),
- var(--node-type-ai_memory-color-l)
- );
- --node-type-ai_memory-background: hsl(
- var(--node-type-ai_memory-color-h),
- var(--node-type-ai_memory-color-s),
- var(--node-type-background-l)
- );
- --node-type-ai_outputParser-color-h: var(--node-type-supplemental-color-h);
- --node-type-ai_outputParser-color-s: var(--node-type-supplemental-color-s);
- --node-type-ai_outputParser-color-l: var(--node-type-supplemental-color-l);
- --node-type-ai_outputParser-color: hsl(
- var(--node-type-ai_outputParser-color-h),
- var(--node-type-ai_outputParser-color-s),
- var(--node-type-ai_outputParser-color-l)
- );
- --node-type-ai_outputParser-background: hsl(
- var(--node-type-ai_outputParser-color-h),
- var(--node-type-ai_outputParser-color-s),
- var(--node-type-background-l)
- );
- --node-type-ai_tool-color-h: var(--node-type-supplemental-color-h);
- --node-type-ai_tool-color-s: var(--node-type-supplemental-color-s);
- --node-type-ai_tool-color-l: var(--node-type-supplemental-color-l);
- --node-type-ai_tool-color: hsl(
- var(--node-type-ai_tool-color-h),
- var(--node-type-ai_tool-color-s),
- var(--node-type-ai_tool-color-l)
- );
- --node-type-ai_tool-background: hsl(
- var(--node-type-ai_tool-color-h),
- var(--node-type-ai_tool-color-s),
- var(--node-type-background-l)
- );
- --node-type-ai_retriever-color-h: var(--node-type-supplemental-color-h);
- --node-type-ai_retriever-color-s: var(--node-type-supplemental-color-s);
- --node-type-ai_retriever-color-l: var(--node-type-supplemental-color-l);
- --node-type-ai_retriever-color: hsl(
- var(--node-type-ai_retriever-color-h),
- var(--node-type-ai_retriever-color-s),
- var(--node-type-ai_retriever-color-l)
- );
- --node-type-ai_retriever-background: hsl(
- var(--node-type-ai_retriever-color-h),
- var(--node-type-ai_retriever-color-s),
- var(--node-type-background-l)
- );
- --node-type-ai_textSplitter-color-h: var(--node-type-supplemental-color-h);
- --node-type-ai_textSplitter-color-s: var(--node-type-supplemental-color-s);
- --node-type-ai_textSplitter-color-l: var(--node-type-supplemental-color-l);
- --node-type-ai_textSplitter-color: hsl(
- var(--node-type-ai_textSplitter-color-h),
- var(--node-type-ai_textSplitter-color-s),
- var(--node-type-ai_textSplitter-color-l)
- );
- --node-type-ai_textSplitter-background: hsl(
- var(--node-type-ai_textSplitter-color-h),
- var(--node-type-ai_textSplitter-color-s),
- var(--node-type-background-l)
- );
- --node-type-ai_vectorRetriever-color-h: var(--node-type-supplemental-color-h);
- --node-type-ai_vectorRetriever-color-s: var(--node-type-supplemental-color-s);
- --node-type-ai_vectorRetriever-color-l: var(--node-type-supplemental-color-l);
- --node-type-ai_vectorRetriever-color: hsl(
- var(--node-type-ai_vectorRetriever-color-h),
- var(--node-type-ai_vectorRetriever-color-s),
- var(--node-type-ai_vectorRetriever-color-l)
- );
- --node-type-ai_vectorRetriever-background: hsl(
- var(--node-type-ai_vectorRetriever-color-h),
- var(--node-type-ai_vectorRetriever-color-s),
- var(--node-type-background-l)
- );
- --node-type-ai_vectorStore-color-h: var(--node-type-supplemental-color-h);
- --node-type-ai_vectorStore-color-s: var(--node-type-supplemental-color-s);
- --node-type-ai_vectorStore-color-l: var(--node-type-supplemental-color-l);
- --node-type-ai_vectorStore-color: hsl(
- var(--node-type-ai_vectorStore-color-h),
- var(--node-type-ai_vectorStore-color-s),
- var(--node-type-ai_vectorStore-color-l)
- );
- --node-type-ai_vectorStore-background: hsl(
- var(--node-type-ai_vectorStore-color-h),
- var(--node-type-ai_vectorStore-color-s),
- var(--node-type-background-l)
- );
-
// Using native css variable enables us to use this value in JS
--header-height: 65;
--chat-width: 350;
@@ -187,6 +18,7 @@
--chat--header--color: var(--color-text-dark);
--chat--header--border-bottom: var(--border-base);
--chat--close--button--color-hover: var(--color-primary);
+
// Message styles
--chat--message--padding: var(--spacing-3xs);
--chat--message--font-size: 14px;
@@ -196,6 +28,7 @@
--chat--message--user--color: var(--color-text-dark);
--chat--message--user--background: var(--color-success-tint-1);
--chat--message--user--border: 1px solid var(--color-success-light-2);
+
// Chat input
--chat--input--font-size: var(--font-size-s);
--chat--input--send--button--color: var(--color-success);
diff --git a/packages/editor-ui/src/utils/nodeTypesUtils.ts b/packages/editor-ui/src/utils/nodeTypesUtils.ts
index 285817b209..16ef6db925 100644
--- a/packages/editor-ui/src/utils/nodeTypesUtils.ts
+++ b/packages/editor-ui/src/utils/nodeTypesUtils.ts
@@ -1,31 +1,34 @@
import type {
- INodeCredentialDescription,
+ AppliedThemeOption,
+ INodeUi,
+ INodeUpdatePropertiesInformation,
+ ITemplatesNode,
+ IVersionNode,
+ NodeAuthenticationOption,
+} from '@/Interface';
+import {
+ CORE_NODES_CATEGORY,
+ MAIN_AUTH_FIELD_NAME,
+ MAPPING_PARAMS,
+ NON_ACTIVATABLE_TRIGGER_NODE_TYPES,
+ TEMPLATES_NODES_FILTER,
+} from '@/constants';
+import { i18n as locale } from '@/plugins/i18n';
+import { useCredentialsStore } from '@/stores/credentials.store';
+import { useNodeTypesStore } from '@/stores/nodeTypes.store';
+import { useWorkflowsStore } from '@/stores/workflows.store';
+import { isResourceLocatorValue } from '@/utils/typeGuards';
+import { isJsonKeyObject } from '@/utils/typesUtils';
+import type {
IDataObject,
+ INodeCredentialDescription,
INodeExecutionData,
INodeProperties,
INodeTypeDescription,
NodeParameterValueType,
ResourceMapperField,
+ Themed,
} from 'n8n-workflow';
-import {
- MAIN_AUTH_FIELD_NAME,
- CORE_NODES_CATEGORY,
- NON_ACTIVATABLE_TRIGGER_NODE_TYPES,
- TEMPLATES_NODES_FILTER,
- MAPPING_PARAMS,
-} from '@/constants';
-import { useWorkflowsStore } from '@/stores/workflows.store';
-import { useNodeTypesStore } from '@/stores/nodeTypes.store';
-import type {
- INodeUi,
- ITemplatesNode,
- NodeAuthenticationOption,
- INodeUpdatePropertiesInformation,
-} from '@/Interface';
-import { isResourceLocatorValue } from '@/utils/typeGuards';
-import { isJsonKeyObject } from '@/utils/typesUtils';
-import { useCredentialsStore } from '@/stores/credentials.store';
-import { i18n as locale } from '@/plugins/i18n';
/*
Constants and utility functions mainly used to get information about
@@ -431,3 +434,39 @@ export const isMatchingField = (
}
return false;
};
+
+export const getThemedValue = (
+ value: Themed | undefined,
+ theme: AppliedThemeOption = 'light',
+): T | null => {
+ if (!value) {
+ return null;
+ }
+
+ if (typeof value === 'string') {
+ return value;
+ }
+
+ return value[theme];
+};
+
+export const getNodeIcon = (
+ nodeType: INodeTypeDescription | IVersionNode,
+ theme: AppliedThemeOption = 'light',
+): string | null => {
+ return getThemedValue(nodeType.icon, theme);
+};
+
+export const getNodeIconUrl = (
+ nodeType: INodeTypeDescription | IVersionNode,
+ theme: AppliedThemeOption = 'light',
+): string | null => {
+ return getThemedValue(nodeType.iconUrl, theme);
+};
+
+export const getBadgeIconUrl = (
+ nodeType: INodeTypeDescription,
+ theme: AppliedThemeOption = 'light',
+): string | null => {
+ return getThemedValue(nodeType.badgeIconUrl, theme);
+};
diff --git a/packages/nodes-base/credentials/AlienVaultApi.credentials.ts b/packages/nodes-base/credentials/AlienVaultApi.credentials.ts
index aa5aeb238f..9dad572045 100644
--- a/packages/nodes-base/credentials/AlienVaultApi.credentials.ts
+++ b/packages/nodes-base/credentials/AlienVaultApi.credentials.ts
@@ -3,6 +3,7 @@ import type {
ICredentialTestRequest,
ICredentialType,
INodeProperties,
+ Icon,
} from 'n8n-workflow';
export class AlienVaultApi implements ICredentialType {
@@ -12,7 +13,7 @@ export class AlienVaultApi implements ICredentialType {
documentationUrl = 'alienvault';
- icon = 'file:icons/AlienVault.png';
+ icon: Icon = 'file:icons/AlienVault.png';
httpRequestNode = {
name: 'AlienVault',
diff --git a/packages/nodes-base/credentials/Auth0ManagementApi.credentials.ts b/packages/nodes-base/credentials/Auth0ManagementApi.credentials.ts
index c824b7188e..d4d2865220 100644
--- a/packages/nodes-base/credentials/Auth0ManagementApi.credentials.ts
+++ b/packages/nodes-base/credentials/Auth0ManagementApi.credentials.ts
@@ -14,7 +14,7 @@ export class Auth0ManagementApi implements ICredentialType {
documentationUrl = 'auth0management';
- icon = 'file:icons/Auth0.svg';
+ icon = { light: 'file:icons/Auth0.svg', dark: 'file:icons/Auth0.dark.svg' } as const;
httpRequestNode = {
name: 'Auth0',
diff --git a/packages/nodes-base/credentials/Aws.credentials.ts b/packages/nodes-base/credentials/Aws.credentials.ts
index 9178faf7c3..9170657a4f 100644
--- a/packages/nodes-base/credentials/Aws.credentials.ts
+++ b/packages/nodes-base/credentials/Aws.credentials.ts
@@ -156,7 +156,7 @@ export class Aws implements ICredentialType {
documentationUrl = 'aws';
- icon = 'file:icons/AWS.svg';
+ icon = { light: 'file:icons/AWS.svg', dark: 'file:icons/AWS.dark.svg' } as const;
properties: INodeProperties[] = [
{
diff --git a/packages/nodes-base/credentials/CarbonBlackApi.credentials.ts b/packages/nodes-base/credentials/CarbonBlackApi.credentials.ts
index 48c5f5650a..70119d362e 100644
--- a/packages/nodes-base/credentials/CarbonBlackApi.credentials.ts
+++ b/packages/nodes-base/credentials/CarbonBlackApi.credentials.ts
@@ -5,7 +5,7 @@ export class CarbonBlackApi implements ICredentialType {
displayName = 'Carbon Black API';
- icon = 'file:icons/vmware.svg';
+ icon = { light: 'file:icons/vmware.svg', dark: 'file:icons/vmware.dark.svg' } as const;
documentationUrl = 'carbonblack';
diff --git a/packages/nodes-base/credentials/CiscoMerakiApi.credentials.ts b/packages/nodes-base/credentials/CiscoMerakiApi.credentials.ts
index e02519b64d..24346845ba 100644
--- a/packages/nodes-base/credentials/CiscoMerakiApi.credentials.ts
+++ b/packages/nodes-base/credentials/CiscoMerakiApi.credentials.ts
@@ -7,7 +7,7 @@ export class CiscoMerakiApi implements ICredentialType {
documentationUrl = 'ciscomeraki';
- icon = 'file:icons/Cisco.svg';
+ icon = { light: 'file:icons/Cisco.svg', dark: 'file:icons/Cisco.dark.svg' } as const;
httpRequestNode = {
name: 'Cisco Meraki',
diff --git a/packages/nodes-base/credentials/CiscoSecureEndpointApi.credentials.ts b/packages/nodes-base/credentials/CiscoSecureEndpointApi.credentials.ts
index 81a3a6fb70..7ffac61779 100644
--- a/packages/nodes-base/credentials/CiscoSecureEndpointApi.credentials.ts
+++ b/packages/nodes-base/credentials/CiscoSecureEndpointApi.credentials.ts
@@ -15,7 +15,7 @@ export class CiscoSecureEndpointApi implements ICredentialType {
documentationUrl = 'ciscosecureendpoint';
- icon = 'file:icons/Cisco.svg';
+ icon = { light: 'file:icons/Cisco.svg', dark: 'file:icons/Cisco.dark.svg' } as const;
httpRequestNode = {
name: 'Cisco Secure Endpoint',
diff --git a/packages/nodes-base/credentials/CiscoUmbrellaApi.credentials.ts b/packages/nodes-base/credentials/CiscoUmbrellaApi.credentials.ts
index 2a3120ab40..f2bca59860 100644
--- a/packages/nodes-base/credentials/CiscoUmbrellaApi.credentials.ts
+++ b/packages/nodes-base/credentials/CiscoUmbrellaApi.credentials.ts
@@ -14,7 +14,7 @@ export class CiscoUmbrellaApi implements ICredentialType {
documentationUrl = 'ciscoumbrella';
- icon = 'file:icons/Cisco.svg';
+ icon = { light: 'file:icons/Cisco.svg', dark: 'file:icons/Cisco.dark.svg' } as const;
httpRequestNode = {
name: 'Cisco Umbrella',
diff --git a/packages/nodes-base/credentials/CiscoWebexOAuth2Api.credentials.ts b/packages/nodes-base/credentials/CiscoWebexOAuth2Api.credentials.ts
index 3784f7f6aa..9de1ff62f8 100644
--- a/packages/nodes-base/credentials/CiscoWebexOAuth2Api.credentials.ts
+++ b/packages/nodes-base/credentials/CiscoWebexOAuth2Api.credentials.ts
@@ -9,7 +9,7 @@ export class CiscoWebexOAuth2Api implements ICredentialType {
documentationUrl = 'ciscowebex';
- icon = 'file:icons/Cisco.svg';
+ icon = { light: 'file:icons/Cisco.svg', dark: 'file:icons/Cisco.dark.svg' } as const;
properties: INodeProperties[] = [
{
diff --git a/packages/nodes-base/credentials/CrowdStrikeOAuth2Api.credentials.ts b/packages/nodes-base/credentials/CrowdStrikeOAuth2Api.credentials.ts
index ccf2022447..de69b0d5db 100644
--- a/packages/nodes-base/credentials/CrowdStrikeOAuth2Api.credentials.ts
+++ b/packages/nodes-base/credentials/CrowdStrikeOAuth2Api.credentials.ts
@@ -14,7 +14,7 @@ export class CrowdStrikeOAuth2Api implements ICredentialType {
documentationUrl = 'crowdstrike';
- icon = 'file:icons/CrowdStrike.svg';
+ icon = { light: 'file:icons/CrowdStrike.svg', dark: 'file:icons/CrowdStrike.dark.svg' } as const;
httpRequestNode = {
name: 'CrowdStrike',
diff --git a/packages/nodes-base/credentials/F5BigIpApi.credentials.ts b/packages/nodes-base/credentials/F5BigIpApi.credentials.ts
index a3204ae8b2..85245b7179 100644
--- a/packages/nodes-base/credentials/F5BigIpApi.credentials.ts
+++ b/packages/nodes-base/credentials/F5BigIpApi.credentials.ts
@@ -1,4 +1,4 @@
-import type { IAuthenticateGeneric, ICredentialType, INodeProperties } from 'n8n-workflow';
+import type { IAuthenticateGeneric, ICredentialType, INodeProperties, Icon } from 'n8n-workflow';
export class F5BigIpApi implements ICredentialType {
name = 'f5BigIpApi';
@@ -7,7 +7,7 @@ export class F5BigIpApi implements ICredentialType {
documentationUrl = 'f5bigip';
- icon = 'file:icons/F5.svg';
+ icon: Icon = 'file:icons/F5.svg';
httpRequestNode = {
name: 'F5 Big-IP',
diff --git a/packages/nodes-base/credentials/FortiGateApi.credentials.ts b/packages/nodes-base/credentials/FortiGateApi.credentials.ts
index 30655d651f..9f7febf53c 100644
--- a/packages/nodes-base/credentials/FortiGateApi.credentials.ts
+++ b/packages/nodes-base/credentials/FortiGateApi.credentials.ts
@@ -1,4 +1,4 @@
-import type { IAuthenticateGeneric, ICredentialType, INodeProperties } from 'n8n-workflow';
+import type { IAuthenticateGeneric, ICredentialType, INodeProperties, Icon } from 'n8n-workflow';
export class FortiGateApi implements ICredentialType {
name = 'fortiGateApi';
@@ -7,7 +7,7 @@ export class FortiGateApi implements ICredentialType {
documentationUrl = 'fortigate';
- icon = 'file:icons/Fortinet.svg';
+ icon: Icon = 'file:icons/Fortinet.svg';
httpRequestNode = {
name: 'Fortinet FortiGate',
diff --git a/packages/nodes-base/credentials/GoogleApi.credentials.ts b/packages/nodes-base/credentials/GoogleApi.credentials.ts
index 90db20c9df..96fa9e5f40 100644
--- a/packages/nodes-base/credentials/GoogleApi.credentials.ts
+++ b/packages/nodes-base/credentials/GoogleApi.credentials.ts
@@ -3,6 +3,7 @@ import type {
ICredentialType,
IHttpRequestOptions,
INodeProperties,
+ Icon,
} from 'n8n-workflow';
import moment from 'moment-timezone';
@@ -20,7 +21,7 @@ export class GoogleApi implements ICredentialType {
documentationUrl = 'google/service-account';
- icon = 'file:icons/Google.svg';
+ icon: Icon = 'file:icons/Google.svg';
properties: INodeProperties[] = [
{
diff --git a/packages/nodes-base/credentials/GoogleOAuth2Api.credentials.ts b/packages/nodes-base/credentials/GoogleOAuth2Api.credentials.ts
index 821bf6e770..4af21afdd7 100644
--- a/packages/nodes-base/credentials/GoogleOAuth2Api.credentials.ts
+++ b/packages/nodes-base/credentials/GoogleOAuth2Api.credentials.ts
@@ -1,4 +1,4 @@
-import type { ICredentialType, INodeProperties } from 'n8n-workflow';
+import type { ICredentialType, INodeProperties, Icon } from 'n8n-workflow';
export class GoogleOAuth2Api implements ICredentialType {
name = 'googleOAuth2Api';
@@ -9,7 +9,7 @@ export class GoogleOAuth2Api implements ICredentialType {
documentationUrl = 'google/oauth-generic';
- icon = 'file:icons/Google.svg';
+ icon: Icon = 'file:icons/Google.svg';
properties: INodeProperties[] = [
{
diff --git a/packages/nodes-base/credentials/HighLevelOAuth2Api.credentials.ts b/packages/nodes-base/credentials/HighLevelOAuth2Api.credentials.ts
index 3325c5e72b..656cfcc0fb 100644
--- a/packages/nodes-base/credentials/HighLevelOAuth2Api.credentials.ts
+++ b/packages/nodes-base/credentials/HighLevelOAuth2Api.credentials.ts
@@ -1,4 +1,4 @@
-import type { ICredentialType, INodeProperties } from 'n8n-workflow';
+import type { ICredentialType, INodeProperties, Icon } from 'n8n-workflow';
export class HighLevelOAuth2Api implements ICredentialType {
name = 'highLevelOAuth2Api';
@@ -9,7 +9,7 @@ export class HighLevelOAuth2Api implements ICredentialType {
documentationUrl = 'highLevel';
- icon = 'file:icons/highLevel.svg';
+ icon: Icon = 'file:icons/highLevel.svg';
properties: INodeProperties[] = [
{
diff --git a/packages/nodes-base/credentials/HttpBasicAuth.credentials.ts b/packages/nodes-base/credentials/HttpBasicAuth.credentials.ts
index ad8f16b166..3d92244ba5 100644
--- a/packages/nodes-base/credentials/HttpBasicAuth.credentials.ts
+++ b/packages/nodes-base/credentials/HttpBasicAuth.credentials.ts
@@ -1,4 +1,4 @@
-import type { ICredentialType, INodeProperties } from 'n8n-workflow';
+import type { ICredentialType, INodeProperties, Icon } from 'n8n-workflow';
export class HttpBasicAuth implements ICredentialType {
name = 'httpBasicAuth';
@@ -9,7 +9,7 @@ export class HttpBasicAuth implements ICredentialType {
genericAuth = true;
- icon = 'node:n8n-nodes-base.httpRequest';
+ icon: Icon = 'node:n8n-nodes-base.httpRequest';
properties: INodeProperties[] = [
{
diff --git a/packages/nodes-base/credentials/HttpCustomAuth.credentials.ts b/packages/nodes-base/credentials/HttpCustomAuth.credentials.ts
index 405d7b7cdf..2b23865e18 100644
--- a/packages/nodes-base/credentials/HttpCustomAuth.credentials.ts
+++ b/packages/nodes-base/credentials/HttpCustomAuth.credentials.ts
@@ -1,6 +1,6 @@
/* eslint-disable n8n-nodes-base/cred-class-field-name-unsuffixed */
/* eslint-disable n8n-nodes-base/cred-class-name-unsuffixed */
-import type { ICredentialType, INodeProperties } from 'n8n-workflow';
+import type { ICredentialType, INodeProperties, Icon } from 'n8n-workflow';
export class HttpCustomAuth implements ICredentialType {
name = 'httpCustomAuth';
@@ -11,7 +11,7 @@ export class HttpCustomAuth implements ICredentialType {
genericAuth = true;
- icon = 'node:n8n-nodes-base.httpRequest';
+ icon: Icon = 'node:n8n-nodes-base.httpRequest';
properties: INodeProperties[] = [
{
diff --git a/packages/nodes-base/credentials/HttpDigestAuth.credentials.ts b/packages/nodes-base/credentials/HttpDigestAuth.credentials.ts
index 234e299bce..e3dd31704d 100644
--- a/packages/nodes-base/credentials/HttpDigestAuth.credentials.ts
+++ b/packages/nodes-base/credentials/HttpDigestAuth.credentials.ts
@@ -1,4 +1,4 @@
-import type { ICredentialType, INodeProperties } from 'n8n-workflow';
+import type { ICredentialType, INodeProperties, Icon } from 'n8n-workflow';
export class HttpDigestAuth implements ICredentialType {
name = 'httpDigestAuth';
@@ -9,7 +9,7 @@ export class HttpDigestAuth implements ICredentialType {
genericAuth = true;
- icon = 'node:n8n-nodes-base.httpRequest';
+ icon: Icon = 'node:n8n-nodes-base.httpRequest';
properties: INodeProperties[] = [
{
diff --git a/packages/nodes-base/credentials/HttpHeaderAuth.credentials.ts b/packages/nodes-base/credentials/HttpHeaderAuth.credentials.ts
index 304b44d7fc..a689e1bcfd 100644
--- a/packages/nodes-base/credentials/HttpHeaderAuth.credentials.ts
+++ b/packages/nodes-base/credentials/HttpHeaderAuth.credentials.ts
@@ -1,4 +1,4 @@
-import type { IAuthenticateGeneric, ICredentialType, INodeProperties } from 'n8n-workflow';
+import type { IAuthenticateGeneric, ICredentialType, INodeProperties, Icon } from 'n8n-workflow';
export class HttpHeaderAuth implements ICredentialType {
name = 'httpHeaderAuth';
@@ -9,7 +9,7 @@ export class HttpHeaderAuth implements ICredentialType {
genericAuth = true;
- icon = 'node:n8n-nodes-base.httpRequest';
+ icon: Icon = 'node:n8n-nodes-base.httpRequest';
properties: INodeProperties[] = [
{
diff --git a/packages/nodes-base/credentials/HttpQueryAuth.credentials.ts b/packages/nodes-base/credentials/HttpQueryAuth.credentials.ts
index c2ae9c4741..71055a713b 100644
--- a/packages/nodes-base/credentials/HttpQueryAuth.credentials.ts
+++ b/packages/nodes-base/credentials/HttpQueryAuth.credentials.ts
@@ -1,4 +1,4 @@
-import type { ICredentialType, INodeProperties } from 'n8n-workflow';
+import type { ICredentialType, INodeProperties, Icon } from 'n8n-workflow';
export class HttpQueryAuth implements ICredentialType {
name = 'httpQueryAuth';
@@ -9,7 +9,7 @@ export class HttpQueryAuth implements ICredentialType {
genericAuth = true;
- icon = 'node:n8n-nodes-base.httpRequest';
+ icon: Icon = 'node:n8n-nodes-base.httpRequest';
properties: INodeProperties[] = [
{
diff --git a/packages/nodes-base/credentials/HttpSslAuth.credentials.ts b/packages/nodes-base/credentials/HttpSslAuth.credentials.ts
index 06be6d4dd7..541306de4c 100644
--- a/packages/nodes-base/credentials/HttpSslAuth.credentials.ts
+++ b/packages/nodes-base/credentials/HttpSslAuth.credentials.ts
@@ -1,6 +1,6 @@
/* eslint-disable n8n-nodes-base/cred-class-name-unsuffixed */
/* eslint-disable n8n-nodes-base/cred-class-field-name-unsuffixed */
-import type { ICredentialType, INodeProperties } from 'n8n-workflow';
+import type { ICredentialType, INodeProperties, Icon } from 'n8n-workflow';
export class HttpSslAuth implements ICredentialType {
name = 'httpSslAuth';
@@ -9,7 +9,7 @@ export class HttpSslAuth implements ICredentialType {
documentationUrl = 'httpRequest';
- icon = 'node:n8n-nodes-base.httpRequest';
+ icon: Icon = 'node:n8n-nodes-base.httpRequest';
properties: INodeProperties[] = [
{
diff --git a/packages/nodes-base/credentials/HybridAnalysisApi.credentials.ts b/packages/nodes-base/credentials/HybridAnalysisApi.credentials.ts
index a7c06463da..a0c6dd6eee 100644
--- a/packages/nodes-base/credentials/HybridAnalysisApi.credentials.ts
+++ b/packages/nodes-base/credentials/HybridAnalysisApi.credentials.ts
@@ -1,4 +1,4 @@
-import type { IAuthenticateGeneric, ICredentialType, INodeProperties } from 'n8n-workflow';
+import type { IAuthenticateGeneric, ICredentialType, INodeProperties, Icon } from 'n8n-workflow';
export class HybridAnalysisApi implements ICredentialType {
name = 'hybridAnalysisApi';
@@ -7,7 +7,7 @@ export class HybridAnalysisApi implements ICredentialType {
documentationUrl = 'hybridanalysis';
- icon = 'file:icons/Hybrid.png';
+ icon: Icon = 'file:icons/Hybrid.png';
httpRequestNode = {
name: 'Hybrid Analysis',
diff --git a/packages/nodes-base/credentials/ImpervaWafApi.credentials.ts b/packages/nodes-base/credentials/ImpervaWafApi.credentials.ts
index 2046f428a4..b37b3e7d34 100644
--- a/packages/nodes-base/credentials/ImpervaWafApi.credentials.ts
+++ b/packages/nodes-base/credentials/ImpervaWafApi.credentials.ts
@@ -7,7 +7,7 @@ export class ImpervaWafApi implements ICredentialType {
documentationUrl = 'impervawaf';
- icon = 'file:icons/Imperva.svg';
+ icon = { light: 'file:icons/Imperva.svg', dark: 'file:icons/Imperva.dark.svg' } as const;
httpRequestNode = {
name: 'Imperva WAF',
diff --git a/packages/nodes-base/credentials/JwtAuth.credentials.ts b/packages/nodes-base/credentials/JwtAuth.credentials.ts
index 5dbf5ec7a1..9f74c83bfc 100644
--- a/packages/nodes-base/credentials/JwtAuth.credentials.ts
+++ b/packages/nodes-base/credentials/JwtAuth.credentials.ts
@@ -1,4 +1,4 @@
-import type { ICredentialType, INodeProperties, INodePropertyOptions } from 'n8n-workflow';
+import type { ICredentialType, INodeProperties, INodePropertyOptions, Icon } from 'n8n-workflow';
const algorithms: INodePropertyOptions[] = [
{
@@ -64,7 +64,7 @@ export class JwtAuth implements ICredentialType {
documentationUrl = 'jwt';
- icon = 'file:icons/jwt.svg';
+ icon: Icon = 'file:icons/jwt.svg';
properties: INodeProperties[] = [
{
diff --git a/packages/nodes-base/credentials/KibanaApi.credentials.ts b/packages/nodes-base/credentials/KibanaApi.credentials.ts
index 432b53cb4e..88ec55a96f 100644
--- a/packages/nodes-base/credentials/KibanaApi.credentials.ts
+++ b/packages/nodes-base/credentials/KibanaApi.credentials.ts
@@ -3,6 +3,7 @@ import type {
ICredentialTestRequest,
ICredentialType,
INodeProperties,
+ Icon,
} from 'n8n-workflow';
export class KibanaApi implements ICredentialType {
@@ -12,7 +13,7 @@ export class KibanaApi implements ICredentialType {
documentationUrl = 'kibana';
- icon = 'file:icons/Kibana.svg';
+ icon: Icon = 'file:icons/Kibana.svg';
httpRequestNode = {
name: 'Kibana',
diff --git a/packages/nodes-base/credentials/MicrosoftEntraOAuth2Api.credentials.ts b/packages/nodes-base/credentials/MicrosoftEntraOAuth2Api.credentials.ts
index 14a46dd762..c1c77edb41 100644
--- a/packages/nodes-base/credentials/MicrosoftEntraOAuth2Api.credentials.ts
+++ b/packages/nodes-base/credentials/MicrosoftEntraOAuth2Api.credentials.ts
@@ -1,4 +1,4 @@
-import type { ICredentialType, INodeProperties } from 'n8n-workflow';
+import type { ICredentialType, INodeProperties, Icon } from 'n8n-workflow';
export class MicrosoftEntraOAuth2Api implements ICredentialType {
name = 'microsoftEntraOAuth2Api';
@@ -7,7 +7,7 @@ export class MicrosoftEntraOAuth2Api implements ICredentialType {
extends = ['microsoftOAuth2Api'];
- icon = 'file:icons/Azure.svg';
+ icon: Icon = 'file:icons/Azure.svg';
documentationUrl = 'microsoftentra';
diff --git a/packages/nodes-base/credentials/MicrosoftOAuth2Api.credentials.ts b/packages/nodes-base/credentials/MicrosoftOAuth2Api.credentials.ts
index 58425dbe39..9a6b77efb9 100644
--- a/packages/nodes-base/credentials/MicrosoftOAuth2Api.credentials.ts
+++ b/packages/nodes-base/credentials/MicrosoftOAuth2Api.credentials.ts
@@ -1,11 +1,11 @@
-import type { ICredentialType, INodeProperties } from 'n8n-workflow';
+import type { ICredentialType, INodeProperties, Icon } from 'n8n-workflow';
export class MicrosoftOAuth2Api implements ICredentialType {
name = 'microsoftOAuth2Api';
extends = ['oAuth2Api'];
- icon = 'file:icons/Microsoft.svg';
+ icon: Icon = 'file:icons/Microsoft.svg';
displayName = 'Microsoft OAuth2 API';
diff --git a/packages/nodes-base/credentials/MistApi.credentials.ts b/packages/nodes-base/credentials/MistApi.credentials.ts
index d74fe8a64b..d619b0461b 100644
--- a/packages/nodes-base/credentials/MistApi.credentials.ts
+++ b/packages/nodes-base/credentials/MistApi.credentials.ts
@@ -3,6 +3,7 @@ import type {
ICredentialTestRequest,
ICredentialType,
INodeProperties,
+ Icon,
} from 'n8n-workflow';
export class MistApi implements ICredentialType {
@@ -10,7 +11,7 @@ export class MistApi implements ICredentialType {
displayName = 'Mist API';
- icon = 'file:icons/Mist.svg';
+ icon: Icon = 'file:icons/Mist.svg';
documentationUrl = 'mist';
diff --git a/packages/nodes-base/credentials/OktaApi.credentials.ts b/packages/nodes-base/credentials/OktaApi.credentials.ts
index fdbeb2defc..c5b925c071 100644
--- a/packages/nodes-base/credentials/OktaApi.credentials.ts
+++ b/packages/nodes-base/credentials/OktaApi.credentials.ts
@@ -12,7 +12,7 @@ export class OktaApi implements ICredentialType {
documentationUrl = 'okta';
- icon = 'file:icons/Okta.svg';
+ icon = { light: 'file:icons/Okta.svg', dark: 'file:icons/Okta.dark.svg' } as const;
httpRequestNode = {
name: 'Okta',
diff --git a/packages/nodes-base/credentials/OpenCTIApi.credentials.ts b/packages/nodes-base/credentials/OpenCTIApi.credentials.ts
index dde51838ed..f92dab00aa 100644
--- a/packages/nodes-base/credentials/OpenCTIApi.credentials.ts
+++ b/packages/nodes-base/credentials/OpenCTIApi.credentials.ts
@@ -1,4 +1,4 @@
-import type { IAuthenticateGeneric, ICredentialType, INodeProperties } from 'n8n-workflow';
+import type { IAuthenticateGeneric, ICredentialType, INodeProperties, Icon } from 'n8n-workflow';
export class OpenCTIApi implements ICredentialType {
name = 'openCtiApi';
@@ -7,7 +7,7 @@ export class OpenCTIApi implements ICredentialType {
documentationUrl = 'opencti';
- icon = 'file:icons/OpenCTI.png';
+ icon: Icon = 'file:icons/OpenCTI.png';
httpRequestNode = {
name: 'OpenCTI',
diff --git a/packages/nodes-base/credentials/QRadarApi.credentials.ts b/packages/nodes-base/credentials/QRadarApi.credentials.ts
index 5da8eaab37..6eb8c3a46e 100644
--- a/packages/nodes-base/credentials/QRadarApi.credentials.ts
+++ b/packages/nodes-base/credentials/QRadarApi.credentials.ts
@@ -5,7 +5,7 @@ export class QRadarApi implements ICredentialType {
displayName = 'QRadar API';
- icon = 'file:icons/IBM.svg';
+ icon = { light: 'file:icons/IBM.svg', dark: 'file:icons/IBM.dark.svg' } as const;
documentationUrl = 'qradar';
diff --git a/packages/nodes-base/credentials/QualysApi.credentials.ts b/packages/nodes-base/credentials/QualysApi.credentials.ts
index 5f54b9dc53..1e56f3aacb 100644
--- a/packages/nodes-base/credentials/QualysApi.credentials.ts
+++ b/packages/nodes-base/credentials/QualysApi.credentials.ts
@@ -5,7 +5,7 @@ export class QualysApi implements ICredentialType {
displayName = 'Qualys API';
- icon = 'file:icons/Qualys.svg';
+ icon = 'file:icons/Qualys.svg' as const;
documentationUrl = 'qualys';
diff --git a/packages/nodes-base/credentials/RecordedFutureApi.credentials.ts b/packages/nodes-base/credentials/RecordedFutureApi.credentials.ts
index 2a19b4a8eb..f07f7ba878 100644
--- a/packages/nodes-base/credentials/RecordedFutureApi.credentials.ts
+++ b/packages/nodes-base/credentials/RecordedFutureApi.credentials.ts
@@ -7,7 +7,10 @@ export class RecordedFutureApi implements ICredentialType {
documentationUrl = 'recordedfuture';
- icon = 'file:icons/RecordedFuture.svg';
+ icon = {
+ light: 'file:icons/RecordedFuture.svg',
+ dark: 'file:icons/RecordedFuture.dark.svg',
+ } as const;
httpRequestNode = {
name: 'Recorded Future',
diff --git a/packages/nodes-base/credentials/SekoiaApi.credentials.ts b/packages/nodes-base/credentials/SekoiaApi.credentials.ts
index e9bee6dbcd..394f8b1d81 100644
--- a/packages/nodes-base/credentials/SekoiaApi.credentials.ts
+++ b/packages/nodes-base/credentials/SekoiaApi.credentials.ts
@@ -1,11 +1,11 @@
-import type { IAuthenticateGeneric, ICredentialType, INodeProperties } from 'n8n-workflow';
+import type { IAuthenticateGeneric, ICredentialType, INodeProperties, Icon } from 'n8n-workflow';
export class SekoiaApi implements ICredentialType {
name = 'sekoiaApi';
displayName = 'Sekoia API';
- icon = 'file:icons/Sekoia.svg';
+ icon: Icon = 'file:icons/Sekoia.svg';
documentationUrl = 'sekoia';
diff --git a/packages/nodes-base/credentials/ShufflerApi.credentials.ts b/packages/nodes-base/credentials/ShufflerApi.credentials.ts
index ce5995df6b..e86dda6631 100644
--- a/packages/nodes-base/credentials/ShufflerApi.credentials.ts
+++ b/packages/nodes-base/credentials/ShufflerApi.credentials.ts
@@ -3,6 +3,7 @@ import type {
ICredentialTestRequest,
ICredentialType,
INodeProperties,
+ Icon,
} from 'n8n-workflow';
export class ShufflerApi implements ICredentialType {
@@ -10,7 +11,7 @@ export class ShufflerApi implements ICredentialType {
displayName = 'Shuffler API';
- icon = 'file:icons/Shuffler.svg';
+ icon: Icon = 'file:icons/Shuffler.svg';
documentationUrl = 'shuffler';
diff --git a/packages/nodes-base/credentials/TrellixEpoApi.credentials.ts b/packages/nodes-base/credentials/TrellixEpoApi.credentials.ts
index c4fbab9bdf..b5d9cc2c2f 100644
--- a/packages/nodes-base/credentials/TrellixEpoApi.credentials.ts
+++ b/packages/nodes-base/credentials/TrellixEpoApi.credentials.ts
@@ -1,4 +1,4 @@
-import type { IAuthenticateGeneric, ICredentialType, INodeProperties } from 'n8n-workflow';
+import type { IAuthenticateGeneric, ICredentialType, INodeProperties, Icon } from 'n8n-workflow';
export class TrellixEpoApi implements ICredentialType {
name = 'trellixEpoApi';
@@ -7,7 +7,7 @@ export class TrellixEpoApi implements ICredentialType {
documentationUrl = 'trellixepo';
- icon = 'file:icons/Trellix.svg';
+ icon: Icon = 'file:icons/Trellix.svg';
httpRequestNode = {
name: 'Trellix (McAfee) ePolicy Orchestrator',
diff --git a/packages/nodes-base/credentials/TwakeServerApi.credentials.ts b/packages/nodes-base/credentials/TwakeServerApi.credentials.ts
index 2738465069..0125cb14a2 100644
--- a/packages/nodes-base/credentials/TwakeServerApi.credentials.ts
+++ b/packages/nodes-base/credentials/TwakeServerApi.credentials.ts
@@ -1,11 +1,11 @@
-import type { ICredentialType, INodeProperties } from 'n8n-workflow';
+import type { ICredentialType, INodeProperties, Icon } from 'n8n-workflow';
export class TwakeServerApi implements ICredentialType {
name = 'twakeServerApi';
displayName = 'Twake Server API';
- icon = 'file:icons/Twake.png';
+ icon: Icon = 'file:icons/Twake.png';
documentationUrl = 'twake';
diff --git a/packages/nodes-base/credentials/VirusTotalApi.credentials.ts b/packages/nodes-base/credentials/VirusTotalApi.credentials.ts
index 3a69d520f9..5aeb949ccd 100644
--- a/packages/nodes-base/credentials/VirusTotalApi.credentials.ts
+++ b/packages/nodes-base/credentials/VirusTotalApi.credentials.ts
@@ -3,6 +3,7 @@ import type {
ICredentialTestRequest,
ICredentialType,
INodeProperties,
+ Icon,
} from 'n8n-workflow';
export class VirusTotalApi implements ICredentialType {
@@ -12,7 +13,7 @@ export class VirusTotalApi implements ICredentialType {
documentationUrl = 'virustotal';
- icon = 'file:icons/VirusTotal.svg';
+ icon: Icon = 'file:icons/VirusTotal.svg';
httpRequestNode = {
name: 'VirusTotal',
diff --git a/packages/nodes-base/credentials/YouTubeOAuth2Api.credentials.ts b/packages/nodes-base/credentials/YouTubeOAuth2Api.credentials.ts
index 0fd023362f..0611d9d65d 100644
--- a/packages/nodes-base/credentials/YouTubeOAuth2Api.credentials.ts
+++ b/packages/nodes-base/credentials/YouTubeOAuth2Api.credentials.ts
@@ -1,4 +1,4 @@
-import type { ICredentialType, INodeProperties } from 'n8n-workflow';
+import type { ICredentialType, INodeProperties, Icon } from 'n8n-workflow';
//https://developers.google.com/youtube/v3/guides/auth/client-side-web-apps#identify-access-scopes
const scopes = [
@@ -12,7 +12,7 @@ const scopes = [
export class YouTubeOAuth2Api implements ICredentialType {
name = 'youTubeOAuth2Api';
- icon = 'node:n8n-nodes-base.youTube';
+ icon: Icon = 'node:n8n-nodes-base.youTube';
extends = ['googleOAuth2Api'];
diff --git a/packages/nodes-base/credentials/ZscalerZiaApi.credentials.ts b/packages/nodes-base/credentials/ZscalerZiaApi.credentials.ts
index bd3260442b..80d41ac657 100644
--- a/packages/nodes-base/credentials/ZscalerZiaApi.credentials.ts
+++ b/packages/nodes-base/credentials/ZscalerZiaApi.credentials.ts
@@ -6,6 +6,7 @@ import type {
ICredentialType,
IHttpRequestHelper,
INodeProperties,
+ Icon,
} from 'n8n-workflow';
export class ZscalerZiaApi implements ICredentialType {
@@ -15,7 +16,7 @@ export class ZscalerZiaApi implements ICredentialType {
documentationUrl = 'zscalerzia';
- icon = 'file:icons/Zscaler.svg';
+ icon: Icon = 'file:icons/Zscaler.svg';
httpRequestNode = {
name: 'Zscaler ZIA',
diff --git a/packages/nodes-base/credentials/icons/AWS.dark.svg b/packages/nodes-base/credentials/icons/AWS.dark.svg
new file mode 100644
index 0000000000..b4d02869ec
--- /dev/null
+++ b/packages/nodes-base/credentials/icons/AWS.dark.svg
@@ -0,0 +1,5 @@
+
diff --git a/packages/nodes-base/credentials/icons/AWS.svg b/packages/nodes-base/credentials/icons/AWS.svg
index 760c2530f4..2e6cea9b04 100644
--- a/packages/nodes-base/credentials/icons/AWS.svg
+++ b/packages/nodes-base/credentials/icons/AWS.svg
@@ -1 +1,5 @@
-
\ No newline at end of file
+
diff --git a/packages/nodes-base/credentials/icons/Auth0.dark.svg b/packages/nodes-base/credentials/icons/Auth0.dark.svg
new file mode 100644
index 0000000000..548a8866db
--- /dev/null
+++ b/packages/nodes-base/credentials/icons/Auth0.dark.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/nodes-base/credentials/icons/Auth0.svg b/packages/nodes-base/credentials/icons/Auth0.svg
index 75ee017e1a..040a94154c 100644
--- a/packages/nodes-base/credentials/icons/Auth0.svg
+++ b/packages/nodes-base/credentials/icons/Auth0.svg
@@ -1 +1,3 @@
-
\ No newline at end of file
+
diff --git a/packages/nodes-base/credentials/icons/Cisco.dark.svg b/packages/nodes-base/credentials/icons/Cisco.dark.svg
new file mode 100644
index 0000000000..9122bd2a4b
--- /dev/null
+++ b/packages/nodes-base/credentials/icons/Cisco.dark.svg
@@ -0,0 +1,9 @@
+
diff --git a/packages/nodes-base/credentials/icons/Cisco.svg b/packages/nodes-base/credentials/icons/Cisco.svg
index 66a600af2c..3ef365fbb6 100644
--- a/packages/nodes-base/credentials/icons/Cisco.svg
+++ b/packages/nodes-base/credentials/icons/Cisco.svg
@@ -1 +1,9 @@
-
\ No newline at end of file
+
diff --git a/packages/nodes-base/credentials/icons/CrowdStrike.dark.svg b/packages/nodes-base/credentials/icons/CrowdStrike.dark.svg
new file mode 100644
index 0000000000..7cf9f3e8cc
--- /dev/null
+++ b/packages/nodes-base/credentials/icons/CrowdStrike.dark.svg
@@ -0,0 +1,7 @@
+
diff --git a/packages/nodes-base/credentials/icons/CrowdStrike.svg b/packages/nodes-base/credentials/icons/CrowdStrike.svg
index 8db5558b7b..9c83667d35 100644
--- a/packages/nodes-base/credentials/icons/CrowdStrike.svg
+++ b/packages/nodes-base/credentials/icons/CrowdStrike.svg
@@ -1 +1,7 @@
-
\ No newline at end of file
+
diff --git a/packages/nodes-base/credentials/icons/IBM.dark.svg b/packages/nodes-base/credentials/icons/IBM.dark.svg
new file mode 100644
index 0000000000..eeb1d176ec
--- /dev/null
+++ b/packages/nodes-base/credentials/icons/IBM.dark.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/nodes-base/credentials/icons/IBM.svg b/packages/nodes-base/credentials/icons/IBM.svg
index 0e5ac9ec25..fc9472d3ef 100644
--- a/packages/nodes-base/credentials/icons/IBM.svg
+++ b/packages/nodes-base/credentials/icons/IBM.svg
@@ -1 +1,3 @@
-
\ No newline at end of file
+
diff --git a/packages/nodes-base/credentials/icons/Imperva.dark.svg b/packages/nodes-base/credentials/icons/Imperva.dark.svg
new file mode 100644
index 0000000000..a19a28a31a
--- /dev/null
+++ b/packages/nodes-base/credentials/icons/Imperva.dark.svg
@@ -0,0 +1,4 @@
+
diff --git a/packages/nodes-base/credentials/icons/Imperva.svg b/packages/nodes-base/credentials/icons/Imperva.svg
index f8521cb9be..730c87b9e5 100644
--- a/packages/nodes-base/credentials/icons/Imperva.svg
+++ b/packages/nodes-base/credentials/icons/Imperva.svg
@@ -1 +1,4 @@
-
\ No newline at end of file
+
diff --git a/packages/nodes-base/credentials/icons/Okta.dark.svg b/packages/nodes-base/credentials/icons/Okta.dark.svg
new file mode 100644
index 0000000000..b6f1fd7e2b
--- /dev/null
+++ b/packages/nodes-base/credentials/icons/Okta.dark.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/nodes-base/credentials/icons/Okta.svg b/packages/nodes-base/credentials/icons/Okta.svg
index a7f2ff4ca8..4ba579621f 100644
--- a/packages/nodes-base/credentials/icons/Okta.svg
+++ b/packages/nodes-base/credentials/icons/Okta.svg
@@ -1 +1,3 @@
-
\ No newline at end of file
+
diff --git a/packages/nodes-base/credentials/icons/RecordedFuture.dark.svg b/packages/nodes-base/credentials/icons/RecordedFuture.dark.svg
new file mode 100644
index 0000000000..2ee6c9e503
--- /dev/null
+++ b/packages/nodes-base/credentials/icons/RecordedFuture.dark.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/nodes-base/credentials/icons/RecordedFuture.svg b/packages/nodes-base/credentials/icons/RecordedFuture.svg
index 6e8e317fc3..5bf4851764 100644
--- a/packages/nodes-base/credentials/icons/RecordedFuture.svg
+++ b/packages/nodes-base/credentials/icons/RecordedFuture.svg
@@ -1 +1,3 @@
-
\ No newline at end of file
+
diff --git a/packages/nodes-base/credentials/icons/Sekoia.svg b/packages/nodes-base/credentials/icons/Sekoia.svg
index a60aa68d6a..8ee51e1789 100644
--- a/packages/nodes-base/credentials/icons/Sekoia.svg
+++ b/packages/nodes-base/credentials/icons/Sekoia.svg
@@ -1 +1,3 @@
-
\ No newline at end of file
+
diff --git a/packages/nodes-base/credentials/icons/highLevel.svg b/packages/nodes-base/credentials/icons/highLevel.svg
index 3df6e466f0..407b6798f0 100644
--- a/packages/nodes-base/credentials/icons/highLevel.svg
+++ b/packages/nodes-base/credentials/icons/highLevel.svg
@@ -1 +1,11 @@
-
\ No newline at end of file
+
diff --git a/packages/nodes-base/credentials/icons/vmware.dark.svg b/packages/nodes-base/credentials/icons/vmware.dark.svg
new file mode 100644
index 0000000000..9291d339b3
--- /dev/null
+++ b/packages/nodes-base/credentials/icons/vmware.dark.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/nodes-base/credentials/icons/vmware.svg b/packages/nodes-base/credentials/icons/vmware.svg
index 20b525da40..5c8d1c34ba 100644
--- a/packages/nodes-base/credentials/icons/vmware.svg
+++ b/packages/nodes-base/credentials/icons/vmware.svg
@@ -1 +1,3 @@
-
\ No newline at end of file
+
diff --git a/packages/nodes-base/nodes/ActiveCampaign/ActiveCampaign.node.ts b/packages/nodes-base/nodes/ActiveCampaign/ActiveCampaign.node.ts
index cc931d2fec..e961b4df7c 100644
--- a/packages/nodes-base/nodes/ActiveCampaign/ActiveCampaign.node.ts
+++ b/packages/nodes-base/nodes/ActiveCampaign/ActiveCampaign.node.ts
@@ -82,7 +82,7 @@ export class ActiveCampaign implements INodeType {
displayName: 'ActiveCampaign',
name: 'activeCampaign',
// eslint-disable-next-line n8n-nodes-base/node-class-description-icon-not-svg
- icon: 'file:activeCampaign.png',
+ icon: { light: 'file:activeCampaign.svg', dark: 'file:activeCampaign.dark.svg' },
group: ['transform'],
version: 1,
subtitle: '={{$parameter["operation"] + ": " + $parameter["resource"]}}',
diff --git a/packages/nodes-base/nodes/ActiveCampaign/activeCampaign.dark.svg b/packages/nodes-base/nodes/ActiveCampaign/activeCampaign.dark.svg
new file mode 100644
index 0000000000..7b2338f91c
--- /dev/null
+++ b/packages/nodes-base/nodes/ActiveCampaign/activeCampaign.dark.svg
@@ -0,0 +1,4 @@
+
diff --git a/packages/nodes-base/nodes/ActiveCampaign/activeCampaign.png b/packages/nodes-base/nodes/ActiveCampaign/activeCampaign.png
deleted file mode 100644
index 0e638d8a10..0000000000
Binary files a/packages/nodes-base/nodes/ActiveCampaign/activeCampaign.png and /dev/null differ
diff --git a/packages/nodes-base/nodes/ActiveCampaign/activeCampaign.svg b/packages/nodes-base/nodes/ActiveCampaign/activeCampaign.svg
new file mode 100644
index 0000000000..345175516a
--- /dev/null
+++ b/packages/nodes-base/nodes/ActiveCampaign/activeCampaign.svg
@@ -0,0 +1,4 @@
+
diff --git a/packages/nodes-base/nodes/Affinity/Affinity.node.ts b/packages/nodes-base/nodes/Affinity/Affinity.node.ts
index 21c8eb123a..f80a7312a8 100644
--- a/packages/nodes-base/nodes/Affinity/Affinity.node.ts
+++ b/packages/nodes-base/nodes/Affinity/Affinity.node.ts
@@ -27,7 +27,7 @@ export class Affinity implements INodeType {
displayName: 'Affinity',
name: 'affinity',
// eslint-disable-next-line n8n-nodes-base/node-class-description-icon-not-svg
- icon: 'file:affinity.png',
+ icon: { light: 'file:affinity.svg', dark: 'file:affinity.dark.svg' },
group: ['output'],
version: 1,
subtitle: '={{$parameter["operation"] + ": " + $parameter["resource"]}}',
diff --git a/packages/nodes-base/nodes/Affinity/affinity.dark.svg b/packages/nodes-base/nodes/Affinity/affinity.dark.svg
new file mode 100644
index 0000000000..54b4153757
--- /dev/null
+++ b/packages/nodes-base/nodes/Affinity/affinity.dark.svg
@@ -0,0 +1,8 @@
+
diff --git a/packages/nodes-base/nodes/Affinity/affinity.png b/packages/nodes-base/nodes/Affinity/affinity.png
deleted file mode 100644
index 7045900c56..0000000000
Binary files a/packages/nodes-base/nodes/Affinity/affinity.png and /dev/null differ
diff --git a/packages/nodes-base/nodes/Affinity/affinity.svg b/packages/nodes-base/nodes/Affinity/affinity.svg
new file mode 100644
index 0000000000..2f843f4337
--- /dev/null
+++ b/packages/nodes-base/nodes/Affinity/affinity.svg
@@ -0,0 +1,14 @@
+
diff --git a/packages/nodes-base/nodes/Amqp/Amqp.node.ts b/packages/nodes-base/nodes/Amqp/Amqp.node.ts
index 5a7bb808b9..f917547d6b 100644
--- a/packages/nodes-base/nodes/Amqp/Amqp.node.ts
+++ b/packages/nodes-base/nodes/Amqp/Amqp.node.ts
@@ -19,7 +19,7 @@ export class Amqp implements INodeType {
displayName: 'AMQP Sender',
name: 'amqp',
// eslint-disable-next-line n8n-nodes-base/node-class-description-icon-not-svg
- icon: 'file:amqp.png',
+ icon: 'file:amqp.svg',
group: ['transform'],
version: 1,
description: 'Sends a raw-message via AMQP 1.0, executed once per item',
diff --git a/packages/nodes-base/nodes/Amqp/amqp.png b/packages/nodes-base/nodes/Amqp/amqp.png
deleted file mode 100644
index 0f0345078c..0000000000
Binary files a/packages/nodes-base/nodes/Amqp/amqp.png and /dev/null differ
diff --git a/packages/nodes-base/nodes/Amqp/amqp.svg b/packages/nodes-base/nodes/Amqp/amqp.svg
new file mode 100644
index 0000000000..1b33430297
--- /dev/null
+++ b/packages/nodes-base/nodes/Amqp/amqp.svg
@@ -0,0 +1,9 @@
+
diff --git a/packages/nodes-base/nodes/Bubble/Bubble.node.ts b/packages/nodes-base/nodes/Bubble/Bubble.node.ts
index 4bc11de821..ea8b74b8f2 100644
--- a/packages/nodes-base/nodes/Bubble/Bubble.node.ts
+++ b/packages/nodes-base/nodes/Bubble/Bubble.node.ts
@@ -15,7 +15,7 @@ export class Bubble implements INodeType {
description: INodeTypeDescription = {
displayName: 'Bubble',
name: 'bubble',
- icon: 'file:bubble.svg',
+ icon: { light: 'file:bubble.svg', dark: 'file:bubble.dark.svg' },
group: ['transform'],
version: 1,
subtitle: '={{$parameter["operation"] + ": " + $parameter["resource"]}}',
diff --git a/packages/nodes-base/nodes/Bubble/bubble.dark.svg b/packages/nodes-base/nodes/Bubble/bubble.dark.svg
new file mode 100644
index 0000000000..002f4278bc
--- /dev/null
+++ b/packages/nodes-base/nodes/Bubble/bubble.dark.svg
@@ -0,0 +1,4 @@
+
diff --git a/packages/nodes-base/nodes/Bubble/bubble.svg b/packages/nodes-base/nodes/Bubble/bubble.svg
index 1c41d3fe7e..c28005678a 100644
--- a/packages/nodes-base/nodes/Bubble/bubble.svg
+++ b/packages/nodes-base/nodes/Bubble/bubble.svg
@@ -1 +1,4 @@
-
\ No newline at end of file
+
diff --git a/packages/nodes-base/nodes/Cal/CalTrigger.node.ts b/packages/nodes-base/nodes/Cal/CalTrigger.node.ts
index 340797cec3..8d2b6c3d17 100644
--- a/packages/nodes-base/nodes/Cal/CalTrigger.node.ts
+++ b/packages/nodes-base/nodes/Cal/CalTrigger.node.ts
@@ -15,7 +15,7 @@ export class CalTrigger implements INodeType {
description: INodeTypeDescription = {
displayName: 'Cal Trigger',
name: 'calTrigger',
- icon: 'file:cal.svg',
+ icon: { light: 'file:cal.svg', dark: 'file:cal.dark.svg' },
group: ['trigger'],
version: [1, 2],
subtitle: '=Events: {{$parameter["events"].join(", ")}}',
diff --git a/packages/nodes-base/nodes/Cal/cal.dark.svg b/packages/nodes-base/nodes/Cal/cal.dark.svg
new file mode 100644
index 0000000000..032277d65a
--- /dev/null
+++ b/packages/nodes-base/nodes/Cal/cal.dark.svg
@@ -0,0 +1,9 @@
+
diff --git a/packages/nodes-base/nodes/Cal/cal.svg b/packages/nodes-base/nodes/Cal/cal.svg
index 6188357337..f74af49108 100644
--- a/packages/nodes-base/nodes/Cal/cal.svg
+++ b/packages/nodes-base/nodes/Cal/cal.svg
@@ -1 +1,9 @@
-
+
diff --git a/packages/nodes-base/nodes/CircleCi/CircleCi.node.ts b/packages/nodes-base/nodes/CircleCi/CircleCi.node.ts
index 8d0316fe7e..9cca3546b8 100644
--- a/packages/nodes-base/nodes/CircleCi/CircleCi.node.ts
+++ b/packages/nodes-base/nodes/CircleCi/CircleCi.node.ts
@@ -15,7 +15,7 @@ export class CircleCi implements INodeType {
displayName: 'CircleCI',
name: 'circleCi',
// eslint-disable-next-line n8n-nodes-base/node-class-description-icon-not-svg
- icon: 'file:circleCi.png',
+ icon: { light: 'file:circleCi.svg', dark: 'file:circleCi.dark.svg' },
group: ['output'],
version: 1,
subtitle: '={{$parameter["operation"] + ": " + $parameter["resource"]}}',
diff --git a/packages/nodes-base/nodes/CircleCi/circleCi.dark.svg b/packages/nodes-base/nodes/CircleCi/circleCi.dark.svg
new file mode 100644
index 0000000000..b4a20b84bc
--- /dev/null
+++ b/packages/nodes-base/nodes/CircleCi/circleCi.dark.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/nodes-base/nodes/CircleCi/circleCi.png b/packages/nodes-base/nodes/CircleCi/circleCi.png
deleted file mode 100644
index 7b8a5a4766..0000000000
Binary files a/packages/nodes-base/nodes/CircleCi/circleCi.png and /dev/null differ
diff --git a/packages/nodes-base/nodes/CircleCi/circleCi.svg b/packages/nodes-base/nodes/CircleCi/circleCi.svg
new file mode 100644
index 0000000000..73ef3bae05
--- /dev/null
+++ b/packages/nodes-base/nodes/CircleCi/circleCi.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/nodes-base/nodes/Citrix/ADC/CitrixAdc.node.ts b/packages/nodes-base/nodes/Citrix/ADC/CitrixAdc.node.ts
index 121409ece0..be4ab4c01a 100644
--- a/packages/nodes-base/nodes/Citrix/ADC/CitrixAdc.node.ts
+++ b/packages/nodes-base/nodes/Citrix/ADC/CitrixAdc.node.ts
@@ -17,7 +17,7 @@ export class CitrixAdc implements INodeType {
description: INodeTypeDescription = {
displayName: 'Citrix ADC',
name: 'citrixAdc',
- icon: 'file:citrix.svg',
+ icon: { light: 'file:citrix.svg', dark: 'file:citrix.dark.svg' },
group: ['output'],
version: 1,
subtitle: '={{$parameter["operation"] + ": " + $parameter["resource"]}}',
diff --git a/packages/nodes-base/nodes/Citrix/ADC/citrix.dark.svg b/packages/nodes-base/nodes/Citrix/ADC/citrix.dark.svg
new file mode 100644
index 0000000000..690c357531
--- /dev/null
+++ b/packages/nodes-base/nodes/Citrix/ADC/citrix.dark.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/nodes-base/nodes/Citrix/ADC/citrix.svg b/packages/nodes-base/nodes/Citrix/ADC/citrix.svg
index 19e9d9673f..c4c9cdbdf3 100644
--- a/packages/nodes-base/nodes/Citrix/ADC/citrix.svg
+++ b/packages/nodes-base/nodes/Citrix/ADC/citrix.svg
@@ -1 +1,3 @@
-
\ No newline at end of file
+
diff --git a/packages/nodes-base/nodes/Clockify/Clockify.node.ts b/packages/nodes-base/nodes/Clockify/Clockify.node.ts
index 17793feda6..a78999bbdb 100644
--- a/packages/nodes-base/nodes/Clockify/Clockify.node.ts
+++ b/packages/nodes-base/nodes/Clockify/Clockify.node.ts
@@ -35,7 +35,7 @@ export class Clockify implements INodeType {
description: INodeTypeDescription = {
displayName: 'Clockify',
name: 'clockify',
- icon: 'file:clockify.svg',
+ icon: { light: 'file:clockify.svg', dark: 'file:clockify.dark.svg' },
group: ['transform'],
version: 1,
subtitle: '={{$parameter["operation"] + ": " + $parameter["resource"]}}',
diff --git a/packages/nodes-base/nodes/Clockify/clockify.dark.svg b/packages/nodes-base/nodes/Clockify/clockify.dark.svg
new file mode 100644
index 0000000000..33527e4611
--- /dev/null
+++ b/packages/nodes-base/nodes/Clockify/clockify.dark.svg
@@ -0,0 +1,4 @@
+
diff --git a/packages/nodes-base/nodes/Clockify/clockify.svg b/packages/nodes-base/nodes/Clockify/clockify.svg
index 1750886588..27fc2670ff 100644
--- a/packages/nodes-base/nodes/Clockify/clockify.svg
+++ b/packages/nodes-base/nodes/Clockify/clockify.svg
@@ -1 +1,4 @@
-
\ No newline at end of file
+
diff --git a/packages/nodes-base/nodes/Cockpit/Cockpit.node.ts b/packages/nodes-base/nodes/Cockpit/Cockpit.node.ts
index ba88d62fbb..058569b6e7 100644
--- a/packages/nodes-base/nodes/Cockpit/Cockpit.node.ts
+++ b/packages/nodes-base/nodes/Cockpit/Cockpit.node.ts
@@ -24,7 +24,7 @@ export class Cockpit implements INodeType {
displayName: 'Cockpit',
name: 'cockpit',
// eslint-disable-next-line n8n-nodes-base/node-class-description-icon-not-svg
- icon: 'file:cockpit.png',
+ icon: { light: 'file:cockpit.svg', dark: 'file:cockpit.dark.svg' },
group: ['output'],
version: 1,
subtitle: '={{ $parameter["operation"] + ": " + $parameter["resource"] }}',
diff --git a/packages/nodes-base/nodes/Cockpit/cockpit.dark.svg b/packages/nodes-base/nodes/Cockpit/cockpit.dark.svg
new file mode 100644
index 0000000000..357b546b26
--- /dev/null
+++ b/packages/nodes-base/nodes/Cockpit/cockpit.dark.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/nodes-base/nodes/Cockpit/cockpit.png b/packages/nodes-base/nodes/Cockpit/cockpit.png
deleted file mode 100644
index ddbe6ead67..0000000000
Binary files a/packages/nodes-base/nodes/Cockpit/cockpit.png and /dev/null differ
diff --git a/packages/nodes-base/nodes/Cockpit/cockpit.svg b/packages/nodes-base/nodes/Cockpit/cockpit.svg
new file mode 100644
index 0000000000..134bb96ea8
--- /dev/null
+++ b/packages/nodes-base/nodes/Cockpit/cockpit.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/nodes-base/nodes/Compression/Compression.node.ts b/packages/nodes-base/nodes/Compression/Compression.node.ts
index a26a99657b..506b239ffe 100644
--- a/packages/nodes-base/nodes/Compression/Compression.node.ts
+++ b/packages/nodes-base/nodes/Compression/Compression.node.ts
@@ -48,6 +48,7 @@ export class Compression implements INodeType {
displayName: 'Compression',
name: 'compression',
icon: 'fa:file-archive',
+ iconColor: 'green',
group: ['transform'],
subtitle: '={{$parameter["operation"]}}',
version: [1, 1.1],
diff --git a/packages/nodes-base/nodes/Copper/copper.svg b/packages/nodes-base/nodes/Copper/copper.svg
index 34114d9b91..90e88bfaf0 100644
--- a/packages/nodes-base/nodes/Copper/copper.svg
+++ b/packages/nodes-base/nodes/Copper/copper.svg
@@ -1 +1,4 @@
-
\ No newline at end of file
+
diff --git a/packages/nodes-base/nodes/CrowdDev/CrowdDev.node.ts b/packages/nodes-base/nodes/CrowdDev/CrowdDev.node.ts
index 76cd06d60a..b245e79a57 100644
--- a/packages/nodes-base/nodes/CrowdDev/CrowdDev.node.ts
+++ b/packages/nodes-base/nodes/CrowdDev/CrowdDev.node.ts
@@ -5,7 +5,7 @@ export class CrowdDev implements INodeType {
description: INodeTypeDescription = {
displayName: 'crowd.dev',
name: 'crowdDev',
- icon: 'file:crowdDev.svg',
+ icon: { light: 'file:crowdDev.svg', dark: 'file:crowdDev.dark.svg' },
group: ['transform'],
version: 1,
subtitle: '={{ $parameter["operation"] + ": " + $parameter["resource"] }}',
diff --git a/packages/nodes-base/nodes/CrowdDev/crowdDev.dark.svg b/packages/nodes-base/nodes/CrowdDev/crowdDev.dark.svg
new file mode 100644
index 0000000000..d991be4a15
--- /dev/null
+++ b/packages/nodes-base/nodes/CrowdDev/crowdDev.dark.svg
@@ -0,0 +1,4 @@
+
diff --git a/packages/nodes-base/nodes/CrowdDev/crowdDev.svg b/packages/nodes-base/nodes/CrowdDev/crowdDev.svg
index c131b92df9..80971d7573 100644
--- a/packages/nodes-base/nodes/CrowdDev/crowdDev.svg
+++ b/packages/nodes-base/nodes/CrowdDev/crowdDev.svg
@@ -1 +1,4 @@
-
\ No newline at end of file
+
diff --git a/packages/nodes-base/nodes/Crypto/Crypto.node.ts b/packages/nodes-base/nodes/Crypto/Crypto.node.ts
index fc6416349c..131946f635 100644
--- a/packages/nodes-base/nodes/Crypto/Crypto.node.ts
+++ b/packages/nodes-base/nodes/Crypto/Crypto.node.ts
@@ -30,6 +30,7 @@ export class Crypto implements INodeType {
displayName: 'Crypto',
name: 'crypto',
icon: 'fa:key',
+ iconColor: 'green',
group: ['transform'],
version: 1,
subtitle: '={{$parameter["action"]}}',
diff --git a/packages/nodes-base/nodes/CustomerIo/CustomerIo.node.ts b/packages/nodes-base/nodes/CustomerIo/CustomerIo.node.ts
index d9526152e6..6b82c4aab0 100644
--- a/packages/nodes-base/nodes/CustomerIo/CustomerIo.node.ts
+++ b/packages/nodes-base/nodes/CustomerIo/CustomerIo.node.ts
@@ -16,7 +16,7 @@ export class CustomerIo implements INodeType {
description: INodeTypeDescription = {
displayName: 'Customer.io',
name: 'customerIo',
- icon: 'file:customerio.svg',
+ icon: { light: 'file:customerio.svg', dark: 'file:customerio.dark.svg' },
group: ['output'],
version: 1,
subtitle: '={{$parameter["operation"] + ": " + $parameter["resource"]}}',
diff --git a/packages/nodes-base/nodes/CustomerIo/customerio.dark.svg b/packages/nodes-base/nodes/CustomerIo/customerio.dark.svg
new file mode 100644
index 0000000000..524e5f06e6
--- /dev/null
+++ b/packages/nodes-base/nodes/CustomerIo/customerio.dark.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/nodes-base/nodes/CustomerIo/customerio.svg b/packages/nodes-base/nodes/CustomerIo/customerio.svg
index 6230b5741a..a26581f23f 100644
--- a/packages/nodes-base/nodes/CustomerIo/customerio.svg
+++ b/packages/nodes-base/nodes/CustomerIo/customerio.svg
@@ -1 +1,3 @@
-
+
diff --git a/packages/nodes-base/nodes/DateTime/DateTime.node.ts b/packages/nodes-base/nodes/DateTime/DateTime.node.ts
index daffa817c0..b5960c11c0 100644
--- a/packages/nodes-base/nodes/DateTime/DateTime.node.ts
+++ b/packages/nodes-base/nodes/DateTime/DateTime.node.ts
@@ -10,6 +10,7 @@ export class DateTime extends VersionedNodeType {
displayName: 'Date & Time',
name: 'dateTime',
icon: 'fa:clock',
+ iconColor: 'green',
group: ['transform'],
defaultVersion: 2,
description: 'Allows you to manipulate date and time values',
diff --git a/packages/nodes-base/nodes/DebugHelper/DebugHelper.dark.svg b/packages/nodes-base/nodes/DebugHelper/DebugHelper.dark.svg
new file mode 100644
index 0000000000..86a929a1b7
--- /dev/null
+++ b/packages/nodes-base/nodes/DebugHelper/DebugHelper.dark.svg
@@ -0,0 +1,5 @@
+
diff --git a/packages/nodes-base/nodes/DebugHelper/DebugHelper.node.ts b/packages/nodes-base/nodes/DebugHelper/DebugHelper.node.ts
index 6d657f6645..b8a80d110f 100644
--- a/packages/nodes-base/nodes/DebugHelper/DebugHelper.node.ts
+++ b/packages/nodes-base/nodes/DebugHelper/DebugHelper.node.ts
@@ -26,7 +26,7 @@ export class DebugHelper implements INodeType {
description: INodeTypeDescription = {
displayName: 'DebugHelper',
name: 'debugHelper',
- icon: 'file:DebugHelper.svg',
+ icon: { light: 'file:DebugHelper.svg', dark: 'file:DebugHelper.dark.svg' },
group: ['output'],
subtitle: '={{$parameter["category"]}}',
description: 'Causes problems intentionally and generates useful data for debugging',
diff --git a/packages/nodes-base/nodes/DebugHelper/DebugHelper.svg b/packages/nodes-base/nodes/DebugHelper/DebugHelper.svg
index b1a62f59e0..e6940bec13 100644
--- a/packages/nodes-base/nodes/DebugHelper/DebugHelper.svg
+++ b/packages/nodes-base/nodes/DebugHelper/DebugHelper.svg
@@ -1 +1,5 @@
-
\ No newline at end of file
+
diff --git a/packages/nodes-base/nodes/DeepL/DeepL.node.ts b/packages/nodes-base/nodes/DeepL/DeepL.node.ts
index 1dee0443a8..926f1be909 100644
--- a/packages/nodes-base/nodes/DeepL/DeepL.node.ts
+++ b/packages/nodes-base/nodes/DeepL/DeepL.node.ts
@@ -16,7 +16,7 @@ export class DeepL implements INodeType {
description: INodeTypeDescription = {
displayName: 'DeepL',
name: 'deepL',
- icon: 'file:deepl.svg',
+ icon: { light: 'file:deepl.svg', dark: 'file:deepl.dark.svg' },
group: ['input', 'output'],
version: 1,
description: 'Translate data using DeepL',
diff --git a/packages/nodes-base/nodes/DeepL/deepL.dark.svg b/packages/nodes-base/nodes/DeepL/deepL.dark.svg
new file mode 100644
index 0000000000..6edfd447fa
--- /dev/null
+++ b/packages/nodes-base/nodes/DeepL/deepL.dark.svg
@@ -0,0 +1,4 @@
+
diff --git a/packages/nodes-base/nodes/DeepL/deepl.svg b/packages/nodes-base/nodes/DeepL/deepl.svg
index 889cf28b77..121c2a270b 100644
--- a/packages/nodes-base/nodes/DeepL/deepl.svg
+++ b/packages/nodes-base/nodes/DeepL/deepl.svg
@@ -1 +1,4 @@
-
\ No newline at end of file
+
diff --git a/packages/nodes-base/nodes/Drift/Drift.node.ts b/packages/nodes-base/nodes/Drift/Drift.node.ts
index 2cf3770747..ef385d573d 100644
--- a/packages/nodes-base/nodes/Drift/Drift.node.ts
+++ b/packages/nodes-base/nodes/Drift/Drift.node.ts
@@ -14,7 +14,7 @@ export class Drift implements INodeType {
displayName: 'Drift',
name: 'drift',
// eslint-disable-next-line n8n-nodes-base/node-class-description-icon-not-svg
- icon: 'file:drift.png',
+ icon: { light: 'file:drift.svg', dark: 'file:drift.dark.svg' },
group: ['output'],
version: 1,
subtitle: '={{$parameter["operation"] + ": " + $parameter["resource"]}}',
diff --git a/packages/nodes-base/nodes/Drift/drift.dark.svg b/packages/nodes-base/nodes/Drift/drift.dark.svg
new file mode 100644
index 0000000000..5de7e7e2cd
--- /dev/null
+++ b/packages/nodes-base/nodes/Drift/drift.dark.svg
@@ -0,0 +1,7 @@
+
diff --git a/packages/nodes-base/nodes/Drift/drift.png b/packages/nodes-base/nodes/Drift/drift.png
deleted file mode 100644
index 98d008983c..0000000000
Binary files a/packages/nodes-base/nodes/Drift/drift.png and /dev/null differ
diff --git a/packages/nodes-base/nodes/Drift/drift.svg b/packages/nodes-base/nodes/Drift/drift.svg
new file mode 100644
index 0000000000..6894deeeb5
--- /dev/null
+++ b/packages/nodes-base/nodes/Drift/drift.svg
@@ -0,0 +1,7 @@
+
diff --git a/packages/nodes-base/nodes/EditImage/EditImage.node.ts b/packages/nodes-base/nodes/EditImage/EditImage.node.ts
index 04b8e3dc91..098c75c67a 100644
--- a/packages/nodes-base/nodes/EditImage/EditImage.node.ts
+++ b/packages/nodes-base/nodes/EditImage/EditImage.node.ts
@@ -757,6 +757,7 @@ export class EditImage implements INodeType {
displayName: 'Edit Image',
name: 'editImage',
icon: 'fa:image',
+ iconColor: 'purple',
group: ['transform'],
version: 1,
description: 'Edits an image like blur, resize or adding border and text',
diff --git a/packages/nodes-base/nodes/Egoi/Egoi.node.ts b/packages/nodes-base/nodes/Egoi/Egoi.node.ts
index acffe03e97..f50136afee 100644
--- a/packages/nodes-base/nodes/Egoi/Egoi.node.ts
+++ b/packages/nodes-base/nodes/Egoi/Egoi.node.ts
@@ -18,7 +18,7 @@ export class Egoi implements INodeType {
displayName: 'E-goi',
name: 'egoi',
// eslint-disable-next-line n8n-nodes-base/node-class-description-icon-not-svg
- icon: 'file:egoi.png',
+ icon: 'file:egoi.svg',
group: ['output'],
version: 1,
subtitle: '={{$parameter["operation"] + ": " + $parameter["resource"]}}',
diff --git a/packages/nodes-base/nodes/Egoi/egoi.png b/packages/nodes-base/nodes/Egoi/egoi.png
deleted file mode 100644
index c1c02a89f6..0000000000
Binary files a/packages/nodes-base/nodes/Egoi/egoi.png and /dev/null differ
diff --git a/packages/nodes-base/nodes/Egoi/egoi.svg b/packages/nodes-base/nodes/Egoi/egoi.svg
new file mode 100644
index 0000000000..50661a5779
--- /dev/null
+++ b/packages/nodes-base/nodes/Egoi/egoi.svg
@@ -0,0 +1,5 @@
+
diff --git a/packages/nodes-base/nodes/ErrorTrigger/ErrorTrigger.node.ts b/packages/nodes-base/nodes/ErrorTrigger/ErrorTrigger.node.ts
index 21cae5777b..a3f30516cc 100644
--- a/packages/nodes-base/nodes/ErrorTrigger/ErrorTrigger.node.ts
+++ b/packages/nodes-base/nodes/ErrorTrigger/ErrorTrigger.node.ts
@@ -10,6 +10,7 @@ export class ErrorTrigger implements INodeType {
displayName: 'Error Trigger',
name: 'errorTrigger',
icon: 'fa:bug',
+ iconColor: 'blue',
group: ['trigger'],
version: 1,
description: 'Triggers the workflow when another workflow has an error',
diff --git a/packages/nodes-base/nodes/ExecuteCommand/ExecuteCommand.node.ts b/packages/nodes-base/nodes/ExecuteCommand/ExecuteCommand.node.ts
index 5250270038..b5e0b0f702 100644
--- a/packages/nodes-base/nodes/ExecuteCommand/ExecuteCommand.node.ts
+++ b/packages/nodes-base/nodes/ExecuteCommand/ExecuteCommand.node.ts
@@ -47,6 +47,7 @@ export class ExecuteCommand implements INodeType {
displayName: 'Execute Command',
name: 'executeCommand',
icon: 'fa:terminal',
+ iconColor: 'crimson',
group: ['transform'],
version: 1,
description: 'Executes a command on the host',
diff --git a/packages/nodes-base/nodes/ExecuteWorkflow/ExecuteWorkflow.node.ts b/packages/nodes-base/nodes/ExecuteWorkflow/ExecuteWorkflow.node.ts
index 55f8c90338..d75b3098eb 100644
--- a/packages/nodes-base/nodes/ExecuteWorkflow/ExecuteWorkflow.node.ts
+++ b/packages/nodes-base/nodes/ExecuteWorkflow/ExecuteWorkflow.node.ts
@@ -14,6 +14,7 @@ export class ExecuteWorkflow implements INodeType {
displayName: 'Execute Workflow',
name: 'executeWorkflow',
icon: 'fa:sign-in-alt',
+ iconColor: 'orange-red',
group: ['transform'],
version: 1,
subtitle: '={{"Workflow: " + $parameter["workflowId"]}}',
diff --git a/packages/nodes-base/nodes/ExecutionData/ExecutionData.node.ts b/packages/nodes-base/nodes/ExecutionData/ExecutionData.node.ts
index 0dd3097e13..9bba0a7c70 100644
--- a/packages/nodes-base/nodes/ExecutionData/ExecutionData.node.ts
+++ b/packages/nodes-base/nodes/ExecutionData/ExecutionData.node.ts
@@ -12,6 +12,7 @@ export class ExecutionData implements INodeType {
name: 'executionData',
icon: 'fa:tasks',
group: ['input'],
+ iconColor: 'light-green',
version: 1,
description: 'Add execution data for search',
defaults: {
diff --git a/packages/nodes-base/nodes/Files/ConvertToFile/ConvertToFile.node.ts b/packages/nodes-base/nodes/Files/ConvertToFile/ConvertToFile.node.ts
index a89beebb51..b30aa7cb5d 100644
--- a/packages/nodes-base/nodes/Files/ConvertToFile/ConvertToFile.node.ts
+++ b/packages/nodes-base/nodes/Files/ConvertToFile/ConvertToFile.node.ts
@@ -16,7 +16,7 @@ export class ConvertToFile implements INodeType {
description: INodeTypeDescription = {
displayName: 'Convert to File',
name: 'convertToFile',
- icon: 'file:convertToFile.svg',
+ icon: { light: 'file:convertToFile.svg', dark: 'file:convertToFile.dark.svg' },
group: ['input'],
version: [1, 1.1],
description: 'Convert JSON data to binary data',
diff --git a/packages/nodes-base/nodes/Files/ConvertToFile/convertToFile.dark.svg b/packages/nodes-base/nodes/Files/ConvertToFile/convertToFile.dark.svg
new file mode 100644
index 0000000000..8c53600475
--- /dev/null
+++ b/packages/nodes-base/nodes/Files/ConvertToFile/convertToFile.dark.svg
@@ -0,0 +1,5 @@
+
diff --git a/packages/nodes-base/nodes/Files/ConvertToFile/convertToFile.svg b/packages/nodes-base/nodes/Files/ConvertToFile/convertToFile.svg
index 60ca4a415a..ec23c0abc3 100644
--- a/packages/nodes-base/nodes/Files/ConvertToFile/convertToFile.svg
+++ b/packages/nodes-base/nodes/Files/ConvertToFile/convertToFile.svg
@@ -1,12 +1,5 @@
-