Add Appearance page to "Interface" section

docs.json

@@ -57,7 +57,8 @@
                   "interface/maskeditor",
                   "development/core-concepts/models",
                   "development/core-concepts/dependencies",
-                  "interface/shortcuts"
+                  "interface/shortcuts",
+                  "interface/appearance"
                 ]
               },
               {
@@ -471,7 +472,8 @@
                   "zh-CN/development/core-concepts/links",
                   "zh-CN/development/core-concepts/models",
                   "zh-CN/development/core-concepts/dependencies",
-                  "zh-CN/interface/shortcuts"
+                  "zh-CN/interface/shortcuts",
+                  "zh-CN/interface/appearance"
                 ]
               },
               {
@@ -978,4 +980,4 @@
       "destination": "tutorials/image/hidream/hidream-e1"
     }
   ]
-}
+}

interface/appearance.mdx

@@ -0,0 +1,160 @@
+---
+title: "Customizing ComfyUI Appearance"
+description: "Learn how to customize the appearance of ComfyUI using color palettes and advanced CSS options"
+sidebarTitle: "Appearance"
+icon: "paintbrush"
+---
+
+ComfyUI offers flexible appearance customization options that allow you to personalize the interface to your preferences.
+
+## Color Palette System
+
+The primary way to customize ComfyUI's appearance is through the built-in color palette system. This allows you to:
+
+- Switch between preset themes
+- Modify specific interface elements
+- Create and save your own custom themes
+- Export and import theme configurations
+
+### Accessing the Color Palette
+
+1. Click the **Settings** gear icon in the sidebar
+2. Select **Appearance** → **Color Palette**
+
+### Preset Themes
+
+ComfyUI comes with several built-in themes:
+
+- Dark Theme (default)
+- Light Theme
+- Additional themes may be available depending on your ComfyUI version
+
+### Customizing Colors
+
+The color palette system lets you customize virtually every aspect of the interface:
+
+- Node colors and styles
+- Background colors
+- Text colors and fonts
+- Widget appearance
+- Connection link colors and styles
+
+### Export/Import Themes
+
+You can save and share your custom themes:
+
+1. **Export**: In the Color Palette settings, click "Export" to save your current theme configuration as a JSON file
+2. **Import**: Click "Import" to load a previously saved theme or one shared by the community
+
+### Color Configuration Properties
+
+The color palette allows you to modify many specific properties. Here are some of the most commonly customized elements:
+
+```json
+{
+  "comfy_base": "#222222",          // Base background color
+  "comfy_primary": "#4F6AA8",       // Primary accent color
+  "comfy_secondary": "#A87732",     // Secondary accent color
+  "comfy_text": "#EFEFEF",          // Text color
+  "comfy_input_bg": "#111111",      // Input background color
+  "node_slot": {                    // Node connection slot colors
+    "float": "#88DD66",
+    "image": "#6688FF",
+    // (other data types)
+  },
+  "litegraph": {                    // Canvas and graph appearance
+    "node_title": {
+      "color": "#CCCCCC"            // Node title text color
+    },
+    "node_selected": {
+      "color": "#FFFFFF"            // Color of selected nodes
+    }
+    // (other UI elements)
+  }
+}
+```
+
+## Background Image
+
+ComfyUI allows you to set a custom background image for your canvas, providing a more personalized workspace.
+
+### Requirements
+
+- ComfyUI frontend version 1.20.5 or newer
+
+### Setting a Background Image via Settings
+
+1. Click the **Settings** gear icon in the sidebar
+2. Go to **Appearance** → **Background Image**
+3. You can:
+   - Upload an image from your local computer using the upload button
+   - Provide a URL to a remote image
+
+### Setting a Background Image from Generated Results
+
+You can also quickly set a generated image as the background:
+
+1. Generate an image using any workflow
+2. Find the image in the queue sidebar
+3. Right-click on the image
+4. Select **Set as Background** from the context menu
+
+This is a convenient way to use your own creations as a background for further work.
+
+## Advanced Customization with user.css
+
+For cases where the color palette doesn't provide enough control, you can use custom CSS via a user.css file. This method is recommended for advanced users who need to customize elements that aren't available in the color palette system.
+
+### Requirements
+
+- ComfyUI frontend version 1.20.5 or newer
+
+### Setting Up user.css
+
+1. Create a file named `user.css` in your ComfyUI user directory (same location as your workflows and settings)
+2. Add your custom CSS rules to this file
+3. Restart ComfyUI or refresh the page to apply changes
+
+### User Directory Location
+
+<Snippet file="install/user-directory.mdx" />
+
+### CSS Specificity Note
+
+The user.css file is loaded early in the application startup process. Because of this, you may need to use `!important` in your CSS rules to ensure they override the default styles.
+
+### Example user.css Customizations
+
+```css
+/* Increase font size in inputs and menus for better readability */
+.comfy-multiline-input, .litecontextmenu .litemenu-entry {
+    font-size: 20px !important;
+}
+
+/* Make context menu entries larger for easier selection */
+.litegraph .litemenu-entry,
+.litemenu-title {
+  font-size: 24px !important; 
+}
+
+/* Custom styling for specific elements not available in the color palette */
+.comfy-menu {
+    border: 1px solid rgb(126, 179, 189) !important;
+    border-radius: 0px 0px 0px 10px !important;
+    backdrop-filter: blur(2px);
+}
+```
+
+## Best Practices
+
+1. **Start with the color palette** for most customizations
+2. Use **user.css only when necessary** for elements not covered by the color palette
+3. **Export your theme** before making significant changes so you can revert if needed
+4. **Share your themes** with the community to inspire others
+
+## Troubleshooting
+
+- If your color palette changes don't appear, try refreshing the page
+- If CSS customizations don't work, check that you're using frontend version 1.20.5+
+- Try adding `!important` to user.css rules that aren't being applied
+- Keep backups of your customizations to easily restore them

