Personalizar la apariencia de ComfyUI

{
  "id": "dark",                     // Debe ser único, no puede coincidir con el ID de otro tema
  "name": "Dark (Default)",         // Nombre del tema, se muestra en el selector de temas
  "colors": {
    "node_slot": {                  // Configuración de color de las ranuras de conexión de los nodos
      "CLIP": "#FFD500",            // Color de la ranura de conexión del modelo CLIP
      "CLIP_VISION": "#A8DADC",     // Color de la ranura de conexión del modelo CLIP Vision
      "CLIP_VISION_OUTPUT": "#ad7452", // Color de la ranura de conexión de la salida de CLIP Vision
      "CONDITIONING": "#FFA931",     // Color de la ranura de conexión del control de conditioning
      "CONTROL_NET": "#6EE7B7",     // Color de la ranura de conexión del modelo ControlNet
      "IMAGE": "#64B5F6",           // Color de la ranura de conexión de datos de imagen
      "LATENT": "#FF9CF9",          // Color de la ranura de conexión del espacio latente
      "MASK": "#81C784",            // Color de la ranura de conexión de datos de máscara
      "MODEL": "#B39DDB",           // Color de la ranura de conexión del modelo
      "STYLE_MODEL": "#C2FFAE",     // Color de la ranura de conexión del modelo de estilo
      "VAE": "#FF6E6E",             // Color de la ranura de conexión del modelo VAE
      "NOISE": "#B0B0B0",           // Color de la ranura de conexión de datos de ruido
      "GUIDER": "#66FFFF",          // Color de la ranura de conexión del guiador
      "SAMPLER": "#ECB4B4",         // Color de la ranura de conexión del sampler
      "SIGMAS": "#CDFFCD",          // Color de la ranura de conexión de los sigmas
      "TAESD": "#DCC274"            // Color de la ranura de conexión del modelo TAESD
    },
    "litegraph_base": {             // Configuración base de la interfaz de LiteGraph
      "BACKGROUND_IMAGE": "",        // Imagen de fondo, vacía por defecto
      "CLEAR_BACKGROUND_COLOR": "#222", // Color de fondo del lienzo principal
      "NODE_TITLE_COLOR": "#999",    // Color del texto del título del nodo
      "NODE_SELECTED_TITLE_COLOR": "#FFF", // Color del título del nodo seleccionado
      "NODE_TEXT_SIZE": 14,          // Tamaño del texto del nodo
      "NODE_TEXT_COLOR": "#AAA",     // Color del texto del nodo
      "NODE_TEXT_HIGHLIGHT_COLOR": "#FFF", // Color de resaltado del texto del nodo
      "NODE_SUBTEXT_SIZE": 12,       // Tamaño del subtexto del nodo
      "NODE_DEFAULT_COLOR": "#333",   // Color predeterminado del nodo
      "NODE_DEFAULT_BGCOLOR": "#353535", // Color de fondo predeterminado del nodo
      "NODE_DEFAULT_BOXCOLOR": "#666", // Color de borde predeterminado del nodo
      "NODE_DEFAULT_SHAPE": 2,        // Forma predeterminada del nodo
      "NODE_BOX_OUTLINE_COLOR": "#FFF", // Color del contorno del borde del nodo
      "NODE_BYPASS_BGCOLOR": "#FF00FF", // Color de fondo del nodo en modo bypass
      "NODE_ERROR_COLOUR": "#E00",    // Color del estado de error del nodo
      "DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.5)", // Color de sombra predeterminado
      "DEFAULT_GROUP_FONT": 24,       // Tamaño de fuente predeterminado de los grupos
      "WIDGET_BGCOLOR": "#222",       // Color de fondo del widget
      "WIDGET_OUTLINE_COLOR": "#666", // Color del contorno del widget
      "WIDGET_TEXT_COLOR": "#DDD",    // Color del texto del widget
      "WIDGET_SECONDARY_TEXT_COLOR": "#999", // Color del texto secundario del widget
      "WIDGET_DISABLED_TEXT_COLOR": "#666", // Color del texto del widget deshabilitado
      "LINK_COLOR": "#9A9",          // Color de la línea de conexión
      "EVENT_LINK_COLOR": "#A86",    // Color de la línea de conexión de eventos
      "CONNECTING_LINK_COLOR": "#AFA", // Color de la línea en curso
      "BADGE_FG_COLOR": "#FFF",      // Color de primer plano de la insignia
      "BADGE_BG_COLOR": "#0F1F0F"    // Color de fondo de la insignia
    },
    "comfy_base": {                  // Configuración base de la interfaz de ComfyUI
      "fg-color": "#fff",            // Color de primer plano
      "bg-color": "#202020",         // Color de fondo
      "comfy-menu-bg": "#353535",    // Color de fondo del menú
      "comfy-menu-secondary-bg": "#303030", // Color de fondo del menú secundario
      "comfy-input-bg": "#222",      // Color de fondo del campo de entrada
      "input-text": "#ddd",          // Color del texto de entrada
      "descrip-text": "#999",        // Color del texto de descripción
      "drag-text": "#ccc",           // Color del texto de arrastre
      "error-text": "#ff4444",       // Color del texto de error
      "border-color": "#4e4e4e",     // Color del borde
      "tr-even-bg-color": "#222",    // Color de fondo de las filas pares de la tabla
      "tr-odd-bg-color": "#353535",  // Color de fondo de las filas impares de la tabla
      "content-bg": "#4e4e4e",       // Color de fondo del área de contenido
      "content-fg": "#fff",          // Color de primer plano del área de contenido
      "content-hover-bg": "#222",    // Color de fondo al pasar el cursor por el área de contenido
      "content-hover-fg": "#fff",    // Color de primer plano al pasar el cursor por el área de contenido
      "bar-shadow": "rgba(16, 16, 16, 0.5) 0 0 0.5rem" // Efecto de sombra de la barra
    }
  }
}

/* Aumenta el tamaño de fuente en entradas y menús para mejorar la legibilidad */
.comfy-multiline-input, .litecontextmenu .litemenu-entry {
    font-size: 20px !important;
}

/* Agranda las entradas del menú contextual para seleccionarlas más fácil */
.litegraph .litemenu-entry,
.litemenu-title {
  font-size: 24px !important; 
}

/* Estilo personalizado para elementos concretos que no están en la paleta de colores */
.comfy-menu {
    border: 1px solid rgb(126, 179, 189) !important;
    border-radius: 0px 0px 0px 10px !important;
    backdrop-filter: blur(2px);
}