主题插件

编辑器的外观可以通过主题进行自定义。主题作为 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: {
        // 这必须是 style.css 文件的 *绝对* 路径
        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", {
         // 告诉 Node-RED 这是一个主题插件
         type: "node-red-theme",

         // 列出主题提供的 CSS 文件。如果有多个，这应该是一个文件名的数组
         css: "style.css"

         // 列出主题提供的脚本文件。
         // 如果主题不包含任何，这可以省略
         //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 主题名称
     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 提供了许多内置主题。完整列表在这里。

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

```javascript RED.plugins.registerPlugin(“my-custom-theme”, { type: “node-red-theme”, css: “style.css”, mermaid: { theme: “dark” // Mermaid 主题名称 } })