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/stores/ui.store.ts

@@ -37,6 +37,7 @@ import {
 	DEBUG_PAYWALL_MODAL_KEY,
 	N8N_PRICING_PAGE_URL,
 	WORKFLOW_HISTORY_VERSION_RESTORE,
+	LOCAL_STORAGE_THEME,
 } from '@/constants';
 import type {
 	CloudUpdateLinkSourceType,
@@ -51,6 +52,8 @@ import type {
 	XYPosition,
 	Modals,
 	NewCredentialsModal,
+	ThemeOption,
+	AppliedThemeOption,
 } from '@/Interface';
 import { defineStore } from 'pinia';
 import { useRootStore } from '@/stores/n8nRoot.store';
@@ -63,10 +66,41 @@ import { getStyleTokenValue } from '@/utils/htmlUtils';
 import { dismissBannerPermanently } from '@/api/ui';
 import type { BannerName } from 'n8n-workflow';
 
+let savedTheme: ThemeOption = 'system';
+try {
+	const value = localStorage.getItem(LOCAL_STORAGE_THEME) as AppliedThemeOption;
+	if (['light', 'dark'].includes(value)) {
+		savedTheme = value;
+		addThemeToBody(value);
+	}
+} catch (e) {}
+
+function addThemeToBody(theme: AppliedThemeOption) {
+	window.document.body.setAttribute('data-theme', theme);
+}
+
+function updateTheme(theme: ThemeOption) {
+	if (theme === 'system') {
+		window.document.body.removeAttribute('data-theme');
+		localStorage.removeItem(LOCAL_STORAGE_THEME);
+	} else {
+		addThemeToBody(theme);
+		localStorage.setItem(LOCAL_STORAGE_THEME, theme);
+	}
+}
+
+function getPreferredTheme(): AppliedThemeOption {
+	const isDarkMode =
+		!!window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)')?.matches;
+
+	return isDarkMode ? 'dark' : 'light';
+}
+
 export const useUIStore = defineStore(STORES.UI, {
 	state: (): UIState => ({
 		activeActions: [],
 		activeCredentialType: null,
+		theme: savedTheme,
 		modals: {
 			[ABOUT_MODAL_KEY]: {
 				open: false,
@@ -199,11 +233,16 @@ export const useUIStore = defineStore(STORES.UI, {
 		bannerStack: [],
 	}),
 	getters: {
-		logo() {
+		appliedTheme(): AppliedThemeOption {
+			return this.theme === 'system' ? getPreferredTheme() : this.theme;
+		},
+		logo(): string {
 			const { releaseChannel } = useSettingsStore().settings;
+			const type = this.appliedTheme === 'dark' ? '-dark-mode.svg' : '.svg';
+
 			return releaseChannel === 'stable'
-				? 'n8n-logo-expanded.svg'
-				: `n8n-${releaseChannel}-logo.svg`;
+				? `n8n-logo-expanded${type}`
+				: `n8n-${releaseChannel}-logo${type}`;
 		},
 		contextBasedTranslationKeys() {
 			const settingsStore = useSettingsStore();
@@ -377,6 +416,10 @@ export const useUIStore = defineStore(STORES.UI, {
 		},
 	},
 	actions: {
+		setTheme(theme: ThemeOption): void {
+			this.theme = theme;
+			updateTheme(theme);
+		},
 		setMode(name: keyof Modals, mode: string): void {
 			this.modals[name] = {
 				...this.modals[name],