How to use themes with Monaco editor

General
1

With the Monaco editor available as part of Node-RED 2.0.0-beta.2 is there a set of instructions for activating a theme and installing new themes?

2

Hi @zenofmud

Only what is provided in the settings file:

(btw please keep questions about the beta to the beta thread)

3

For info, there's a very nice interactive demo of Monaco themes here - https://editor.bitwiser.in/

4

the problem is that that says the themes are in:
packages/node_modules/@node-red/editor-client/src/vendor/monaco/dist/theme
and I can't find that in MacOS

5

You can see the list here: node-red/packages/node_modules/@node-red/editor-client/src/vendor/monaco/dist/theme at dev · node-red/node-red · GitHub

6

I'm using one from the list and it is not showing up. I

  • change settings.js,
  • save,
  • stop NR,
  • clear browser cache
  • start NR

but editor looks the same. here is my settings.js from the editorTheme to the end of the file. What have I messed up?

    // Customising the editor
    editorTheme: {
        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', // 'ace',
            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: 'upstream-sunburst', // 'vs',
                //theme: 'hc-black', // 'vs',
                /** 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",
                fontFamily: "Consolas, 'Courier New', monospace",
                fontLigatures: false,
                colorDecorators: true,
                dragAndDrop: true,
                linkedEditing: true,
                minimap: {
                    enabled: false,
                },
                mouseWheelZoom: true,
                showFoldingControls: 'always',
                useTabStops: true,
            },
        }
}
}
7

Oh - thats odd.

It works for me...

image
image780Ă—268 22.3 KB

Result...
image

Silly questions (but they have to be asked) are you editing the correct settings.js? Did you restart node-red? Did you refresh browser?

8

<...head smack...><...head smack...><...head smack...>

Argh! I deffinately haven had enouth coffee today. I kept looking at the editor thinking it was going to change the entire editor, not what you see in the function node.

(...head held down very very low...)

1 Like
9

ahhh good ol Mondays

3 Likes
10

Before I found this thread I was using the browser plugin 'Stylus' as I do for many things which end up not having a user editable way to change things and was able to pretty quickly come up with some slight edits by changing some css properties in a few places such as:

.monaco-editor .margin {
    background-color: #303235;
}

.monaco-editor, .monaco-editor-background, .monaco-editor .inputarea.ime-input {
    background-color: #303235;
}

then for text there were various items like:

.mtk1 {
    color: #d2caca;
}

.mtk20 {
    color: #CFC260;
}

.mtk6 {
    color: #7E9F58;
}

997Ă—779 40.7 KB

11

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