Nodes 2.0: Color menu only shows bgcolor preview, not color (title color)

[sebastianzehner]

What problem are you experiencing?

In legacy mode, the right-click Colors menu shows both colors — color (title strip) on the left and bgcolor (node body) as background.

In Nodes 2.0, only bgcolor is shown as preview, making it impossible to see the title color in the menu.

Expected: Both colors visible in the menu, consistent with legacy mode.

When does this problem occur?

This problem occurs consistently whenever the right-click context menu Colors submenu is opened on any node while Nodes 2.0 rendering is enabled. It affects all custom color palettes and is reproducible on every workflow.

How often do you encounter this problem?

Multiple times per day

How much does this problem affect your workflow?

Causes moderate inconvenience

Current workarounds

As a workaround, hovering over a color swatch in the menu shows the color name as a tooltip. This allows identifying the color, but requires hovering over each option individually instead of seeing both colors at a glance like in legacy mode.

In legacy mode, both colors are immediately visible without any interaction — color (title strip) on the left side of the swatch, bgcolor (node body) as the swatch background.

Ideas for solutions (Optional)

Display both colors in the swatch, similar to how legacy mode handles it:

Option 1: Split circle — left half shows color (title), right half shows bgcolor (node body).

Option 2: Two separate circles side by side — one for color, one for bgcolor, matching the legacy mode layout where color appears on the left and bgcolor fills the swatch background.

Either option would restore full color information visibility without requiring hover interaction.

Additional context

┆Issue is synchronized with this Notion page by Unito

[dosubot]

Hi @sebastianzehner! I'm Dosu and I’m helping the ComfyUI_frontend team.

Good catch! The root cause is in how Nodes 2.0 builds the color options — it only extracts bgcolor and ignores the color (title strip) property entirely.

In legacy mode, LiteGraph renders swatches using an 8px left border for color and the background for bgcolor [1]. In Nodes 2.0, useNodeCustomization.ts maps only color.bgcolor when building the options:

...Object.entries(LGraphCanvas.node_colors).map(([name, color]) => ({
  name,
  localizedName: t(`color.${name}`),
  value: {
    dark: color.bgcolor,  // Only bgcolor — color is ignored
    light: toLightThemeColor(color.bgcolor)
  }
}))

And ColorPickerMenu.vue renders a simple filled circle from that single value:

<div
  v-if="subOption.color"
  class="size-5 rounded-full border border-border-default"
  :style="{ backgroundColor: subOption.color }"
/>

To fix this, three files would need changes:

1. src/composables/graph/useNodeCustomization.ts — extract both color and bgcolor from LGraphCanvas.node_colors
2. src/composables/graph/useNodeMenuOptions.ts — pass both color values through to the submenu items [2]
3. src/components/graph/selectionToolbox/ColorPickerMenu.vue — render swatches showing both properties (e.g., a split circle or border+fill approach similar to legacy mode)

To reply, just mention @dosu.

---

Share context across your team and agents. Try Dosu.