Problem/Motivation

Installed midnight-red in both a Windows10 and 2 Debian machines.
Applied the settings to all, Debian machines work well, W10 machines refuses to turn into dark mode.

(Why the issue was filed)

• Theme version:`-- @node-red-contrib-themes/[email protected]
• Node-RED version: Node-RED version: v2.0.0-beta.2
• Node.js version: Node.js version: v12.22.1
• Platform/OS: Windows 10 Pro, OS: 20H2 Version:19042.1110
• Browser: Chrome, firefox, edge

Settings.js

editorTheme: {
    /** The following property can be used to set a custom theme for the editor.
     * See https://github.com/node-red-contrib-themes/theme-collection for
     * a collection of themes to chose from.
     */
    theme: "midnight-red",
    palette: {
        /** The following property can be used to order the categories in the editor
         * palette. If a node's category is not in the list, the category will get
         * added to the end of the palette.
         * If not set, the following default order is used:
         */
        //categories: ['subflows', 'common', 'function', 'network', 'sequence', 'parser', 'storage'],
    },
    projects: {
        /** To enable the Projects feature, set this value to true */
        enabled: true,
        workflow: {
            /** Set the default projects workflow mode.
             *  - manual - you must manually commit changes
             *  - auto - changes are automatically committed
             * This can be overridden per-user from the 'Git config'
             * section of 'User Settings' within the editor
             */
            mode: "manual"
        }
    },
    codeEditor: {
        /** Select the text editor component used by the editor.
         * Defaults to "ace", but can be set to "ace" or "monaco"
         */
        lib: "monaco",
        options: {
            /** The follow options only apply if the editor is set to "monaco"
             *
             * theme - must match the file name of a theme in
             * packages/node_modules/@node-red/editor-client/src/vendor/monaco/dist/theme
             * e.g. "tomorrow-night", "upstream-sunburst", "github", "my-theme"
             */
            theme: "blackboard",
            /** other overrides can be set e.g. fontSize, fontFamily, fontLigatures etc.
             * for the full list, see https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandaloneeditorconstructionoptions.html
             */
            //fontSize: 14,
            //fontFamily: "Cascadia Code, Fira Code, Consolas, 'Courier New', monospace",
            //fontLigatures: true,
        }
    }
},

(How can someone else see it happen. If possible,
add one or more screenshots)

The 'blackboard' theme in the monaco editor does work,

Tried to find startup or debug logs when NR starts and what might prevent this theme from starting, but cannot locate them.

Proposed changes

(If you have a proposed change, workaround or fix,
describe it here)

Problem/Motivation

I try to install your theme without any luck so far inside the console of my docker container.
The node-red directory is inside /data.

bash-5.0$ npm ls node-red-contrib-theme-midnight-red
[email protected] /data
`-- (empty)

And this is what is shown during the install:

bash-5.0$ npm install @node-red-contrib-themes/midnight-red
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"arm"})

+ @node-red-contrib-themes/[email protected]
updated 1 package and audited 800 packages in 15.062s

30 packages are looking for funding
  run `npm fund` for details

found 1 low severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details

• Node-RED version: 1.2.3
• Platform/OS: docker
• Browser: firefox 82.0.3

Problem/Motivation

In Node-RED v2.0.0+, you can enable the Monaco editor (known from VSCode) by editing the settings. However, when you do so that editor does not follow the theme and is instead using a light theme by default:

• Theme version: v2.0.1
• Node-RED version: 2.0.2
• Platform/OS: Linux Mint 20.2
• Browser: Firefox 90.0

Steps to reproduce

As noted in the first link above, edit your settings.js file to include

        codeEditor: {
            lib: "monaco"
        },

inside the editorTheme object and restart Node-RED.

Open the settings of a node with a large text field, such as a function or template node (or click the "..." next to a small property field).

Proposed changes

I don't know how to change the theme of the editor, but given the variety of themes available in VSCode it should be possible.

