Request: Legacy Dark Mode option

Feature Requests
1

“Classic Dark” theme option or theme customization

The idea is:

Add a second dark mode option (“Classic Dark” or “Dark Legacy”) so users can choose between the new dark theme and the previous one.

My use case:

I work on n8n workflows for several hours daily. Since the recent UI update, the new dark theme has too much contrast - backgrounds are darker and text is brighter/harsher. This causes eye strain during long sessions.

I think it would be beneficial to add this because:

Many users preferred the previous dark mode. Currently I had to create a custom Tampermonkey script to override CSS variables (–color–background, --color–text, etc.) just to get a comfortable look. A built-in option would save users this hassle.

Any resources to support this?

Are you willing to work on this?

I can provide the CSS overrides I’m using if helpful for implementation.

4

Yes, PLEASE!

Huge issue and very well pointed by OP - it get so tiring!

Give us the old dark theme back, please :grin:

Trotter69 - Can you share that script?

4 Likes
5

Sure, here is the tampermonkey script I am using :

// ==UserScript==
// @name N8N Old Dark Theme
// @namespace http://tampermonkey.net/
// @version 1.1
// @description Restore old n8n dark theme style
// @match n8n.io - Workflow Automation*
// @run-at document-start
// @grant GM_addStyle
// ==/UserScript==

GM_addStyle(`
body[data-theme=dark] {
–color–background–shade-2: var(–color–background–light-1) !important;
–color–background–shade-1: var(–color–background–light-1) !important;
–color–background: var(–color–background–light-1) !important;
–color–background–light-2: var(–color–background–light-1) !important;
–color–background–light-3: var(–color–background–light-1) !important;

    --color--text--shade-1: #d3d3d3 !important;
    --color--text: #d3d3d3 !important;
    --color--text--tint-1: #d3d3d3 !important;
    --color--text--tint-2: #d3d3d3 !important;
    --color--text--tint-3: #d3d3d3 !important;
    color: #d3d3d3 !important;
}

`);

1 Like
6

Trotter pointed this pretty well, in my case i get tired after few minutes. this will make people use n8n less and less as it’s harder on the eyes with this new dark theme

1 Like
7

For the love of all that is holy, please add the legacy dark mode. My eyes are killing me.

I’m surprised majority of people are not bothered by this

1 Like
9

Das ist wirklich furchtbar. Wer das gemacht hat, hat sicher nur an seinem eigenen Monitor getestet. Der Kontrast ist so schlecht, dass man keine fünf Minuten daran arbeiten kann. Das gilt auch für die Webseite. Ich werde heute einen Arbeitstag investieren, um diese custom.css einzubauen – gestern bin ich gescheitert, weil der Pfad n8n/data auf ein nicht existierendes Verzeichnis zeigt. Ich muss herausfinden, wohin sie gehört. Furchtbar. Macht hier bei euch etwa jeder, was er will?

1 Like
10

Und die Qualität der Symbole (icons) ist auch einfach schlecht, wirkt billig im vergleich zu der vorherigen Version. An dem Ding kann man nix verbessern, das gehört in die Tonne und das alte wiederhergestellt.

1 Like
11

Here’s what I am using, almost similar to the legacy dark mode:

// ==UserScript==
// @name         N8N Old Dark Theme
// @namespace    http://tampermonkey.net/
// @version      2.1
// @description  Restore old n8n dark theme style
// @match        https://n8n.yourdomain.com/*
// @run-at       document-end
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const colorMap = {
        // Background
        '#171717': '#2d2e2e',
        'rgb(23, 23, 23)': '#2d2e2e',
        // Background dots
        '#747474': '#aaaaaa',
        'rgb(116, 116, 116)': '#aaaaaa',
        // Background dots
        '#757575': '#aaaaaa',
        'rgb(117, 117, 117)': '#aaaaaa',
        // Node tile
        '#2b2b2b': '#414244',
        'rgb(43, 43, 43)': '#414244',
        // Node border
        '#949494': '#c3c9d5',
        'rgb(148, 148, 148)': '#c3c9d5',
        // UI border
        '#212121': '#414244',
        'rgb(33, 33, 33)': '#414244',
        // Sticky note yellow
        '#332700': '#51461f',
        'rgb(51, 39, 0)': '#51461f',
        // Sticky note orange
        '#2d1d06': '#503d21',
        'rgb(45, 29, 6)': '#503d21',
        // Sticky note red
        '#4f070d': '#62272c',
        'rgb(79, 7, 13)': '#62272c',
        // Sticky note green
        '#0a291a': '#1c4a33',
        'rgb(10, 41, 26)': '#1c4a33',
        // Sticky note blue
        '#081a2b': '#1e3852',
        'rgb(8, 26, 43)': '#1e3852',
        // Sticky note purple
        '#211b50': '#3a3659',
        'rgb(33, 27, 80)': '#3a3659'
    };

    function replaceColors() {
        document.querySelectorAll('*').forEach(el => {
            const computed = getComputedStyle(el);
            const bg = computed.backgroundColor;
            const borderColor = computed.borderColor;
            const stroke = el.getAttribute?.('stroke');
            const fill = el.getAttribute?.('fill');

            if (colorMap[bg]) {
                el.style.backgroundColor = colorMap[bg];
            }
            if (colorMap[borderColor]) {
                el.style.borderColor = colorMap[borderColor];
            }
            if (stroke && colorMap[stroke.toLowerCase()]) {
                el.setAttribute('stroke', colorMap[stroke.toLowerCase()]);
            }
            if (fill && colorMap[fill.toLowerCase()]) {
                el.setAttribute('fill', colorMap[fill.toLowerCase()]);
            }
        });
    }

    let timeout;
    function debouncedReplace() {
        clearTimeout(timeout);
        timeout = setTimeout(replaceColors, 50);
    }

    replaceColors();

    const observer = new MutationObserver(debouncedReplace);
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });

    console.log('N8N theme loaded v2.1');
})();
1 Like
12

Please add the legacy dark theme option. The new one is too dark…

13

@jan Please, add old dark theme. It’s pain to work rn with new one

14

Full Ack for OP