refactor(editor): Color palette updates, introduce dark mode (#6980)

Github issue / Community forum post (link here to close automatically):

---------

Co-authored-by: Mutasem <mutdmour@gmail.com>

packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue

@@ -53,7 +53,12 @@
 		<template #content>
 			<div :class="$style.container" data-test-id="credential-edit-dialog">
 				<div :class="$style.sidebar">
-					<n8n-menu mode="tabs" :items="sidebarItems" @select="onTabSelect"></n8n-menu>
+					<n8n-menu
+						mode="tabs"
+						:items="sidebarItems"
+						:transparentBackground="true"
+						@select="onTabSelect"
+					></n8n-menu>
 				</div>
 				<div v-if="activeTab === 'connection'" :class="$style.mainContent" ref="content">
 					<CredentialConfig

packages/editor-ui/src/components/CredentialEdit/GoogleAuthButton.vue

@@ -7,14 +7,16 @@
 </template>
 
 <script lang="ts" setup>
+import { useUIStore } from '@/stores';
 import { useRootStore } from '@/stores/n8nRoot.store';
 
 const { baseUrl } = useRootStore();
+const type = useUIStore().appliedTheme === 'dark' ? '.dark.png' : '.png';
 const googleAuthButtons = {
-	'--google-auth-btn-normal': `url(${baseUrl}google-auth/normal.png`,
-	'--google-auth-btn-focus': `url(${baseUrl}google-auth/focus.png`,
-	'--google-auth-btn-pressed': `url(${baseUrl}google-auth/pressed.png`,
-	'--google-auth-btn-disabled': `url(${baseUrl}google-auth/disabled.png`,
+	'--google-auth-btn-normal': `url(${baseUrl}google-auth/normal${type}`,
+	'--google-auth-btn-focus': `url(${baseUrl}google-auth/focus${type}`,
+	'--google-auth-btn-pressed': `url(${baseUrl}google-auth/pressed${type}`,
+	'--google-auth-btn-disabled': `url(${baseUrl}google-auth/disabled${type}`,
 };
 </script>