Development

This document describes the process for creating/updating themes.

Getting started

Fork and clone this project
Enter the project directory and initialize the development environment
```
 cd theme-collection
 npm run init
```

NOTE: This process may take a while on some hosts, so please be patient.

Creating a new theme

With the development environment initialized, follow these steps to create a new theme:

Create the new theme directory structure
```
 npm run create-theme <theme-name>
```
Start the development environment
```
 npm run dev <theme-name>
```
Access Node-RED at http://localhost:41880
Update the colors in themes/<theme-name>/<theme-name>.scss as required & save
Update themes/<theme-name>/<theme-name>-monaco.json to customize the colors of the Monaco Editor. For details on the monacoOptions configuration, please refer to the Node-RED documentation.
OPTIONAL - If additional customizations are needed, add them to themes/<theme-name>/<theme-name>-custom.css.
Refresh Node-RED in the browser to preview the changes
Repeat steps 4 to 7 as needed. When finished, press ctrl-D to quit the development environment.
Commit, push, and create a pull request.

NOTE: Replace <theme-name> with the name of the theme you are working on.

Updating an existing theme

Follow the process above, skipping step 1.

Thanks for taking the time to contribute! 😍