Customizing ComfyUI Appearance

The settings described on this page are located in the ComfyUI in-app settings menu. You can open it by navigating to Settings (gear icon) or using the Ctrl + , keyboard shortcut, then select the corresponding category to view and configure these options.

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 ComfyUI themes
Export the currently selected theme as JSON format
Load custom theme configuration from JSON file
Delete custom theme configuration

For appearance needs that cannot be satisfied by the color palette, you can perform advanced appearance customization through the user.css file

How to Customize Color Themes

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:

The JSON comments below are for illustration only. Do not copy the content below for modification as it will cause the theme to malfunction.
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.

{
  "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 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": {             // 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 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
    }
  }
}

Canvas

Background Image

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.

Node

Node Opacity

Function: Set the opacity of nodes, where 0 represents completely transparent and 1 represents completely opaque.

Range: 8 - 24
Function: Set the font size in textarea widgets. Adjusts the text display size in text input boxes to improve readability.

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.

Function: Control the size of the sidebar, can be set to normal or small.

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.

Function: Control the visual style of the sidebar. Options include:
- Connected: The sidebar appears connected to the edge of the interface.
- Floating: The sidebar appears as a floating panel with visual separation from the interface edge.

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.

Requirements

ComfyUI frontend version 1.20.5 or newer

Setting Up user.css

Create a file named user.css in your ComfyUI user directory (same location as your workflows and settings - see location details below)
Add your custom CSS rules to this file
Restart ComfyUI or refresh the page to apply changes

User Directory Location

The ComfyUI user directory is where your personal settings, workflows, and customizations are stored. The location depends on your installation type:

Desktop - Windows
Desktop - macOS
Desktop - Linux
Manual Install
Portable

C:\Users\<your username>\AppData\Roaming\ComfyUI\user

~/<ComfyUI installation path>/ComfyUI/user

~/.config/ComfyUI/user

The user directory is located in your ComfyUI installation folder:

<ComfyUI installation path>/user

For example, if you cloned ComfyUI to C:\ComfyUI, your user directory would be C:\ComfyUI\user\default (or C:\ComfyUI\user\john if you’ve set up a custom username).

ComfyUI supports multiple users per installation. If you haven’t configured a custom username, it defaults to “default”. Each user gets their own subdirectory within the user folder.

The user directory is located in your ComfyUI portable folder:

<ComfyUI_windows_portable>/ComfyUI/user

For example: ComfyUI_windows_portable/ComfyUI/user/default

ComfyUI supports multiple users per installation. If you haven’t configured a custom username, it defaults to “default”. Each user gets their own subdirectory within the user folder.

This location contains your workflows, settings, and other user-specific files. 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. 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. user.css Customization Examples

/* 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

Start with the color palette for most customizations
Use user.css only when necessary for elements not covered by the color palette
Export your theme before making significant changes so you can revert if needed
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

Customizing ComfyUI Appearance

Color Palette System

How to Customize Color Themes

Canvas

Background Image

Node

Node Opacity

Node Widget

Textarea Widget Font Size

Sidebar

Unified Sidebar Width

Sidebar Size

Sidebar Location

Sidebar Style

Tree Explorer

Tree Explorer Item Padding

Advanced Customization with user.css

Requirements

Setting Up user.css

User Directory Location

​Color Palette System

​How to Customize Color Themes

​Canvas

​Background Image

​Node

​Node Opacity

​Node Widget

​Textarea Widget Font Size

​Sidebar

​Unified Sidebar Width

​Sidebar Size

​Sidebar Location

​Sidebar Style

​Tree Explorer

​Tree Explorer Item Padding

​Advanced Customization with user.css

​Requirements

​Setting Up user.css

​User Directory Location

​user.css Examples and Related Instructions

Color Palette System

How to Customize Color Themes

Canvas

Background Image

Node

Node Opacity

Node Widget

Textarea Widget Font Size

Sidebar

Unified Sidebar Width

Sidebar Size

Sidebar Location

Sidebar Style

Tree Explorer

Tree Explorer Item Padding

Advanced Customization with user.css

Requirements

Setting Up user.css

User Directory Location

user.css Examples and Related Instructions