Skip to content

Latest commit

 

History

History
125 lines (83 loc) · 3.66 KB

DEVELOPMENT.md

File metadata and controls

125 lines (83 loc) · 3.66 KB
Raw

Development

This document describes the process for creating/updating themes.

Please read and follow our contribution guidelines.

Getting started

Fork and clone this project.

Enter the project directory, install the project dependencies, and initialize the development environment.

cd theme-collection
npm install
npm run init

Note

This process may take a while, so please be patient.

Creating a new theme

Rules for theme names:

  • It can only contain lowercase chars ('a-z'), numbers ('0-9'), and dash ('-')
  • It cannot begin or end with non-alphanumeric chars
  • Must be at least three characters long
  • Consecutive non-alphanumeric chars are also forbidden

From within the project directory, create the new theme.

npm run new-theme example-name

Important

Replace example-name with the name of the theme being created.

After creating the new theme, add its name to the "Theme list" section of the README.md file.

Updating a theme

Start the development environment

From within the project directory, run the following command.

npm run dev example-name

Important

Replace example-name with the name of the theme being updated.

This will start Node-RED on port 41880.

http://localhost:41880

Click on the link above to open it in your browser.

Reload (ctrl-R/cmd-R) after updating theme files.

Update theme colors

Update the colors in src/themes/example-name/theme.scss as required.

Good practices:

  • Don't use opacity, especially on background and border colors. It causes issues in Node-RED and also with third-party nodes.
  • Don't make changes to the following areas:
    • Fonts
      • $primary-font
      • $primary-font-size
      • $monospace-font
    • Workspace Buttons
      • $workspace-button
    • Nodes
      • $node-*
      • $port-*
    • Links
      • $link-*
    • Deploy Button
      • $deploy-button-*
    • Header
      • $header-*

Theme Customizations

Update src/themes/example-name/theme-custom.css to set the color-scheme property. If additional customizations are needed, add them to the end of the file.

Monaco Editor theme (OPTIONAL)

Update src/themes/example-name/theme-monaco.json to customize the colors of the Monaco Editor.

The default value is "tomorrow-night-bright". Replace it with the name of one of the themes in this list or with a custom Monaco theme object. See this section of the Node-RED documentation for reference.

Mermaid theme (OPTIONAL)

Update Mermaid's theme file - src/themes/example-name/theme-mermaid.json.

The default value is "dark". Replace it with the name of one of the themes in this list.

Publish the changes

When finished, press ctrl-D to quit the development environment.

Create a branch new-theme/example-name.

git checkout -b new-theme/example-name

Commit and push the changes.

git add .
git commit -m "Add Example Name theme"
git push