Node-RED Contrib Theme Collection
A collection of themes for Node-RED.
Report a Bug · Request a Theme · Ask a Question
Table of Contents
Installation
Install with npm
Run the following command from within the Node-RED user data directory (by default, $HOME/.node-red).
npm install @node-red-contrib-themes/theme-collectionNOTE: The command above installs the latest version of the theme collection, which is compatible with Node-RED 3.0. For Node-RED version 2.2.X, run npm install @node-red-contrib-themes/[email protected].
Theme list
| Name | Description |
|---|---|
aurora |
Inspired by the Aurora Theme for Sublime Text by Palmer Oliveira |
cobalt2 |
Based on the Cobalt2 Theme for VS Code by Wes Bos |
dark |
A dark theme for Node-RED |
dracula |
Based on the Dracula theme by Zeno Rocha |
espresso-libre |
Inspired by the Espresso Libre theme for Monaco Editor |
midnight-red |
Based on the Midnight theme for Home Assistant |
monoindustrial |
Based on the monoindustrial theme for Monaco Editor |
monokai |
Based on the Monokai theme for Monaco Editor |
oceanic-next |
Based on the Oceanic Next Color Scheme by Dmitri Voronianski |
oled |
A Node-RED dark theme for OLED displays |
solarized-dark |
Based on the Solarized color palette by Ethan Schoonover |
solarized-light |
Based on the Solarized color palette by Ethan Schoonover |
tokyo-night |
Based on the Tokyo Night theme for VS Code by enkia |
zenburn |
Inspired by the Zenburn color scheme for Vim |
If you have an idea for a new theme, you can request it here, or better yet, create one yourself.
Usage
Set theme: "<theme-name>" in the editorTheme object in your settings.js and then restart Node-RED.
For example, this sets Node-RED to use the dark theme.
editorTheme: {
theme: "dark"
},NOTE: For details on the Node-RED's configuration file and its structure, please refer to the Node-RED official documentation.
Themed Scrollbars
Includes the theme and changes the scrollbars to make them better fit the theme.
Add -scroll to the name of the theme you chose.
For example, this sets Node-RED to use the midnight-red theme with themed scrollbars.
editorTheme: {
theme: "midnight-red-scroll"
},Monaco Editor Theme
Each theme in this collection comes with a pre-configured theme for the Monaco editor.
Just leave theme in the codeEditor object commented out.
For example, this sets Node-RED to use the dracula theme and its pre-configured theme for the Monaco editor.
editorTheme: {
theme: "dracula",
codeEditor: {
lib: "monaco",
options: {
// theme: "",
},
},
},Contributing
First off, thanks for taking the time to contribute! Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make will benefit everybody else and are greatly appreciated.
Please read our contribution guidelines, and thank you for being involved!
License
This project is licensed under the MIT license.
Show your support
Please
