Node-Red 2.01 Editor theme

General
21

I like that. Can we chat about it?

22

This is gone after updating Node-RED to v2.0.2 and the theme to v2.0.1, right?

23

Sure.

I don't know the anatomy of the node-red themes (is it all CSS or is there some server side js too?)

Essentially, the theme property under codeEditor needs to be set. I forget now at what point in the start-up this needs to be set.

I'll take a look tomorrow if there is another way.

24

We can use both CSS and JS in themes.

I can change Monaco's theme by running RED.settings.codeEditor.options.theme = "theme-name" on the browser's console. But I still haven't found a way to do it from within the theme.

25

I'm talking with nick on slack about how to handle this.

So I have a working method but waiting feedback.

1 Like
26

All is (almost) well here but since the NR upgrade, I'm still getting these awful white shadows on all tabs in the main screen and in the editor - any ideas?

image
image1261Ɨ117 4.03 KB

27

Exactly what version of Node-RED and the theme have you got installed?

Edit: there's another fix coming for that in the next release.

28

Hi Nick

Node-Red 2.0.3 and everything in there is up to date.

Theme is midnight-redā€¦

editorTheme: {

theme: "midnight-red",

codeEditor: {

lib: "monaco",

options: {

theme: "vs-dark"

}

},

}

Nice to know a fix is on the way - trivial but annoying - and midnght-red is my favourite theme (untill someone comes along with something even more subtle)

Regards

Pete

29

Iā€™m open to suggestions :wink:

30

@mbonani FYI, there is a PR now open for including custom (or pre-set) monaco theme.

You might want to cast an eye over it?

1 Like
31

Awesome! Iā€™ll take a look at it tonight

1 Like
32

Hi, ok for inspirationā€¦ I like dark themes ā€“ Microsoft CODE editor has some winners - black is not good but subtle dark colours with brights for errors ā€“ if that helps. I would LOVE to do this myself and contribute back but CSS has always been my weak spot.

33

Can you list some of them?

We can work together to build one that suits your needs. :wink:

34

I am also a user of the midnight-red theme, thanks for that!

Recently I discovered the Dracula theme, which has already been implemented for many applications. I find it quite pleasing in terms of colors. Maybe that would be something of interest to you as well.

Thank you!

1 Like
35

I started working on a theme based on the Dracula theme a few months ago.
Iā€™ll try to revisit it again later this week.

2 Likes
36

I'm running NR v2.0.5 on Windows 10 with the following
nodejs v14.17.3,
npm v6.14.13,
node-red-contrib-themes/theme-collection v2.0.3.

I'm unable to get any of the theme-collection working for the main editor

Here is my settings.js file

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: "vs-dark",

The Monaco 'vs-dark' theme works fine, however the main editor is still on the default theme

37

Where did you install the theme collection? It has to be installed in your Node-RED workspace, usually .node-red in your user's home directory.

38

Yes, that is where I installed it via npm.

I have since found that it is listed as an issue on github

https://github.com/node-red/node-red/issues/3097

As mentioned in the issue commenting out 3 lines the following function from "C:\Users$USER\AppData\Roaming\npm\node_modules\node-red\node_modules@node-red\editor-api\lib\editor\theme.js" works as a temporary workaround.

function serveFilesFromTheme(themeValue, themeApp, directory, baseDirectory) {
    var result = [];
    if (themeValue) {
        var array = themeValue;
        if (!util.isArray(array)) {
            array = [array];
        }

        for (var i=0;i<array.length;i++) {
            let fullPath = array[i];
            if (baseDirectory) {
                fullPath = path.resolve(baseDirectory,array[i]);
                // if (fullPath.indexOf(baseDirectory) !== 0) {
                //     continue;
                // }
            }
            var url = serveFile(themeApp,directory,fullPath);
            if (url) {
                result.push(url);
            }
        }
    }
    return result
}
1 Like
39

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.