跳转到主要内容
本页面中描述的设置项位于 ComfyUI 软件内的设置菜单中。你可以通过点击 设置(齿轮图标)或使用 Ctrl + , 快捷键打开设置面板,然后选择对应的分类来查看和配置这些选项。
这部分的设置主要用于自定义 ComfyUI 的外观,包括色彩主题、背景图片、节点样式等。

色彩主题

自定义 ComfyUI 外观的主要方式是通过内置的调色板系统。 色彩主题
  1. 切换 ComfyUI 主题
  2. 将当前选中的主题导出为 JSON 格式
  3. 从Json文件中载入自定义主题配置
  4. 删除自定义主题配置
对于调色板无法满足的外观需求,你可以通过 user.css 文件进行高级外观自定义

如何自定义颜色主题

调色板允许您修改许多特定属性。以下是一些最常自定义的元素,颜色采用十六进制表示:
  1. 下面的 JSON 注释只是为了注释说明,实际使用请不要复制下面的内容进行修改,否则将会导致主题无法正常使用
  2. 由于我们仍在频繁迭代,下面的这些内容可能会随着 ComfyUI 前端的更新而有所调整,如果需要修改,请从设置中导出主题配置,然后进行修改

画布

背景图片

  • 版本要求:ComfyUI 前端版本 1.20.5 或更新版本
  • 功能:为画布设置自定义背景图片,提供更加个性化的工作空间,你可以上传图片或者使用网络图片来为画布设置背景图片
设置背景图片

节点

节点不透明度

  • 功能:设置节点的不透明度,0表示完全透明,1表示完全不透明
节点不透明度

节点组件

文本域小部件字体大小**

  • 范围:8 - 24
  • 功能:设置文本域小部件中的字体大小,调整文本输入框中文字的显示大小,提升可读性 文本域小部件字体大小

侧边栏

统一侧边栏宽度

  • 功能:启用后,当你在不同的侧边栏之间切换时,侧边栏的宽度将统一为一致的宽度,如果禁用,不同的侧边栏的宽度在切换时可以保持自定义的宽度

侧边栏大小

  • 功能:控制侧边栏的尺寸大小,可以设置为正常或者小

侧边栏位置

  • 功能:控制侧边栏显示在界面的左侧还是右侧,允许用户根据使用习惯调整侧边栏位置

侧边栏样式

  • 功能:控制侧边栏的视觉样式。选项包括:
    • 连接式(Connected):侧边栏与界面边缘连接显示。
    • 悬浮式(Floating):侧边栏以悬浮面板形式显示,与界面边缘有视觉分隔。
侧边栏样式

树形浏览器

树形浏览器项目内边距

  • 功能:设置树形浏览器(侧边栏面板)中项目的内边距,调整树形结构中各项目之间的间距
树形浏览器项目内边距

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

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

要求

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

设置 user.css

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

用户目录位置

ComfyUI 用户目录是存储您的个人设置、工作流和自定义内容的地方。位置取决于您的安装类型:
用户目录位于您的 ComfyUI 安装文件夹中:
例如,如果您将 ComfyUI 克隆到 C:\ComfyUI,您的用户目录将是 C:\ComfyUI\user\default(或者如果您设置了自定义用户名,则为 C:\ComfyUI\user\john)。
ComfyUI 支持每个安装支持多个用户。如果您没有配置自定义用户名,默认为 “default”。每个用户在 user 文件夹内都有自己的子目录。
用户目录位于您的 ComfyUI 便携版文件夹中:
例如:ComfyUI_windows_portable/ComfyUI/user/default
ComfyUI 支持每个安装支持多个用户。如果您没有配置自定义用户名,默认为 “default”。每个用户在 user 文件夹内都有自己的子目录。
此位置包含您的工作流、设置和其他用户特定文件。 找到上述文件夹位置后,请将对应的 Css 文件复制到对应的用户目录中如默认用户文件夹为ComfyUI/user/default,然后重启 ComfyUI 或刷新页面以应用更改

user.css 示例及相关说明

user.css 文件会在启动的早期就进行加载。所以能需要在 CSS 规则中使用 !important 来确保它们覆盖默认样式。 user.css 自定义示例
最佳实践
  1. 首先使用调色板进行大多数自定义
  2. 仅在必要时使用 user.css,用于调色板未涵盖的元素
  3. 在进行重大更改前导出您的主题,以便在需要时恢复
  4. 与社区分享您的主题,以启发他人
故障排除
  • 如果您的调色板更改没有显示,尝试刷新页面
  • 如果 CSS 自定义不起作用,检查您是否使用前端版本 1.20.5+
  • 尝试在未应用的 user.css 规则中添加 !important
  • 保留您的自定义备份,以便轻松恢复