ComfyUI Setting Menu Docs

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"
+                    ]
+                  }
                 ]
               },
               {
@@ -508,21 +528,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

@@ -48,62 +48,108 @@ 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
+### How to Customize Color Themes
 
-The color palette allows you to modify many specific properties. Here are some of the most commonly customized elements:
+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:
+
+<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
+ComfyUI allows you to set a custom background image for your canvas, providing a more personalized workspace.
 
-- ComfyUI frontend version 1.20.5 or newer
+- **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.
 
-### Setting a Background Image via Settings
+#### 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
+#### Setting a Background Image from Generated Results
 
 You can also quickly set a generated image as the background:
 
@@ -114,6 +160,39 @@ You can also quickly set a generated image as the background:
 
 This is a convenient way to use your own creations as a background for further work.
 
+## Node
+
+### Node Opacity
+
+- **Function**: Set the opacity of nodes, where 0 represents completely transparent and 1 represents completely opaque.
+
+## Node Widget
+
+### Textarea Widget Font Size
+
+- **Range**: 8 - 24
+- **Function**: Set the font size in textarea widgets. Adjusts the text display size in text input boxes to improve readability.
+
+## 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.
+
 ## 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.
@@ -132,11 +211,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. Because of this, 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 +239,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

@@ -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>

interface/settings/3d.mdx

@@ -0,0 +1,50 @@
+---
+title: "ComfyUI 3D Settings"
+description: "Detailed description of ComfyUI 3D setting options"
+icon: "cube"
+sidebarTitle: "3D"
+---
+
+This section of settings is mainly used to control the initialization settings of 3D-related components in ComfyUI, including camera, lighting, scene, etc. When creating new 3D components, they will be initialized according to these settings. After creation, these settings can still be adjusted individually.
+
+## Camera
+
+### Initial Camera Type
+- **Options**:   
+  - `perspective`  
+  - `orthographic` 
+- **Function**: Controls whether the default camera is perspective or orthographic when creating new 3D components. This default setting can still be switched individually for each component after creation  
+
+## Light
+
+### Light Adjustment Increment
+- **Default Value**: 0.5  
+- **Function**: Controls the step size when adjusting light intensity in 3D scenes. Smaller step values allow for finer light adjustments, while larger values make each adjustment more noticeable  
+
+### Light Intensity Minimum
+- **Default Value**: 1  
+- **Function**: Sets the minimum light intensity value allowed in 3D scenes. This defines the lowest brightness that can be set when adjusting the lighting of any 3D control  
+
+### Light Intensity Maximum
+- **Default Value**: 10  
+- **Function**: Sets the maximum light intensity value allowed in 3D scenes. This defines the upper limit of brightness that can be set when adjusting the lighting of any 3D control  
+
+
+### Initial Light Intensity
+- **Default Value**: 3  
+- **Function**: Sets the default brightness level of lights in 3D scenes. This value determines the intensity with which lights illuminate objects when creating new 3D controls, but each control can be adjusted individually after creation  
+
+
+## Scene
+
+### Initial Background Color    
+- **Function**: Controls the default background color of 3D scenes. This setting determines the background appearance when creating new 3D components, but each component can be adjusted individually after creation  
+- **Default Value**: `282828` (dark gray)  
+
+### Initial Preview Visibility
+- **Function**: Controls whether the preview screen is displayed by default when creating new 3D components. This default setting can still be toggled individually for each component after creation  
+- **Default Value**: true (enabled)  
+
+### Initial Grid Visibility
+- **Function**: Controls whether the grid is displayed by default when creating new 3D components. This default setting can still be toggled individually for each component after creation  
+- **Default Value**: true (enabled)