> ## Documentation Index
> Fetch the complete documentation index at: https://dripart-train-lora-docs.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 自定义 ComfyUI 外观

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

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

## 调色板系统

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

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

### 访问调色板

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

### 预设主题

ComfyUI 自带几个内置主题：

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

### 自定义颜色

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

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

### 导出/导入主题

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

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

### 颜色配置属性

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

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

<Tabs>
  <Tab title="桌面版Windows">
    ```
    C:\Users\<your username>\AppData\Roaming\ComfyUI
    ```
  </Tab>

  <Tab title="桌面版macOS">
    ```
    ~/Library/Application Support/ComfyUI
    ```
  </Tab>

  <Tab title="桌面版Linux">
    ```
    ~/.config/ComfyUI
    ```
  </Tab>

  <Tab title="手动安装">
    用户目录位于您的 ComfyUI 安装文件夹中：

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

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

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

  <Tab title="便携版">
    用户目录位于您的 ComfyUI 便携版文件夹中：

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

    例如：`ComfyUI_windows_portable/ComfyUI/user/default`

    <Note>
      ComfyUI 支持每个安装支持多个用户。如果您没有配置自定义用户名，默认为 "default"。每个用户在 `user` 文件夹内都有自己的子目录。
    </Note>
  </Tab>
</Tabs>

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

### CSS 特异性说明

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

### user.css 自定义示例

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