- {{ $locale.baseText('noTagsView.readyToOrganizeYourWorkflows') }}
+
+
+ {{ $locale.baseText('noTagsView.readyToOrganizeYourWorkflows') }}
+
{{ $locale.baseText('noTagsView.withWorkflowTagsYouReFree') }}
@@ -47,12 +49,6 @@ $--footer-spacing: 45px;
line-height: 14px;
}
-.headline {
- font-size: 17.6px;
- color: black;
- margin-bottom: 12px;
-}
-
.description {
font-size: 14px;
line-height: 21px;
diff --git a/packages/editor-ui/src/components/ValueSurvey.vue b/packages/editor-ui/src/components/ValueSurvey.vue
index 2d3fb660c3..5344275d2d 100644
--- a/packages/editor-ui/src/components/ValueSurvey.vue
+++ b/packages/editor-ui/src/components/ValueSurvey.vue
@@ -200,6 +200,10 @@ export default defineComponent({
margin-top: 10px;
padding: 0 15px;
}
+
+ h2 {
+ color: var(--color-value-survey-font);
+ }
}
.content {
@@ -214,6 +218,9 @@ export default defineComponent({
.wrapper {
display: flex;
flex-direction: column;
+ .text span {
+ color: var(--color-value-survey-font);
+ }
}
.buttons {
@@ -256,7 +263,7 @@ export default defineComponent({
}
.valueSurvey {
- background: var(--color-background-dark);
+ background: var(--color-value-survey-background);
height: 120px;
top: auto;
@@ -278,7 +285,7 @@ export default defineComponent({
right: 16px;
position: absolute;
font-weight: var(--font-weight-bold);
- color: var(--color-text-xlight);
+ color: var(--color-value-survey-font);
@media (max-width: $breakpoint-xs) {
top: 2px;
diff --git a/packages/editor-ui/src/components/VariablesRow.vue b/packages/editor-ui/src/components/VariablesRow.vue
index 03884b0848..670eaf4f66 100644
--- a/packages/editor-ui/src/components/VariablesRow.vue
+++ b/packages/editor-ui/src/components/VariablesRow.vue
@@ -264,8 +264,8 @@ function focusFirstInput() {
.usageSyntax {
cursor: pointer;
- background: var(--color-success-tint-2);
- color: var(--color-success);
+ background: var(--color-variables-usage-syntax-bg);
+ color: var(--color-variables-usage-font);
font-family: var(--font-family-monospace);
font-size: var(--font-size-s);
}
diff --git a/packages/editor-ui/src/components/WorkflowActivator.vue b/packages/editor-ui/src/components/WorkflowActivator.vue
index 3c40b9cad5..b10796a705 100644
--- a/packages/editor-ui/src/components/WorkflowActivator.vue
+++ b/packages/editor-ui/src/components/WorkflowActivator.vue
@@ -163,7 +163,7 @@ export default defineComponent({
.could-not-be-started {
display: inline-block;
- color: #ff4949;
+ color: var(--color-text-danger);
margin-left: 0.5em;
}
diff --git a/packages/editor-ui/src/composables/useLoadingService.ts b/packages/editor-ui/src/composables/useLoadingService.ts
index 2ec61c5d94..3ae53ed2c5 100644
--- a/packages/editor-ui/src/composables/useLoadingService.ts
+++ b/packages/editor-ui/src/composables/useLoadingService.ts
@@ -20,7 +20,7 @@ export function useLoadingService() {
lock: true,
text: text || i18n.baseText('genericHelpers.loading'),
spinner: 'el-icon-loading',
- background: 'rgba(255, 255, 255, 0.8)',
+ background: 'var(--color-dialog-overlay-background)',
}) as unknown as LoadingService;
}
diff --git a/packages/editor-ui/src/mixins/genericHelpers.ts b/packages/editor-ui/src/mixins/genericHelpers.ts
index 4b28e9d045..52d50e9a78 100644
--- a/packages/editor-ui/src/mixins/genericHelpers.ts
+++ b/packages/editor-ui/src/mixins/genericHelpers.ts
@@ -71,7 +71,7 @@ export const genericHelpers = defineComponent({
lock: true,
text: text || this.$locale.baseText('genericHelpers.loading'),
spinner: 'el-icon-loading',
- background: 'rgba(255, 255, 255, 0.8)',
+ background: 'var(--color-dialog-overlay-background)',
});
},
setLoadingText(text: string) {
diff --git a/packages/editor-ui/src/n8n-theme-variables.scss b/packages/editor-ui/src/n8n-theme-variables.scss
index 356053b621..b2040dba3e 100644
--- a/packages/editor-ui/src/n8n-theme-variables.scss
+++ b/packages/editor-ui/src/n8n-theme-variables.scss
@@ -11,7 +11,7 @@ $custom-font-light: var(--color-text-light);
$custom-font-very-light: var(--color-text-light);
$custom-expression-text: var(--color-secondary);
-$custom-expression-background: var(--color-background-lighter);
+$custom-expression-background: var(--color-background-light);
// Badge
$badge-danger-color: var(--color-danger);
@@ -100,7 +100,7 @@ $drawer-background-color: var(--color-background-xlight);
// updates-panel
$updates-panel-info-url-color: $color-primary;
$updates-panel-border: var(--border-base);
-$updates-panel-dark-background-color: var(--color-background-lighter);
+$updates-panel-dark-background-color: var(--color-background-light);
$updates-panel-description-text-color: var(--color-text-base);
$updates-panel-text-color: var(--color-text-dark);
diff --git a/packages/editor-ui/src/n8n-theme.scss b/packages/editor-ui/src/n8n-theme.scss
index 2aaf36c07a..49a5f9863d 100644
--- a/packages/editor-ui/src/n8n-theme.scss
+++ b/packages/editor-ui/src/n8n-theme.scss
@@ -1,13 +1,6 @@
:root {
--node-type-background-l: 95%;
- --node-type-main-color-h: var(--color-foreground-xdark-h);
- --node-type-main-color-s: var(--color-foreground-xdark-s);
- --node-type-main-color-l: var(--color-foreground-xdark-l);
- --node-type-main-color: hsl(
- var(--node-type-main-color-h),
- var(--node-type-main-color-s),
- var(--node-type-main-color-l)
- );
+
--node-type-supplemental-label-color-h: 235;
--node-type-supplemental-label-color-s: 28%;
--node-type-supplemental-label-color-l: 40%;
@@ -188,6 +181,12 @@
font-weight: 400;
}
+// Dialog
+.el-overlay {
+ background-color: var(--color-dialog-overlay-background-dark);
+ backdrop-filter: blur(2px);
+}
+
.el-dialog {
border: var(--border-base);
box-shadow: 0px 6px 16px rgb(68 28 23 / 6%);
@@ -280,20 +279,6 @@
color: var(--color-text-dark);
}
}
-.el-table--striped {
- .el-table__body {
- tr.el-table__row--striped {
- background-color: var(--color-background-light);
- td {
- background: none;
- }
- }
- tr.el-table__row:hover,
- tr.el-table__row:hover > td {
- background-color: var(--color-primary-tint-3);
- }
- }
-}
// Tabs
.type-selector:focus,
@@ -416,6 +401,7 @@
&,
&:hover,
&:focus {
+ padding-left: 35px;
border-radius: var(--border-radius-base);
color: var(--color-text-dark);
background-color: var(--color-background-base);
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 5d5aa38746..f1a2cd85de 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -2198,6 +2198,11 @@
"mfa.setup.step2.toast.setupFinished.error.message": "Error enabling two-factor authentication",
"mfa.setup.step2.toast.tokenExpired.error.message": "MFA token expired. Close the modal and enable MFA again",
"settings.personal.mfa.section.title": "Two-factor authentication (2FA)",
+ "settings.personal.personalisation": "Personalisation",
+ "settings.personal.theme": "Theme",
+ "settings.personal.theme.systemDefault": "System default",
+ "settings.personal.theme.light": "Light theme",
+ "settings.personal.theme.dark": "Dark theme",
"settings.personal.mfa.button.disabled.infobox": "Two-factor authentication is currently disabled.",
"settings.personal.mfa.button.enabled.infobox": "Two-factor authentication is currently enabled.",
"settings.personal.mfa.button.enabled": "Enable 2FA",
diff --git a/packages/editor-ui/src/plugins/telemetry/index.ts b/packages/editor-ui/src/plugins/telemetry/index.ts
index 5663f26f18..fb445298ed 100644
--- a/packages/editor-ui/src/plugins/telemetry/index.ts
+++ b/packages/editor-ui/src/plugins/telemetry/index.ts
@@ -14,7 +14,7 @@ import {
TELEGRAM_NODE_TYPE,
} from '@/constants';
import { usePostHog } from '@/stores/posthog.store';
-import { useNDVStore } from '@/stores';
+import { useNDVStore, useUIStore } from '@/stores';
export class Telemetry {
private pageEventQueue: Array<{ route: RouteLocation }>;
@@ -128,6 +128,8 @@ export class Telemetry {
properties = route.meta.telemetry.getProperties(route);
}
+ properties.theme = useUIStore().appliedTheme;
+
const category = route.meta?.telemetry?.pageCategory || 'Editor';
this.rudderStack.page(category, pageName, properties);
} else {
diff --git a/packages/editor-ui/src/stores/ui.store.ts b/packages/editor-ui/src/stores/ui.store.ts
index 0a0de6faff..7358971c8b 100644
--- a/packages/editor-ui/src/stores/ui.store.ts
+++ b/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],
diff --git a/packages/editor-ui/src/styles/autocomplete-theme.scss b/packages/editor-ui/src/styles/autocomplete-theme.scss
index 6eda8b76c8..fd6105a228 100644
--- a/packages/editor-ui/src/styles/autocomplete-theme.scss
+++ b/packages/editor-ui/src/styles/autocomplete-theme.scss
@@ -30,8 +30,12 @@
}
}
+.ͼ2 .cm-tooltip-autocomplete ul li[aria-selected] {
+ background-color: var(--color-autocomplete-selected-background);
+}
+
.ͼ2 .cm-tooltip-autocomplete ul li[aria-selected] .cm-completionLabel {
- color: var(--color-text-xlight) !important;
+ color: var(--color-autocomplete-selected-font) !important;
font-weight: 600;
}
diff --git a/packages/editor-ui/src/utils/nodeViewUtils.ts b/packages/editor-ui/src/utils/nodeViewUtils.ts
index a44dd28497..682a1a31e0 100644
--- a/packages/editor-ui/src/utils/nodeViewUtils.ts
+++ b/packages/editor-ui/src/utils/nodeViewUtils.ts
@@ -585,7 +585,7 @@ export const getBackgroundStyles = (
if (executionPreview) {
return {
'background-image':
- 'linear-gradient(135deg, #f9f9fb 25%, #ffffff 25%, #ffffff 50%, #f9f9fb 50%, #f9f9fb 75%, #ffffff 75%, #ffffff 100%)',
+ 'linear-gradient(135deg, var(--color-canvas-read-only-line) 25%, var(--color-canvas-background) 25%, var(--color-canvas-background) 50%, var(--color-canvas-read-only-line) 50%, var(--color-canvas-read-only-line) 75%, var(--color-canvas-background) 75%, var(--color-canvas-background) 100%)',
'background-size': `${squareSize}px ${squareSize}px`,
'background-position': `left ${offsetPosition[0]}px top ${offsetPosition[1]}px`,
};
diff --git a/packages/editor-ui/src/views/SettingsPersonalView.vue b/packages/editor-ui/src/views/SettingsPersonalView.vue
index 5b31b81122..3fbaf4ab8c 100644
--- a/packages/editor-ui/src/views/SettingsPersonalView.vue
+++ b/packages/editor-ui/src/views/SettingsPersonalView.vue
@@ -16,7 +16,7 @@