snippets/install/user-directory.mdx

@@ -0,0 +1,22 @@
+The ComfyUI user directory is where your personal settings, workflows, and customizations are stored. The location depends on whether you're using the desktop application or the standard installation:
+
+## Desktop Application
+
+### Windows
+- `C:\Users\<your username>\AppData\Roaming\ComfyUI`
+
+### macOS
+- `~/Library/Application Support/ComfyUI`
+
+### Linux
+- `~/.config/ComfyUI`
+
+## Standard Installation (Non-Desktop)
+
+The user directory is located in the main ComfyUI installation folder:
+
+- `<ComfyUI installation path>/user`
+
+For example, if you cloned ComfyUI to `C:\ComfyUI`, your user directory would be `C:\ComfyUI\user`.
+
+This location contains your workflows, settings, and other user-specific files.

zh-CN/interface/appearance.mdx

@@ -0,0 +1,160 @@
+---
+title: "自定义 ComfyUI 外观"
+description: "了解如何使用调色板和高级 CSS 选项自定义 ComfyUI 的外观"
+sidebarTitle: "外观"
+icon: "paintbrush"
+---
+
+ComfyUI 提供灵活的外观自定义选项，允许您根据个人喜好来个性化界面。
+
+## 调色板系统
+
+自定义 ComfyUI 外观的主要方式是通过内置的调色板系统。这允许您：
+
+- 在预设主题之间切换
+- 修改特定界面元素
+- 创建并保存您自己的自定义主题
+- 导出和导入主题配置
+
+### 访问调色板
+
+1. 点击侧边栏中的**设置**齿轮图标
+2. 选择**外观** → **调色板**
+
+### 预设主题
+
+ComfyUI 自带几个内置主题：
+
+- 深色主题（默认）
+- 浅色主题
+- 根据您的 ComfyUI 版本，可能有其他可用主题
+
+### 自定义颜色
+
+调色板系统让您可以自定义界面的几乎每个方面：
+
+- 节点颜色和样式
+- 背景颜色
+- 文本颜色和字体
+- 小部件外观
+- 连接线颜色和样式
+
+### 导出/导入主题
+
+您可以保存和分享您的自定义主题：
+
+1. **导出**：在调色板设置中，点击"导出"将当前主题配置保存为 JSON 文件
+2. **导入**：点击"导入"加载先前保存的主题或社区分享的主题
+
+### 颜色配置属性
+
+调色板允许您修改许多特定属性。以下是一些最常自定义的元素：
+
+```json
+{
+  "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 或刷新页面以应用更改
+
+### 用户目录位置
+
+<Snippet file="install/user-directory.mdx" />
+
+### 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`
+- 保留您的自定义备份，以便轻松恢复