ComfyUI 提供灵活的外观自定义选项，允许您根据个人喜好来个性化界面。

​
调色板系统

自定义 ComfyUI 外观的主要方式是通过内置的调色板系统。这允许您：

  • 在预设主题之间切换
  • 修改特定界面元素
  • 创建并保存您自己的自定义主题
  • 导出和导入主题配置

​
访问调色板

  1. 点击侧边栏中的设置齿轮图标
  2. 选择外观 → 调色板

​
预设主题

ComfyUI 自带几个内置主题：

  • 深色主题（默认）
  • 浅色主题
  • 根据您的 ComfyUI 版本，可能有其他可用主题

​
自定义颜色

调色板系统让您可以自定义界面的几乎每个方面：

  • 节点颜色和样式
  • 背景颜色
  • 文本颜色和字体
  • 小部件外观
  • 连接线颜色和样式

​
导出/导入主题

您可以保存和分享您的自定义主题：

  1. 导出：在调色板设置中，点击”导出”将当前主题配置保存为 JSON 文件
  2. 导入：点击”导入”加载先前保存的主题或社区分享的主题

​
颜色配置属性

调色板允许您修改许多特定属性。以下是一些最常自定义的元素：

{
  "id": "my-custom-theme",          // 主题的唯一标识符
  "name": "My Custom Theme",        // 主题的显示名称
  "colors": {
    "node_slot": {                  // 按数据类型的节点连接槽颜色
      "CLIP": "#FFD500",            // CLIP 模型连接
      "IMAGE": "#64B5F6",           // 图像数据连接
      "LATENT": "#FF9CF9",          // 潜在空间连接
      "MODEL": "#B39DDB",           // 模型连接
      "VAE": "#FF6E6E"              // VAE 连接
      // (其他 ComfyUI 数据类型)
    },
    "litegraph_base": {             // 画布和图表外观
      "CLEAR_BACKGROUND_COLOR": "#222",      // 主画布背景
      "NODE_TITLE_COLOR": "#999",            // 节点标题文本颜色
      "NODE_SELECTED_TITLE_COLOR": "#FFF",   // 选中节点标题颜色
      "NODE_DEFAULT_BGCOLOR": "#353535",     // 默认节点背景
      "WIDGET_BGCOLOR": "#222",              // 小部件背景颜色
      "LINK_COLOR": "#9A9"                   // 连接线颜色
      // (其他 LiteGraph 属性)
    },
    "comfy_base": {                 // ComfyUI 界面颜色
      "fg-color": "#fff",           // 主要文本颜色
      "bg-color": "#202020",        // 主背景颜色
      "comfy-menu-bg": "#353535",   // 菜单背景颜色
      "comfy-input-bg": "#222",     // 输入字段背景
      "input-text": "#ddd",         // 输入文本颜色
      "border-color": "#4e4e4e"     // 边框颜色
      // (其他 ComfyUI 基础属性)
    }
  }
}

​
背景图片

ComfyUI 允许您为画布设置自定义背景图片，提供更加个性化的工作空间。

​
要求

  • ComfyUI 前端版本 1.20.5 或更新版本

​
通过设置设置背景图片

  1. 点击侧边栏中的设置齿轮图标
  2. 前往外观 → 背景图片
  3. 您可以：
    • 使用上传按钮从本地计算机上传图片
    • 提供远程图片的 URL

​
从生成结果设置背景图片

您还可以快速将生成的图片设置为背景：

  1. 使用任何工作流生成图片
  2. 在队列侧边栏中找到该图片
  3. 右键点击图片
  4. 从上下文菜单中选择设为背景

这是一种方便的方式，可以使用您自己的创作作为进一步工作的背景。

​
使用 user.css 进行高级自定义

对于调色板不能提供足够控制的情况，您可以通过 user.css 文件使用自定义 CSS。此方法推荐给需要自定义调色板系统中不可用元素的高级用户。

​
要求

  • ComfyUI 前端版本 1.20.5 或更新版本

​
设置 user.css

  1. 在 ComfyUI 用户目录（与工作流和设置相同位置 - 请参阅下面的位置详细信息）中创建一个名为 user.css 的文件
  2. 在此文件中添加您的自定义 CSS 规则
  3. 重启 ComfyUI 或刷新页面以应用更改

​
用户目录位置

ComfyUI 用户目录是存储您的个人设置、工作流和自定义内容的地方。位置取决于您的安装类型：

C:\Users\<your username>\AppData\Roaming\ComfyUI

此位置包含您的工作流、设置和其他用户特定文件。

​
CSS 特异性说明

user.css 文件在应用程序启动过程早期加载。因此，您可能需要在 CSS 规则中使用 !important 来确保它们覆盖默认样式。

​
user.css 自定义示例

/* 增加输入框和菜单中的字体大小以提高可读性 */
.comfy-multiline-input, .litecontextmenu .litemenu-entry {
    font-size: 20px !important;
}

/* 使上下文菜单项更大，便于选择 */
.litegraph .litemenu-entry,
.litemenu-title {
  font-size: 24px !important; 
}

/* 为调色板中不可用的特定元素自定义样式 */
.comfy-menu {
    border: 1px solid rgb(126, 179, 189) !important;
    border-radius: 0px 0px 0px 10px !important;
    backdrop-filter: blur(2px);
}

​
最佳实践

  1. 首先使用调色板进行大多数自定义
  2. 仅在必要时使用 user.css，用于调色板未涵盖的元素
  3. 在进行重大更改前导出您的主题，以便在需要时恢复
  4. 与社区分享您的主题，以启发他人

​
故障排除

  • 如果您的调色板更改没有显示，尝试刷新页面
  • 如果 CSS 自定义不起作用，检查您是否使用前端版本 1.20.5+
  • 尝试在未应用的 user.css 规则中添加 !important
  • 保留您的自定义备份，以便轻松恢复