Update ComfyUI Settings Docs

development/core-concepts/models.mdx

@@ -1,6 +1,6 @@
 ---
 title: "Models"
-icon: "file"
+icon: "cube"
 ---
 
 import ExternalModels from "/snippets/install/add-external-models.mdx"

docs.json

@@ -47,20 +47,40 @@
                 ]
               },
               {
-                "group": "Interface",
+                "group": "Basic Concepts",
                 "pages": [
-                  "interface/overview",
-                  "interface/user",
-                  "interface/credits",
                   "development/core-concepts/workflow",
                   "development/core-concepts/nodes",
+                  "development/core-concepts/custom-nodes",
                   "development/core-concepts/properties",
                   "development/core-concepts/links",
-                  "interface/maskeditor",
                   "development/core-concepts/models",
-                  "development/core-concepts/dependencies",
-                  "interface/shortcuts",
-                  "interface/appearance"
+                  "development/core-concepts/dependencies"                ]
+              },
+              {
+                "group": "Interface Guide",
+                "pages": [
+                  "interface/overview",
+                  "interface/maskeditor",
+                  {
+                    "group": "ComfyUI Settings",
+                    "icon": "gear",
+                    "pages": [
+                      "interface/settings/overview",
+                      "interface/user",
+                      "interface/credits",
+                      "interface/settings/comfy",
+                      "interface/settings/lite-graph",
+                      "interface/appearance",
+                      "interface/settings/3d",
+                      "interface/settings/comfy-desktop",
+                      "interface/settings/mask-editor",
+                      "interface/shortcuts",
+                      "interface/settings/extension",
+                      "interface/settings/about",
+                      "interface/settings/server-config"
+                    ]
+                  }
                 ]
               },
               {
@@ -558,21 +578,40 @@
                 ]
               },
               {
-                "group": "界面指南",
+                "group": "基础概念",
                 "pages": [
-                  "zh-CN/interface/overview",
-                  "zh-CN/interface/user",
-                  "zh-CN/interface/credits",
-                  "zh-CN/interface/maskeditor",
                   "zh-CN/development/core-concepts/workflow",
                   "zh-CN/development/core-concepts/nodes",
                   "zh-CN/development/core-concepts/custom-nodes",
                   "zh-CN/development/core-concepts/properties",
                   "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/appearance"
+                  "zh-CN/development/core-concepts/dependencies"                ]
+              },
+              {
+                "group": "界面指南",
+                "pages": [
+                  "zh-CN/interface/overview",
+                  "zh-CN/interface/maskeditor",
+                  {
+                    "group": "ComfyUI 设置",
+                    "icon": "gear",
+                    "pages": [
+                      "zh-CN/interface/settings/overview",
+                      "zh-CN/interface/user",
+                      "zh-CN/interface/credits",
+                      "zh-CN/interface/settings/comfy",
+                      "zh-CN/interface/settings/lite-graph",
+                      "zh-CN/interface/appearance",
+                      "zh-CN/interface/settings/3d",
+                      "zh-CN/interface/settings/comfy-desktop",
+                      "zh-CN/interface/settings/mask-editor",
+                      "zh-CN/interface/shortcuts",
+                      "zh-CN/interface/settings/extension",
+                      "zh-CN/interface/settings/about",
+                      "zh-CN/interface/settings/server-config"
+                    ]
+                  }
                 ]
               },
               {

interface/appearance.mdx

@@ -11,108 +11,152 @@ ComfyUI offers flexible appearance customization options that allow you to perso
 
 ## Color Palette System
 
-The primary way to customize ComfyUI's appearance is through the built-in color palette system. This allows you to:
+The primary way to customize ComfyUI's appearance is through the built-in color palette system.
 
-- Switch between preset themes
-- Modify specific interface elements
-- Create and save your own custom themes
-- Export and import theme configurations
+![Color Palette](/images/interface/setting/appearance/color-palette.jpg)
 
-### Accessing the Color Palette
+This allows you to:
 
-1. Click the **Settings** gear icon in the sidebar
-2. Select **Appearance** → **Color Palette**
+1. Switch ComfyUI themes
+2. Export the currently selected theme as JSON format
+3. Load custom theme configuration from JSON file
+4. Delete custom theme configuration
 
-### Preset Themes
+<Note>
+  For appearance needs that cannot be satisfied by the color palette, you can perform advanced appearance customization through the [user.css](#advanced-customization-with-user-css) file
+</Note>
 
-ComfyUI comes with several built-in themes:
+### How to Customize Color Themes
 
-- Dark Theme (default)
-- Light Theme
-- Additional themes may be available depending on your ComfyUI version
+The color palette allows you to modify many specific properties. Here are some of the most commonly customized elements, with colors represented in hexadecimal format:
 
-### 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:
+<Tip>
+  1. The JSON comments below are for illustration only. Do not copy the content below for modification as it will cause the theme to malfunction.
+  2. Since we are still iterating frequently, the content below may change with ComfyUI frontend updates. If you need to modify, please export the theme configuration from settings and then modify it.
+</Tip>
 
 ```json
 {
-  "id": "my-custom-theme",          // Unique identifier for the theme
-  "name": "My Custom Theme",        // Display name for the theme
+  "id": "dark",                     // Must be unique, cannot be the same as other theme IDs
+  "name": "Dark (Default)",         // Theme name, displayed in theme selector
   "colors": {
-    "node_slot": {                  // Node connection slot colors by data type
-      "CLIP": "#FFD500",            // CLIP model connections
-      "IMAGE": "#64B5F6",           // Image data connections
-      "LATENT": "#FF9CF9",          // Latent space connections
-      "MODEL": "#B39DDB",           // Model connections
-      "VAE": "#FF6E6E"              // VAE connections
-      // (other ComfyUI data types)
+    "node_slot": {                  // Node connection slot color configuration
+      "CLIP": "#FFD500",            // CLIP model connection slot color
+      "CLIP_VISION": "#A8DADC",     // CLIP Vision model connection slot color
+      "CLIP_VISION_OUTPUT": "#ad7452", // CLIP Vision output connection slot color
+      "CONDITIONING": "#FFA931",     // Conditioning control connection slot color
+      "CONTROL_NET": "#6EE7B7",     // ControlNet model connection slot color
+      "IMAGE": "#64B5F6",           // Image data connection slot color
+      "LATENT": "#FF9CF9",          // Latent space connection slot color
+      "MASK": "#81C784",            // Mask data connection slot color
+      "MODEL": "#B39DDB",           // Model connection slot color
+      "STYLE_MODEL": "#C2FFAE",     // Style model connection slot color
+      "VAE": "#FF6E6E",             // VAE model connection slot color
+      "NOISE": "#B0B0B0",           // Noise data connection slot color
+      "GUIDER": "#66FFFF",          // Guider connection slot color
+      "SAMPLER": "#ECB4B4",         // Sampler connection slot color
+      "SIGMAS": "#CDFFCD",          // Sigmas data connection slot color
+      "TAESD": "#DCC274"            // TAESD model connection slot color
     },
-    "litegraph_base": {             // Canvas and graph appearance
-      "CLEAR_BACKGROUND_COLOR": "#222",      // Main canvas background
-      "NODE_TITLE_COLOR": "#999",            // Node title text color
-      "NODE_SELECTED_TITLE_COLOR": "#FFF",   // Selected node title color
-      "NODE_DEFAULT_BGCOLOR": "#353535",     // Default node background
-      "WIDGET_BGCOLOR": "#222",              // Widget background color
-      "LINK_COLOR": "#9A9"                   // Connection link color
-      // (other LiteGraph properties)
+    "litegraph_base": {             // LiteGraph base interface configuration
+      "BACKGROUND_IMAGE": "",        // Background image, default is empty
+      "CLEAR_BACKGROUND_COLOR": "#222", // Main canvas background color
+      "NODE_TITLE_COLOR": "#999",    // Node title text color
+      "NODE_SELECTED_TITLE_COLOR": "#FFF", // Selected node title color
+      "NODE_TEXT_SIZE": 14,          // Node text size
+      "NODE_TEXT_COLOR": "#AAA",     // Node text color
+      "NODE_TEXT_HIGHLIGHT_COLOR": "#FFF", // Node text highlight color
+      "NODE_SUBTEXT_SIZE": 12,       // Node subtext size
+      "NODE_DEFAULT_COLOR": "#333",   // Node default color
+      "NODE_DEFAULT_BGCOLOR": "#353535", // Node default background color
+      "NODE_DEFAULT_BOXCOLOR": "#666", // Node default border color
+      "NODE_DEFAULT_SHAPE": 2,        // Node default shape
+      "NODE_BOX_OUTLINE_COLOR": "#FFF", // Node border outline color
+      "NODE_BYPASS_BGCOLOR": "#FF00FF", // Node bypass background color
+      "NODE_ERROR_COLOUR": "#E00",    // Node error state color
+      "DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.5)", // Default shadow color
+      "DEFAULT_GROUP_FONT": 24,       // Group default font size
+      "WIDGET_BGCOLOR": "#222",       // Widget background color
+      "WIDGET_OUTLINE_COLOR": "#666", // Widget outline color
+      "WIDGET_TEXT_COLOR": "#DDD",    // Widget text color
+      "WIDGET_SECONDARY_TEXT_COLOR": "#999", // Widget secondary text color
+      "WIDGET_DISABLED_TEXT_COLOR": "#666", // Widget disabled state text color
+      "LINK_COLOR": "#9A9",          // Connection line color
+      "EVENT_LINK_COLOR": "#A86",    // Event connection line color
+      "CONNECTING_LINK_COLOR": "#AFA", // Connecting line color
+      "BADGE_FG_COLOR": "#FFF",      // Badge foreground color
+      "BADGE_BG_COLOR": "#0F1F0F"    // Badge background color
     },
-    "comfy_base": {                 // ComfyUI interface colors
-      "fg-color": "#fff",           // Primary text color
-      "bg-color": "#202020",        // Main background color
-      "comfy-menu-bg": "#353535",   // Menu background color
-      "comfy-input-bg": "#222",     // Input field background
-      "input-text": "#ddd",         // Input text color
-      "border-color": "#4e4e4e"     // Border color
-      // (other ComfyUI base properties)
+    "comfy_base": {                  // ComfyUI base interface configuration
+      "fg-color": "#fff",            // Foreground color
+      "bg-color": "#202020",         // Background color
+      "comfy-menu-bg": "#353535",    // Menu background color
+      "comfy-menu-secondary-bg": "#303030", // Secondary menu background color
+      "comfy-input-bg": "#222",      // Input field background color
+      "input-text": "#ddd",          // Input text color
+      "descrip-text": "#999",        // Description text color
+      "drag-text": "#ccc",           // Drag text color
+      "error-text": "#ff4444",       // Error text color
+      "border-color": "#4e4e4e",     // Border color
+      "tr-even-bg-color": "#222",    // Table even row background color
+      "tr-odd-bg-color": "#353535",  // Table odd row background color
+      "content-bg": "#4e4e4e",       // Content area background color
+      "content-fg": "#fff",          // Content area foreground color
+      "content-hover-bg": "#222",    // Content area hover background color
+      "content-hover-fg": "#fff",    // Content area hover foreground color
+      "bar-shadow": "rgba(16, 16, 16, 0.5) 0 0 0.5rem" // Bar shadow effect
     }
   }
 }
 ```
 
-## Background Image
+## Canvas
 
-ComfyUI allows you to set a custom background image for your canvas, providing a more personalized workspace.
+### Background Image
 
-### Requirements
+- **Requirements**: ComfyUI frontend version 1.20.5 or newer
+- **Function**: Set a custom background image for the canvas to provide a more personalized workspace. You can upload images or use web images to set the background for the canvas.
 
-- ComfyUI frontend version 1.20.5 or newer
+![Set Background Image](/images/interface/setting/appearance/set-as-bg.jpg)
+
+## Node
+
+### Node Opacity
+
+- **Function**: Set the opacity of nodes, where 0 represents completely transparent and 1 represents completely opaque.
 
-### Setting a Background Image via Settings
+![Node Opacity](/images/interface/setting/appearance/node-opacity.jpg)
 
-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
+## Node Widget
 
-### Setting a Background Image from Generated Results
+### Textarea Widget Font Size
 
-You can also quickly set a generated image as the background:
+- **Range**: 8 - 24
+- **Function**: Set the font size in textarea widgets. Adjusts the text display size in text input boxes to improve readability.
 
-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
+![Textarea Widget Font Size](/images/interface/setting/appearance/textarea-font-size.jpg)
 
-This is a convenient way to use your own creations as a background for further work.
+## Sidebar
+
+### Unified Sidebar Width
+
+- **Function**: When enabled, the sidebar width will be unified to a consistent width when switching between different sidebars. If disabled, different sidebars can maintain their custom widths when switching.
+
+### Sidebar Size
+
+- **Function**: Control the size of the sidebar, can be set to normal or small.
+
+### Sidebar Location
+
+- **Function**: Control whether the sidebar is displayed on the left or right side of the interface, allowing users to adjust the sidebar position according to their usage habits.
+
+## Tree Explorer
+
+### Tree Explorer Item Padding
+
+- **Function**: Set the padding of items in the tree explorer (sidebar panel), adjusting the spacing between items in the tree structure.
+
+![Tree Explorer Item Padding](/images/interface/setting/appearance/padding.jpg)
 
 ## Advanced Customization with user.css
 
@@ -132,11 +176,13 @@ For cases where the color palette doesn't provide enough control, you can use cu
 
 <UserDirectory/>
 
-### CSS Specificity Note
+After finding the above folder location, please copy the corresponding CSS file to the corresponding user directory, such as the default user folder being `ComfyUI/user/default`, then restart ComfyUI or refresh the page to apply changes.
+
+### user.css Examples and Related Instructions
 
-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.
+The `user.css` file is loaded early in the application startup process. So you may need to use `!important` in your CSS rules to ensure they override the default styles.
 
-### Example user.css Customizations
+**user.css Customization Examples**
 
 ```css
 /* Increase font size in inputs and menus for better readability */
@@ -158,14 +204,14 @@ The user.css file is loaded early in the application startup process. Because of
 }
 ```
 
-## Best Practices
+**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
+**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+

interface/credits.mdx

@@ -1,7 +1,7 @@
 ---
 title: "Credits Management"
 description: "In this article, we will introduce ComfyUI's credit management features, including how to obtain, use, and view credits."
-sidebarTitle: "Credits Management"
+sidebarTitle: "Credits"
 icon: "coins"
 ---
 
@@ -52,6 +52,7 @@ On the payment page, please follow these steps:
 3. Choose your payment method
   - Credit Card
   - WeChat (only supported when paying in USD)
+  - Alipay (only supported when paying in USD)
 4. Click the `Pay` button or the `Generate QR Code` button to complete the payment process
 </Step>
 
@@ -83,4 +84,8 @@ After completing the payment, please return to `Menu` -> `Credits` to check if y
   <Accordion title="How do I know how many credits I've consumed each time?">
   Due to different image sizes and generation quantities, the `Tokens` and `Credits` consumed each time vary. In `Settings` -> `Credits`, you can see the credits consumed each time and the corresponding credit history
   </Accordion>
+
+  <Accordion title="Why don't I see WeChat or Alipay payment options?">
+  Please ensure you are paying in USD, as WeChat and Alipay are only supported when paying in USD
+  </Accordion>
 </AccordionGroup>