自定义 ComfyUI 外观

了解如何使用调色板和高级 CSS 选项自定义 ComfyUI 的外观

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 用户目录是存储您的个人设置、工作流和自定义内容的地方。位置取决于您的安装类型：

桌面版Windows

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

桌面版macOS

~/Library/Application Support/ComfyUI

桌面版Linux

~/.config/ComfyUI

手动安装

用户目录位于您的 ComfyUI 安装文件夹中：

<ComfyUI 安装路径>/user/<用户名>

例如，如果您将 ComfyUI 克隆到 C:\ComfyUI，您的用户目录将是 C:\ComfyUI\user\default（或者如果您设置了自定义用户名，则为 C:\ComfyUI\user\john）。

ComfyUI 支持每个安装支持多个用户。如果您没有配置自定义用户名，默认为 “default”。每个用户在 user 文件夹内都有自己的子目录。

便携版

用户目录位于您的 ComfyUI 便携版文件夹中：

<ComfyUI_windows_portable>/ComfyUI/user/<用户名>

例如：ComfyUI_windows_portable/ComfyUI/user/default

ComfyUI 支持每个安装支持多个用户。如果您没有配置自定义用户名，默认为 “default”。每个用户在 user 文件夹内都有自己的子目录。

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

​

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