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:

{
  "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

​
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

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