主题插件

编辑器的外观可以通过主题进行自定义。主题被打包并安装为 Node-RED 插件，然后通过设置文件中的 editorTheme.theme 属性进行选择。

创建主题 CSS
打包为主题插件
Monaco 编辑器主题化
Mermaid 图表主题化

创建主题 CSS

Node-RED 代码仓库包含一个可用于生成主题 CSS 的脚本。

克隆 Node-RED 仓库

 git clone https://github.com/node-red/node-red

从仓库中创建 packages/node_modules/@node-red/editor-client/src/sass/colors.scss 的副本

 mkdir my-custom-theme
 cp node-red/packages/node_modules/@node-red/editor-client/src/sass/colors.scss my-custom-theme

编辑 my-custom-theme/colors.scss 以设置不同 Node-RED 组件的自定义颜色

运行 build-custom-theme 脚本以生成主题 CSS

 node node-red/scripts/build-custom-theme.js \
      --in ../my-custom-theme/colors.scss \
      --out ../my-custom-theme/style.css

此时，您可以通过更新设置文件的 editorTheme 属性来测试 CSS

editorTheme: {
    page: {
        // This must be the *absolute* path to the style.css file
        css: "/absolute/path/to/my-custom-theme/style.css"
    }
}

打包为主题插件

主题插件被打包为 npm 模块——与节点打包方式相同。它还需要一个 JavaScript 文件来完成向 Node-RED 注册主题的工作。

在主题目录中创建 theme.js 文件。

 module.exports = function(RED) {
     RED.plugins.registerPlugin("my-custom-theme", {
         // Tells Node-RED this is a theme plugin
         type: "node-red-theme",

         // List the CSS files the theme provides. If there are
         // more than one, this should be an array of filenames
         css: "style.css"

         // List the script files the theme provides.
         // If the theme doesn't include any, this can be left out
         //scripts: "theme.js"
     })
 }

为您的插件创建 package.json 文件。您可以使用 npm init 生成一个默认文件
```
 cd my-custom-theme
 npm init
```
它将提示一系列问题以帮助填写字段。

如果您想在名称中包含 node-red，请确保遵循标准命名指南。

对于主题插件，请考虑使用以下名称：node-red-contrib-theme-XYZ
在 package.json 中添加一个 node-red 部分，用于标识插件的 theme.js 文件
```
 "node-red": {
     "plugins": {
         "my-theme": "theme.js"
     }
 }
```
与 Node-RED 节点一样，您应该将 node-red 添加到 keywords 属性中。

测试主题

一旦打包为 npm 模块，它可以通过本地安装进行测试，而无需发布到 npm。

在您的 Node-RED 用户目录 (~/.node-red) 中运行
```
 npm install /path/to/my-custom-theme
```
编辑您的设置文件以选择插件。请确保删除您之前在测试 CSS 时可能添加的任何 editorTheme.page.css 条目。
```
 editorTheme: {
     theme: "my-custom-theme",
 }
```
重启 Node-RED

如果您需要对 CSS 进行任何进一步的更改，您可以重新运行 build-custom-theme 脚本，然后只需重新加载编辑器即可查看更改——您应该不需要重新启动 Node-RED

Monaco 编辑器主题化

除了提供自定义 CSS 和脚本之外，主题插件还可以提供自定义 Monaco 编辑器选项，包括它应该使用哪个主题。

按名称设置 Monaco 主题

Monaco 带有许多内置主题。完整列表在此处。有关 Monaco 选项的其他设置可以在此处找到。

主题名称可以在插件设置中提供

RED.plugins.registerPlugin("my-custom-theme", {
   type: "node-red-theme",
   css: "style.css",
   monacoOptions: {
     theme: "vs-dark", // Monaco theme name
     fontSize: 14,
     fontLigatures: true,
     fontFamily: "Cascadia Code, Fira Code, Consolas, 'Courier New', monospace",
     minimap: { enabled: false }
   }
 })

设置自定义 Monaco 主题

除了按名称指定内置主题外，monacoOptions.theme 设置还可以用于提供自定义 Monaco 主题对象

RED.plugins.registerPlugin("my-custom-theme", {
    monacoOptions: {
      theme: {
        "base": "vs-dark",
        "inherit": true,
        "colors": {
          "editor.foreground": "#CCC",
          "editor.background": "#434954",
          "editor.selectionBackground": "#80000080",
          "editor.lineHighlightBackground": "#80000040",
          "editorCursor.foreground": "#7070FF",
          "editorWhitespace.foreground": "#BFBFBF"
        },      
        "rules": [
            {
                "background": "434954",
            },
            {
                "foreground": "aeaeae",
                "fontStyle": "italic",
                "token": "comment"
            },
            {
                "foreground": "d8fa3c",
                "token": "string"
            },
            {
                "foreground": "d8fa3c",
                "fontStyle": "bold",
                "token": "constant"
            },
        ]
      }
    }
})

从 JSON 文件设置自定义 Monaco 主题

除了硬编码主题设置外，您可以将 Monaco 主题 JSON 存储在一个单独的文件中，并使用 require 导入它

RED.plugins.registerPlugin("my-custom-theme", {
    monacoOptions: {
      theme: require("./my-custom-theme-monaco-theme.json"),
    }
})

my-custom-theme-monaco-theme.json 文件示例

{
  "base": "vs-dark",
  "inherit": true,
  "colors": {
    "editor.foreground": "#CCC",
    "editor.background": "#434954",
    "editor.selectionBackground": "#80000080",
    "editor.lineHighlightBackground": "#80000040",
    "editorCursor.foreground": "#7070FF",
    "editorWhitespace.foreground": "#BFBFBF"
  },      
  "rules": [
      {
          "background": "434954",
      },
      {
          "foreground": "aeaeae",
          "fontStyle": "italic",
          "token": "comment"
      },
      {
          "foreground": "d8fa3c",
          "token": "string"
      },
      {
          "foreground": "d8fa3c",
          "fontStyle": "bold",
          "token": "constant"
      },
  ]
}

如何创建 Monaco 主题的具体细节超出了我们文档的范围。

Mermaid 图表主题化

主题插件还可以为 Mermaid 图表和图表工具设置主题。

Mermaid 带有许多内置主题。完整列表在此处。

主题名称可以在插件设置中提供

RED.plugins.registerPlugin("my-custom-theme", {
   type: "node-red-theme",
   css: "style.css",
   mermaid: {
     theme: "dark" //Mermaid theme name
   }
 })