@node-red-contrib-themes/theme-collection

# Node-RED Contrib Theme Collection [![npm (scoped)][npm-version-badge]][npm-package] [![Release Publish][release-publish-badge]][release-publish-workflow] [![Project license][license-badge]][license] A collection of themes for [Node-RED][node-red]. <a href="https://github.com/node-red-contrib-themes/theme-collection/blob/screenshots/README.md" target="_blank">📸 See the screenshots</a> ## Table of Contents - [Installation](#installation) - [Install via the Palette Manager](#install-via-the-palette-manager) - [Install with npm](#install-with-npm) - [Theme list](#theme-list) - [Usage](#usage) - [Monaco Editor Theme](#monaco-editor-theme) - [Mermaid Theme](#mermaid-theme) - [Development](#development) - [License](#license) ## Installation ### Install via the Palette Manager Search for @node-red-contrib-themes/theme-collection ### Install with npm Run the following command from within the Node-RED user data directory (by default, `$HOME/.node-red`). ```shell npm install @node-red-contrib-themes/theme-collection ``` ## Theme list <a href="https://github.com/node-red-contrib-themes/theme-collection/blob/screenshots/README.md" target="_blank">📸 See the screenshots</a> | Name | Description | | --------------------- | ------------------------------------------------------------------------------------ | | `aurora` | Inspired by the [Aurora Theme for Sublime Text][theme-aurora] | | `cobalt2` | Based on the [Cobalt2 Theme for VS Code][theme-cobalt2] | | `dark` | A dark theme for Node-RED based on VS Code's Dark Modern theme | | `dracula` | Based on the [Dracula theme][theme-dracula] | | `espresso-libre` | Inspired by the [Espresso Libre theme for Monaco Editor][theme-espresso-libre] | | `github-dark` | Based on the GitHub Dark (legacy) theme from [GitHub's VS Code themes][theme-github] | | `github-dark-default` | Based on the GitHub Dark Default theme from [GitHub's VS Code themes][theme-github] | | `github-dark-dimmed` | Based on the GitHub Dark Dimmed theme from [GitHub's VS Code themes][theme-github] | | `midnight-red` | Based on the [Midnight theme for Home Assistant][theme-midnight] | | `monoindustrial` | Based on the [monoindustrial theme for Monaco Editor][theme-monoindustrial] | | `monokai` | Based on the [Monokai theme for VS Code][theme-monokai] | | `monokai-dimmed` | Based on the [Monokai Dimmed theme][theme-monokai-dimmed] for VS Code | | `noctis` | Inspired by the [Noctis theme][theme-noctis] for VS Code | | `oceanic-next` | Based on the [Oceanic Next Color Scheme][theme-oceanic-next] | | `oled` | A Node-RED dark theme for OLED displays | | `one-dark-pro` | Based on the Default theme from [One Dark Pro][theme-one-dark-pro] | | `one-dark-pro-darker` | Based on the Darker theme from [One Dark Pro][theme-one-dark-pro] | | `solarized-dark` | Based on the [Solarized color palette][solarized] | | `solarized-light` | Based on the [Solarized color palette][solarized] | | `tokyo-night` | Based on the Tokyo Night theme from [Tokyo Night theme][theme-tokyo-night] | | `tokyo-night-light` | Based on the Tokyo Night Light theme from [Tokyo Night theme][theme-tokyo-night] | | `tokyo-night-storm` | Based on the Tokyo Night Storm theme from [Tokyo Night theme][theme-tokyo-night] | | `totallyinformation` | Created per request of Julian Knight $[@TotallyInformation][totally-information]$ | | `zenburn` | Inspired by the [Zenburn color scheme for Vim][theme-zenburn] | If you have an idea for a new theme, you can request it [here][tr], or better yet, [create one yourself][creating-a-new-theme]. ## 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 `midnight-red` theme. ```js editorTheme: { theme: "midnight-red" }, ``` For details on the Node-RED's configuration file and its structure, please refer to the [Node-RED official documentation][node-red-doc]. ### 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. ```js editorTheme: { theme: "dracula", codeEditor: { lib: "monaco", options: { // theme: "", }, }, }, ``` ### Mermaid Theme Each theme in this collection comes with a pre-configured theme for the Mermaid diagramming and charting tool. Just leave `theme` in the `mermaid` object commented out. For example, this sets Node-RED to use the `dark` theme and its pre-configured theme for the Mermaid diagramming and charting tool. ```js editorTheme: { theme: "dark", mermaid: { // theme: "", }, }, ``` ## Development Please refer to the [`DEVELOPMENT.md`][development] file for details on how to set up a local development environment. ## License This project is licensed under the [MIT license][license]. [creating-a-new-theme]: DEVELOPMENT.md [development]: DEVELOPMENT.md [license-badge]: https://img.shields.io/github/license/node-red-contrib-themes/theme-collection.svg?style=for-the-badge [license]: LICENSE [node-red-doc]: https://nodered.org/docs/user-guide/runtime/configuration#editor-themes [node-red]: https://nodered.org/ [npm-package]: https://www.npmjs.com/package/@node-red-contrib-themes/theme-collection [npm-version-badge]: https://img.shields.io/npm/v/@node-red-contrib-themes/theme-collection?logo=npm&style=for-the-badge [release-publish-badge]: https://img.shields.io/github/actions/workflow/status/node-red-contrib-themes/theme-collection/release-publish.yml?style=for-the-badge&label=Publish [release-publish-workflow]: https://github.com/node-red-contrib-themes/theme-collection/actions/workflows/release-publish.yml [solarized]: https://ethanschoonover.com/solarized/ [theme-aurora]: https://github.com/expalmer/aurora-theme/ [theme-cobalt2]: https://marketplace.visualstudio.com/items?itemName=wesbos.theme-cobalt2 [theme-dracula]: https://draculatheme.com/ [theme-espresso-libre]: https://github.com/brijeshb42/monaco-themes/blob/master/themes/Espresso%20Libre.json [theme-github]: https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme [theme-midnight]: https://community.home-assistant.io/t/midnight-theme/28598 [theme-monoindustrial]: https://github.com/brijeshb42/monaco-themes/blob/master/themes/monoindustrial.json [theme-monokai-dimmed]: https://github.com/microsoft/vscode/tree/main/extensions/theme-monokai-dimmed [theme-monokai]: https://github.com/microsoft/vscode/tree/main/extensions/theme-monokai [theme-noctis]: https://marketplace.visualstudio.com/items?itemName=liviuschera.noctis [theme-oceanic-next]: https://github.com/voronianski/oceanic-next-color-scheme [theme-one-dark-pro]: https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme [theme-tokyo-night]: https://marketplace.visualstudio.com/items?itemName=enkia.tokyo-night [theme-zenburn]: https://github.com/jnurmine/Zenburn [totally-information]: https://github.com/TotallyInformation [tr]: https://github.com/node-red-contrib-themes/theme-collection/discussions/new?category=theme-request