From f644434aa9de766799a732c40b2f060cc9000f57 Mon Sep 17 00:00:00 2001
From: Mutasem Aldmour <mutasem@n8n.io>
Date: Mon, 14 Oct 2024 15:23:11 +0200
Subject: [PATCH] fix: Adjust arrow button colors in dark mode

---
 packages/design-system/src/components/N8nTabs/Tabs.vue | 2 +-
 packages/editor-ui/src/components/RunData.vue          | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/design-system/src/components/N8nTabs/Tabs.vue b/packages/design-system/src/components/N8nTabs/Tabs.vue
index 501b3bd3b2204..9b56e0cfe550f 100644
--- a/packages/design-system/src/components/N8nTabs/Tabs.vue
+++ b/packages/design-system/src/components/N8nTabs/Tabs.vue
@@ -200,7 +200,7 @@ const scrollRight = () => scroll(50);
 
 .button {
 	position: absolute;
-	background-color: var(--color-background-base);
+	background-color: var(--color-tabs-arrow-buttons, var(--color-background-base));
 	z-index: 1;
 	height: 24px;
 	width: 10px;
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index cfed2a76d2269..fa5f896db569d 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -1861,6 +1861,7 @@ export default defineComponent({
 	justify-content: space-between;
 	align-items: center;
 	min-height: 30px;
+	--color-tabs-arrow-buttons: var(--color-run-data-background);
 }
 
 .itemsCount {