From b20d2eb403f71fe1dc21c92df118adcebef51ffe Mon Sep 17 00:00:00 2001
From: Eugene <eugene@n8n.io>
Date: Mon, 30 Sep 2024 13:41:46 +0200
Subject: [PATCH] fix(editor): Color scheme for a markdown code blocks in dark
 mode (#11008)

---
 packages/@n8n/chat/src/css/markdown.scss      | 19 +++++++++++++++++--
 .../InlineExpressionTip.vue                   | 14 +++++++-------
 .../WorkflowLMChat/WorkflowLMChat.vue         |  3 +++
 3 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/packages/@n8n/chat/src/css/markdown.scss b/packages/@n8n/chat/src/css/markdown.scss
index 6d219bbe02..070e6d6a5f 100644
--- a/packages/@n8n/chat/src/css/markdown.scss
+++ b/packages/@n8n/chat/src/css/markdown.scss
@@ -1,4 +1,20 @@
-@import 'highlight.js/styles/github.css';
+@use 'sass:meta';
+
+@include meta.load-css('highlight.js/styles/github.css');
+
+@mixin hljs-dark-theme {
+	@include meta.load-css('highlight.js/styles/github-dark-dimmed.css');
+}
+
+body {
+	&[data-theme='dark'] {
+		@include hljs-dark-theme;
+	}
+
+	@media (prefers-color-scheme: dark) {
+		@include hljs-dark-theme;
+	}
+}
 
 // https://github.com/pxlrbt/markdown-css
 .chat-message-markdown {
@@ -561,7 +577,6 @@
 
 	kbd, /* different style for kbd? */
 	code {
-		background: #eee;
 		padding: 0.1em 0.25em;
 		border-radius: 0.2rem;
 		-webkit-box-decoration-break: clone;
diff --git a/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionTip.vue b/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionTip.vue
index 1ff90df190..897d8304b6 100644
--- a/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionTip.vue
+++ b/packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionTip.vue
@@ -145,6 +145,13 @@ watchDebounced(
 	color: var(--color-text-base);
 	font-size: var(--font-size-2xs);
 	padding: var(--spacing-2xs);
+
+	code {
+		font-size: var(--font-size-3xs);
+		background: var(--color-background-base);
+		padding: var(--spacing-5xs);
+		border-radius: var(--border-radius-base);
+	}
 }
 
 .content {
@@ -165,13 +172,6 @@ watchDebounced(
 	display: inline;
 }
 
-code {
-	font-size: var(--font-size-3xs);
-	background: var(--color-background-base);
-	padding: var(--spacing-5xs);
-	border-radius: var(--border-radius-base);
-}
-
 .pill {
 	display: inline-flex;
 	align-items: center;
diff --git a/packages/editor-ui/src/components/WorkflowLMChat/WorkflowLMChat.vue b/packages/editor-ui/src/components/WorkflowLMChat/WorkflowLMChat.vue
index 9d032f5fa1..b4d082e7bd 100644
--- a/packages/editor-ui/src/components/WorkflowLMChat/WorkflowLMChat.vue
+++ b/packages/editor-ui/src/components/WorkflowLMChat/WorkflowLMChat.vue
@@ -680,6 +680,9 @@ onMounted(() => {
 	[data-theme='dark'] & {
 		--chat--input--text-color: var(--input-font-color, var(--color-text-dark));
 	}
+	@media (prefers-color-scheme: dark) {
+		--chat--input--text-color: var(--input-font-color, var(--color-text-dark));
+	}
 
 	border-bottom-right-radius: var(--border-radius-base);
 	border-top-right-radius: var(--border-radius-base);