ComfyUI 外观设置
ComfyUI 外观设置选项的详细说明
这部分的设置主要用于自定义 ComfyUI 的外观,包括色彩主题、背景图片、节点样式等。
色彩主题
自定义 ComfyUI 外观的主要方式是通过内置的调色板系统。
- 切换 ComfyUI 主题
- 将当前选中的主题导出为 JSON 格式
- 从Json文件中载入自定义主题配置
- 删除自定义主题配置
对于调色板无法满足的外观需求,你可以通过 user.css 文件进行高级外观自定义
如何自定义颜色主题
调色板允许您修改许多特定属性。以下是一些最常自定义的元素,颜色采用十六进制表示:
- 下面的 JSON 注释只是为了注释说明,实际使用请不要复制下面的内容进行修改,否则将会导致主题无法正常使用
- 由于我们仍在频繁迭代,下面的这些内容可能会随着 ComfyUI 前端的更新而有所调整,如果需要修改,请从设置中导出主题配置,然后进行修改
画布
背景图片
- 版本要求:ComfyUI 前端版本 1.20.5 或更新版本
- 功能:为画布设置自定义背景图片,提供更加个性化的工作空间,你可以上传图片或者使用网络图片来为画布设置背景图片
节点
节点不透明度
- 功能:设置节点的不透明度,0表示完全透明,1表示完全不透明
节点组件
文本域小部件字体大小**
- 范围:8 - 24
- 功能:设置文本域小部件中的字体大小,调整文本输入框中文字的显示大小,提升可读性
侧边栏
统一侧边栏宽度
- 功能:启用后,当你在不同的侧边栏之间切换时,侧边栏的宽度将统一为一致的宽度,如果禁用,不同的侧边栏的宽度在切换时可以保持自定义的宽度
侧边栏大小
- 功能:控制侧边栏的尺寸大小,可以设置为正常或者小
侧边栏位置
- 功能:控制侧边栏显示在界面的左侧还是右侧,允许用户根据使用习惯调整侧边栏位置
树形浏览器
树形浏览器项目内边距
- 功能:设置树形浏览器(侧边栏面板)中项目的内边距,调整树形结构中各项目之间的间距
使用user.css进行高级外观自定义
对于调色板不能提供足够控制的情况,您可以通过 user.css 文件使用自定义 CSS。此方法推荐给需要自定义调色板系统中不可用元素的高级用户。
要求
- ComfyUI 前端版本 1.20.5 或更新版本
设置 user.css
- 在 ComfyUI 用户目录(与工作流和设置相同位置 - 请参阅下面的位置详细信息)中创建一个名为
user.css
的文件 - 在此文件中添加您的自定义 CSS 规则
- 重启 ComfyUI 或刷新页面以应用更改
用户目录位置
ComfyUI 用户目录是存储您的个人设置、工作流和自定义内容的地方。位置取决于您的安装类型:
桌面版Windows
桌面版Windows
桌面版macOS
桌面版macOS
手动安装
手动安装
用户目录位于您的 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 自定义示例
最佳实践
- 首先使用调色板进行大多数自定义
- 仅在必要时使用 user.css,用于调色板未涵盖的元素
- 在进行重大更改前导出您的主题,以便在需要时恢复
- 与社区分享您的主题,以启发他人
故障排除
- 如果您的调色板更改没有显示,尝试刷新页面
- 如果 CSS 自定义不起作用,检查您是否使用前端版本 1.20.5+
- 尝试在未应用的 user.css 规则中添加
!important
- 保留您的自定义备份,以便轻松恢复