fix(editor): Color scheme for a markdown code blocks in dark mode (#11008)

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;

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;

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);