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

​
调色板系统

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

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

​
访问调色板

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

​
预设主题

ComfyUI 自带几个内置主题：

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

​
自定义颜色

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

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

​
导出/导入主题

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

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

​
颜色配置属性

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

{
  "comfy_base": "#222222",          // 基础背景颜色
  "comfy_primary": "#4F6AA8",       // 主要强调色
  "comfy_secondary": "#A87732",     // 次要强调色
  "comfy_text": "#EFEFEF",          // 文本颜色
  "comfy_input_bg": "#111111",      // 输入框背景色
  "node_slot": {                    // 节点连接槽颜色
    "float": "#88DD66",
    "image": "#6688FF",
    // (其他数据类型)
  },
  "litegraph": {                    // 画布和图表外观
    "node_title": {
      "color": "#CCCCCC"            // 节点标题文本颜色
    },
    "node_selected": {
      "color": "#FFFFFF"            // 选中节点的颜色
    }
    // (其他 UI 元素)
  }
}

​
背景图片

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 或刷新页面以应用更改

​
用户目录位置

​
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
  • 保留您的自定义备份，以便轻松恢复