Skip to content

Latest commit

 

History

History
86 lines (53 loc) · 3.25 KB

DEVELOPMENT.md

File metadata and controls

86 lines (53 loc) · 3.25 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

From within the project directory, create the new theme.

Rules for theme names
  • Must only contain alphanumeric chars ('0-9', 'a-z', 'A-Z') and dash ('-')
  • Must not begin or end with non-alphanumeric chars
  • Must be at least three characters long
  • Consecutive non-alphanumeric chars are also forbidden
cd theme-collection
npm run create-theme example-theme

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

Changing a theme

  1. From within the project directory, start the development environment.

     cd theme-collection
 npm run dev example-theme

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

  2. Access Node-RED at http://localhost:41880.

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

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

  4. (OPTIONAL) If additional customizations are needed, add them to src/themes/example-theme/theme-custom.css.

  5. (OPTIONAL) Update src/themes/example-theme/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.

  6. (OPTIONAL) Customize Mermaid's theme file - src/themes/example-theme/theme-mermaid.json.

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

  7. Refresh Node-RED in the browser to preview the changes.

  8. Repeat steps 3 to 7 as needed. When finished, press ctrl-D to quit the development environment.

  9. Commit, push, and create a pull request.

Thanks for taking the time to contribute! 😍