# How to use themes with Monaco editor

**URL:** <https://discourse.nodered.org/t/how-to-use-themes-with-monaco-editor/48310>\
**Category:** General\
**Created:** [12 July 2021 11:46 UTC](https://discourse.nodered.org/t/how-to-use-themes-with-monaco-editor/48310 "2021-07-12T11:46:24Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [12 July 2021 11:46 UTC](https://discourse.nodered.org/t/how-to-use-themes-with-monaco-editor/48310/1 "2021-07-12T11:46:25Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [12 July 2021 12:18 UTC](https://discourse.nodered.org/t/how-to-use-themes-with-monaco-editor/48310/2 "2021-07-12T12:18:03Z")

</div>

Hi @zenofmud

Only what is provided in the settings file:

> <https://github.com/node-red/node-red/blob/dev/packages/node_modules/node-red/settings.js#L354>

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

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [12 July 2021 12:46 UTC](https://discourse.nodered.org/t/how-to-use-themes-with-monaco-editor/48310/3 "2021-07-12T12:46:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [12 July 2021 13:10 UTC](https://discourse.nodered.org/t/how-to-use-themes-with-monaco-editor/48310/4 "2021-07-12T13:10:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [12 July 2021 13:13 UTC](https://discourse.nodered.org/t/how-to-use-themes-with-monaco-editor/48310/5 "2021-07-12T13:13:55Z")

</div>

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](https://github.com/node-red/node-red/tree/dev/packages/node_modules/%40node-red/editor-client/src/vendor/monaco/dist/theme)

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [12 July 2021 13:30 UTC](https://discourse.nodered.org/t/how-to-use-themes-with-monaco-editor/48310/6 "2021-07-12T13:30:30Z")

</div>

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?

```auto
    // 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,
            },
        }
}
}

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [12 July 2021 13:35 UTC](https://discourse.nodered.org/t/how-to-use-themes-with-monaco-editor/48310/7 "2021-07-12T13:35:28Z")

</div>

Oh - thats odd.

It works for me...

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/4/c46766b07398811f172c3880a5659969a6495f4f.png)

Result...  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/0/00d85d9f722b4a5f05ea5c9e118b157fa8a16d69.png)

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

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [12 July 2021 13:40 UTC](https://discourse.nodered.org/t/how-to-use-themes-with-monaco-editor/48310/8 "2021-07-12T13:40:00Z")

</div>

\<...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...)

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [12 July 2021 13:50 UTC](https://discourse.nodered.org/t/how-to-use-themes-with-monaco-editor/48310/9 "2021-07-12T13:50:27Z")

</div>

ahhh good ol Mondays

---

<div class="post-metadata">

**Author:** ![MostHated](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mosthated/32/44263_2.png) [@MostHated](https://discourse.nodered.org/u/MostHated)\
**Post date:** [24 July 2021 23:51 UTC](https://discourse.nodered.org/t/how-to-use-themes-with-monaco-editor/48310/10 "2021-07-24T23:51:28Z")

</div>

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:

```auto
.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:

```auto
.mtk1 {
    color: #d2caca;
}

.mtk20 {
    color: #CFC260;
}

.mtk6 {
    color: #7E9F58;
}

```

 ![](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/6/76021da78d616ae86e9654f1bca5f612bdb75b0f.png)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [7 August 2021 23:52 UTC](https://discourse.nodered.org/t/how-to-use-themes-with-monaco-editor/48310/11 "2021-08-07T23:52:29Z")

</div>

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