From 1d81afcbdf17166f3ebf468673e3ba348ae7fecb Mon Sep 17 00:00:00 2001
From: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>
Date: Wed, 1 Nov 2023 16:27:32 +0100
Subject: [PATCH] fix: Fix dark mode small issues (#7573)

Github issue / Community forum post (link here to close automatically):
---
 packages/design-system/src/components/N8nMarkdown/Markdown.vue | 2 +-
 packages/design-system/src/css/_tokens.dark.scss               | 3 +++
 packages/design-system/src/css/_tokens.scss                    | 1 +
 packages/editor-ui/src/components/CollectionParameter.vue      | 1 +
 packages/editor-ui/src/utils/nodeViewUtils.ts                  | 2 +-
 5 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/design-system/src/components/N8nMarkdown/Markdown.vue b/packages/design-system/src/components/N8nMarkdown/Markdown.vue
index 456ff338bd..42fb662b7f 100644
--- a/packages/design-system/src/components/N8nMarkdown/Markdown.vue
+++ b/packages/design-system/src/components/N8nMarkdown/Markdown.vue
@@ -317,7 +317,7 @@ export default defineComponent({
 	}
 
 	code {
-		background-color: var(--color-background-base);
+		background-color: var(--color-sticky-code-background);
 		padding: 0 var(--spacing-4xs);
 		color: var(--color-secondary);
 	}
diff --git a/packages/design-system/src/css/_tokens.dark.scss b/packages/design-system/src/css/_tokens.dark.scss
index 5771a88a98..19462f1a27 100644
--- a/packages/design-system/src/css/_tokens.dark.scss
+++ b/packages/design-system/src/css/_tokens.dark.scss
@@ -36,6 +36,9 @@
 	--color-canvas-selected: var(--prim-gray-0-alpha-025);
 	--node-type-main-color: var(--prim-gray-420);
 
+	// Sticky
+	--color-sticky-code-background: var(--color-background-light);
+
 	// Expressions
 	--color-valid-resolvable-foreground: var(--prim-color-alt-a-tint-300);
 	--color-valid-resolvable-background: var(--prim-color-alt-a-alpha-025);
diff --git a/packages/design-system/src/css/_tokens.scss b/packages/design-system/src/css/_tokens.scss
index cc58b86128..b0a4313497 100644
--- a/packages/design-system/src/css/_tokens.scss
+++ b/packages/design-system/src/css/_tokens.scss
@@ -77,6 +77,7 @@
 	--color-sticky-default-background: var(--prim-color-alt-d);
 	--color-sticky-default-border: var(--prim-color-alt-d-shade-150);
 	--color-sticky-font: var(--prim-gray-740);
+	--color-sticky-code-background: var(--color-background-base);
 
 	// Expressions
 	--color-valid-resolvable-foreground: var(--prim-color-alt-a);
diff --git a/packages/editor-ui/src/components/CollectionParameter.vue b/packages/editor-ui/src/components/CollectionParameter.vue
index e8fe3283cf..91d5a83893 100644
--- a/packages/editor-ui/src/components/CollectionParameter.vue
+++ b/packages/editor-ui/src/components/CollectionParameter.vue
@@ -208,6 +208,7 @@ export default defineComponent({
 		margin-top: var(--spacing-xs);
 
 		.button {
+			color: var(--color-text-dark);
 			font-weight: var(--font-weight-normal);
 			--button-border-color: var(--color-foreground-base);
 			--button-background-color: var(--color-background-base);
diff --git a/packages/editor-ui/src/utils/nodeViewUtils.ts b/packages/editor-ui/src/utils/nodeViewUtils.ts
index 682a1a31e0..6f7ee1b8d9 100644
--- a/packages/editor-ui/src/utils/nodeViewUtils.ts
+++ b/packages/editor-ui/src/utils/nodeViewUtils.ts
@@ -596,7 +596,7 @@ export const getBackgroundStyles = (
 		'background-position': `left ${offsetPosition[0]}px top ${offsetPosition[1]}px`,
 	};
 	if (squareSize > 10.5) {
-		const dotColor = getStyleTokenValue('--color-canvas-dot');
+		const dotColor = getStyleTokenValue('--color-canvas-dot', true);
 		return {
 			...styles,
 			'background-image': `radial-gradient(circle at ${dotPosition}px ${dotPosition}px, ${dotColor} ${dotSize}px, transparent 0)`,