Hi Mauricio,
thanks for publishing on npm! Do I see that right that this is not yet the Node-RED 1.0 compatible version? Can you publish that also? I would suggest to just bump the npm version to 1.0.0 then and add a hint to the readme that for Node-RED 0.x one has to use npm install node-red-contrib-theme-midnight-red@^0.2.10
You could also publish the 1.0 version with a npm version like e.g. 1.0.0-beta.1 first, then a npm install without explicit version will still use 0.2.10.
Regards,
Sebastian

In Firefox 73.0.1 the background grid isn't properly rendered. This means on different zoom levels the grid (dis-)appears.
I narrowed the issue down to shape-rendering: crispEdges; and stroke-width: 0.5px;. If I change either of them so for example stroke-width: 1px; or shape-rendering: auto; everything looks fine.

Hi!
I'm not sure if this is something that should be fixed in midnight-red or in Node-RED itself, please point me in the right direction :-)
The submit button of the Login form doesn't have the red-ui-button class, so styling of buttons doesn't apply and text color is not really readable:

If I add the red-ui-button class on the element it looks good. So I guess I should create a PR on Node-RED and not on midnight-red, correct?

Regards,
Sebastian

Problem/Motivation

(Why the issue was filed)

• Node-RED version: v1.0.3 (this tells me Node-RED)
  v1.13.0 (this tells me IOBROKER)
• Platform/OS: Linux pi 4.19.66-v7+ #1253 SMP Thu Aug 15 11:49:46 BST 2019 armv7l GNU/Linux
  Raspbian / IOBROKER
• Browser: Google Chrome / Firefox
• Node.js: v10.19.0
• NPM: 6.13.4

Steps to reproduce

i installed the theme with
npm install @node-red-contrib-themes/midnight-red

i can find the installed theme under:

/opt/iobroker/iobroker-data/node-red/node_modules/@node-red-contrib-themes/midnight-red/theme.css

Add the following to the editorTheme section of your settings.js.
--> my settings.js is under:

/opt/iobroker/iobroker-data/node-red/settings.js

i change the settings.js to:

editorTheme: {
page: {
css: "/opt/iobroker/iobroker-data/node-red/node_modules/@node-red-contrib-themes/midnight-red/theme.css"
}
}

AFTER RESTART OF Node-RED
the settings.js is set to the default value

Proposed changes

(If you have a proposed change, workaround or fix,
describe it here)

Problem/Motivation

When you disable a typedInput the select part are in white.

• Theme version: 1.5.0
• Node-RED version: 1.3.2
• Platform/OS: Windows 10
• Browser: Chrome 90 in private mode

Steps to reproduce

Open a new inject node.
Set the value of type boolean.
Run this command in developper console :

$('.node-input-prop-property-value').typedInput('disable', true)

And see the result

I got the same result with midnight-red and midnight-red-scroll.

Proposed changes

The disabled buttons don't have background color;

Hi, I really like this theme, but it doesn't work for me. I did everything according to the instructions, I added the code in setting.js, node red runs correctly, but in a standard theme. I restarted it many times, but it did nothing. I also deleted cookies and tested on a different browser. Please give me a hint what else I can check.
node-red 0.20.7
ubuntu 18.04.3
openhabian 2.4.0-1
node 10.16.2

// Customising the editor
editorTheme: {

    page: {
            css: "home/up/.node-red/node_modules/node-red-contrib-theme-midnight-red/midnight.css",
            scripts: "home/up/.node-red/node_modules/node-red-contrib-theme-midnight-red/theme-tomorrow.js"
    }

// projects: {
// // To enable the Projects feature, set this value to true
// enabled: false
// }
}

The title of disabled nodes in the Info Sidebar are really hard to read. Any way the font color could be changed to a medium grey, similar to the Flow Tab when they are disabled?

As you can see, the bottom two are completely unreadable. But absolutely love the theme. Thanks so much and great work!!!

Hi!

I got a completely new Debian installation, installed node.js and npm, installed node-red and installed your theme (and later the theme collection instead). I activated the theme in my settings.js, but see so change.
30 Oct 16:35:13 - [info] Node-RED version: v2.1.3 30 Oct 16:35:13 - [info] Node.js version: v12.22.5 30 Oct 16:35:13 - [info] Linux 5.11.22-4-pve x64 LE 30 Oct 16:35:13 - [info] Loading palette nodes 30 Oct 16:35:13 - [info] Settings file : /home/schubi/.node-red/settings.js 30 Oct 16:35:13 - [info] Context store : 'default' [module=memory] 30 Oct 16:35:13 - [info] User directory : /home/schubi/.node-red 30 Oct 16:35:13 - [info] Projects directory: /home/schubi/.node-red/projects 30 Oct 16:35:14 - [info] Server now running at http://127.0.0.1:1880/ 30 Oct 16:35:14 - [info] Active project : Homeautomation 30 Oct 16:35:14 - [info] Flows file : /home/schubi/.node-red/projects/Homeautomation/flow.json 30 Oct 16:35:14 - [info] Starting flows 30 Oct 16:35:14 - [info] Started flows
Settings.js:
editorTheme: { theme: "midnight-red", palette: { }, projects: { enabled: true, workflow: { mode: "manual" } }, codeEditor: { lib: "monaco", options: { theme: "vs-dark", } } },
I also tried another installation on an Arch Linux server and had the same issue.
What am I doing wrong?

Problem/Motivation

The tabs on the new version of this package have a weird white gradient at the end of them. This doesn't affect the functionality at all, but seeing that this is a visual package I think it should probably be fixed. I have tried clearing my browser cache and the issue persists across Safari and Chrome.

• Theme version: 2.0.0
• Node-RED version: 2.0.1
• Platform/OS: Ubuntu 20.04 / Docker
• Browser: Brave

Steps to reproduce

Not sure if this is an artifact of upgrading to version 2.0.0, but it should be apparent just from opening the editor UI.

Proposed changes

Change the CSS files to remove the gradient.

Having installed using npm (v0.2.10) the package does not appear in the node-red palette.
It also does not appear in https://flows.nodered.org.

Problem/Motivation

Currently the debug message border color for warning level and error level is the same as the log level.
This make it harder to distinguish betweenthem.

(Why the issue was filed)

• Node-RED version: 1.2.5
• Platform/OS: Windows 10
• Browser: Chrome Version 86.0.4240.198 (Official Build) (64-bit)

Steps to reproduce

(How can someone else see it happen. If possible,
add one or more screenshots)

Proposed changes

(If you have a proposed change, workaround or fix,
describe it here)

Add the following CSS code will resolve this issue.

.red-ui-debug-msg-level-20 {
    border-left-color: #f99;
    border-right-color: #f99;
}

.red-ui-debug-msg-level-30 {
    border-left-color: #ffdf9d;
    border-right-color: #ffdf9d;
}

Problem/Motivation

(Why the issue was filed)

• Node-RED version: 1.2.9
• Platform/OS: Docker (Synology)
• Browser: Google Chrome

Steps to reproduce

(How can someone else see it happen. If possible,
add one or more screenshots)

Run the installation command using Portainer

I run the command to install using the console in Portainer, and this is the output:

However, no folder called @node-red-contrib-themes is created.

NR 2.1.4
Ubuntu 20.04
Firefox - but also tried Opera. (Same result)

Now and then I actually read the instructions for nodes.

Alas this is not easy to do when I get this shown to me.

Disabling the theme it is more readable.

From what I have been told it is a CSS problem.
Sorry, but that's way above my pay grade. I am only relaying what was said.

Not all aspects of the theme are working for me. I am running node-red 0.20.5, nodejs 10.16.0 on Ubuntu.
I have installed the node using npm and made the changes to settings.js. I have refreshed the browser multiple times and tried it with a different browser but this is what I see.

I was previously using a manually installed earlier version and that worked ok.

Can you suggest what I might be doing wrong, or how to analyse the problem?

I'm using nr 1.0 beta 3 and this version of the midnight theme seems to work BUT in the debug tab, the purple text is hard to read and node ID and msg.payload object text (grey) is WAY too dark. Is it possible to fix or add to the readme where this needs altering?

Regards

[email protected]

Hello,

I have the same issue as #9 however i only recently installed midnight theme.. I already uninstalled and reinstalled just to be sure, but it seems to have the same issue where everything is nice and "midnight", save for the main grid.

I already tried incognito mode to prevent caching, but to no avail.

editorTheme: { page: { css: "/data/node_modules/node-red-contrib-theme-midnight-red/midnight.css" }, projects: { // To enable the Projects feature, set this value to true enabled: false } }

Just got on NodeRed with a RaspberryPi4.

I saw your theme, and decided to try. :D

In the notes/example there needs to be a " , " comma after the page section.

"Add the following to the editorTheme section of your settings.js.

editorTheme: {
page: {
css: "/.node-red/node_modules/node-red-contrib-theme-midnight-red/midnight.css"
} ,
}"

There should be a " , " after the " page " section of editorTheme.

I base that on the https://nodered.org/docs/user-guide/runtime/configuration showing items under editorTheme, and each of the sections has a " , " in that area.

Totally a noob thing.
I LOVE the new look though!! So much easier on the eyes.
Thanks for sharing!
esoare

• Node-RED version: 1.2.3
• Platform/OS: DietPi / Docker
• Browser: Firefox 82.0.3

Heya, yesterday I was able to install your theme, but I just checked it once.

Today I went to my node-red page and now it is all default. The files of your theme are still persistent and inside my node-red folder.
I tryed to reinstall everything now and it doesn't work anymore :*(

bash-5.0$ npm install @node-red-contrib-themes/midnight-red
npm notice created a lockfile as package-lock.json. You should commit this file.
+ @node-red-contrib-themes/[email protected]
updated 1 package and audited 349 packages in 7.912s

5 packages are looking for funding
  run `npm fund` for details

found 3 moderate severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details
bash-5.0$ npm ls node-red-contrib-theme-midnight-red
[email protected] /usr/src/node-red
`-- (empty)

Maybe some can help me out?

BTW: is there any possibility to install the theme to /data/node-modules instead of /usr/scr/node-red/node_modules

Having an issue with dark mode not working for the main display. I know its loading due to the sidebar being dark however the main window is staying white and blinding the crap out of me. Just updated my node-red to v1.0

Also pulled the latest from NPM and restarted. No changes.

Problem/Motivation

After updating to 2.x of NodeRED I saw that there was an issue with the theme, shading or something where the "x" used to be. The "x" is also missing. I then tried to upgrade that aswell, but it did not resolve the issue. See screenshot below. When creating a subflow the "x" appear when hovering over with the mouse.

• Theme version: installed latest but seems like package.json has; "version": "1.5.2",
• Node-RED version: 2.0.6
• Platform/OS: Ubuntu 18.04.6 LTS
• Browser: Google Chrome & Microsoft Edge

Steps to reproduce

Not sure how to reproduce, but i tried to remove the whole midnight-red dir, and install yet again, but it did not resolve the issue. Can't remember the version of the theme before updating.

Proposed changes

(If you have a proposed change, workaround or fix,
describe it here)

Screenshots

Problem/Motivation

When clicking the "Open in new window" for the debug tab (http://[ip]:1880/debug/view/view.html) it shows as the default off-white colour

• Theme version: latest (just installed it)
• Node-RED version: 1.3.3
• Platform/OS: Ubuntu 20.10 Server (Headless) running in Docker
• Browser: Chrome

Steps to reproduce

Install theme, switch to debug tab in right hand panel, click new window button (very bottom-right)

Proposed changes

It should be themed to match main window

Thank you.

Problem/Motivation

.red-ui-diff-text seem to be very hard to read on my node-red.

(Why the issue was filed)

• Node-RED version: 1.1.1
• Platform/OS: KDE Neon & Ubuntu
• Browser: Chrome Version 83.0.4103.116 (Official Build) (64-bit)

Steps to reproduce

Just go and check the commit changes and click the compare changes button.

(How can someone else see it happen. If possible,
add one or more screenshots)

Proposed changes

(If you have a proposed change, workaround or fix,
describe it here)

From @wb666greene on Node-RED Discourse

When the Dashboard tab is opened, Layout->Tabs&Links the "tree" view is mostly black except for the line where the cursor is, which then shows with the normal bright theme. This makes navigating the tree for editing very difficult.

When you expand a properties panel for a node, textarea fields show a white vertical line where the scrollbar was originally positioned. Shows in Firefox 70.0.1 and shows most of the time in Chrome 78.0.3904.97 though it will randomly disappear if you keep trying different widths.

Problem/Motivation

After latest update, the Function Node background has changed from a nice Black to a lower contrast Grey. It makes it harder to see text

• Node-RED version: V6.1.3
• Platform/OS: Hass.io / Home Assistant
• Browser: Chrome

Steps to reproduce

Update to V6.1.3 and turn on dark_mode

Proposed changes

Please restore Function Node Background Colour.

Problem/Motivation

(Why the issue was filed)

After installing the theme i couldn't make the editor page load.

• Theme version: 1.5.1
• Node-RED version: 1.3.4
• Platform/OS: Ubuntu server using docker with alpine
• Browser: chrome

Steps to reproduce

(How can someone else see it happen. If possible,
add one or more screenshots)

Installed the theme with npm install @node-red-contrib-themes/midnight-red /data
and edited the settings.js exactly like the documentation and the editor page simply wont load unless i coment it out

Proposed changes

(If you have a proposed change, workaround or fix,
describe it here)

Perhaps add a separated documentation for dockers?

Problem/Motivation

On the Config nodes pane the node names are virtually invisible

• Theme version: 2.0.0-beta.2
• Node-RED version: 2.0.0-beta.2
• Platform/OS: Laptop/Ubuntu
• Browser: Firefox 89.0.2

Steps to reproduce

Open Config tab

Problem/Motivation

The instruction you gave to add the new scrollbars theme is incorrect, coz you can't have duplicate "css" object key.
This will make the scrollbars.css replace the theme.css.

editorTheme: {
    page: {
        css: "<HOME>/.node-red/node_modules/@node-red-contrib-themes/midnight-red/theme.css",
        css: "<HOME>/.node-red/node_modules/@node-red-contrib-themes/midnight-red/scrollbars.css"
    }
}

(Why the issue was filed)

• Node-RED version: version: 1.1.2
• Platform/OS: KDE Neon & Ubuntu
• Browser: Chrome Version 83.0.4103.116 (Official Build) (64-bit)

Steps to reproduce

(How can someone else see it happen. If possible,
add one or more screenshots)

Proposed changes

The correct way is to put them in an array instead.

editorTheme: {
    page: {
        css: ["<HOME>/.node-red/node_modules/@node-red-contrib-themes/midnight-red/theme.css",
              "<HOME>/.node-red/node_modules/@node-red-contrib-themes/midnight-red/scrollbars.css"]
    }
}

(If you have a proposed change, workaround or fix,
describe it here)

I am stuck getting all the things working now on NR 2.x after editing the settings.js file to change to the better editor.

        codeEditor: {
            /** Select the text editor component used by the editor.
             * Defaults to "ace", but can be set to "ace" or "monaco"
             */
            lib: "monaco",
            options: {
                /** The follow options only apply if the editor is set to "monaco"
                 *
                 * theme - must match the file name of a theme in
                 * packages/node_modules/@node-red/editor-client/src/vendor/monaco/dist/theme
                 * e.g. "tomorrow-night", "upstream-sunburst", "github", "my-theme"
                 */
                theme: "midnight-red",
                /** other overrides can be set e.g. fontSize, fontFamily, fontLigatures etc.
                 * for the full list, see https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandaloneeditorconstructionoptions.html
                 */
                //fontSize: 14,
                //fontFamily: "Cascadia Code, Fira Code, Consolas, 'Courier New', monospace",
                //fontLigatures: true,
            }
        },
        theme: "midnight-red"
    }

In normal editing screen, your theme works. Nice and dark.

But when I open a function node: Bright white background.

I've done the best I can to understand how to get things working, but it is over my head.

Originally when I was editing a function node it was nice and dark.

NR 2.1.4 but I am wanting to get this better editor working on other machines with 2.2.2.

This machine Ubuntu 21.04, other machines RasPi. (Buster mostly)

I suspect I am missing something obvious. But I don't get the bigger picture of things.

Hope you can help.