fix vue node color change

src/renderer/extensions/vueNodes/components/LGraphNode.vue

@@ -34,7 +34,8 @@
     :style="[
       {
         transform: `translate(${position.x ?? 0}px, ${(position.y ?? 0) - LiteGraph.NODE_TITLE_HEIGHT}px)`,
-        zIndex: zIndex
+        zIndex: zIndex,
+        backgroundColor: nodeData.bgcolor || ''
       },
       dragStyle
     ]"
@@ -49,7 +50,13 @@
       </template>
       <!-- Header only updates on title/color changes -->
       <NodeHeader
-        v-memo="[nodeData.title, isCollapsed, nodeData.flags?.pinned]"
+        v-memo="[
+          nodeData.title,
+          nodeData.color,
+          nodeData.bgcolor,
+          isCollapsed,
+          nodeData.flags?.pinned
+        ]"
         :node-data="nodeData"
         :readonly="readonly"
         :collapsed="isCollapsed"

src/renderer/extensions/vueNodes/components/NodeHeader.vue

@@ -73,6 +73,8 @@ import { useErrorHandling } from '@/composables/useErrorHandling'
 import { st } from '@/i18n'
 import { useNodeTooltips } from '@/renderer/extensions/vueNodes/composables/useNodeTooltips'
 import { app } from '@/scripts/app'
+import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
+import { adjustColor } from '@/utils/colorUtil'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 import {
   getLocatorIdFromNodeData,
@@ -123,6 +125,30 @@ const tooltipConfig = computed(() => {
   return createTooltipConfig(description)
 })
 
+// Header style that replicates LiteGraph's ColorOption and drawNode logic
+const headerStyle = computed(() => {
+  if (!nodeData?.color) {
+    return { backgroundColor: '' } // Explicitly clear background color
+  }
+
+  const colorPaletteStore = useColorPaletteStore()
+  let headerColor = nodeData.color
+
+  // Apply base header darkening to replicate LiteGraph's ColorOption system
+  // When header and body colors are the same/similar, darken the header
+  if (nodeData.bgcolor && nodeData.color === nodeData.bgcolor) {
+    // Darken header relative to body (opposite of light theme adjustment)
+    headerColor = adjustColor(nodeData.color, { lightness: -0.15 })
+  }
+
+  // Apply light theme lightening on top of base darkening (same as drawNode monkey patch)
+  if (colorPaletteStore.completedActivePalette.light_theme) {
+    headerColor = adjustColor(headerColor, { lightness: 0.5 })
+  }
+
+  return { backgroundColor: headerColor }
+})
+
 const resolveTitle = (info: VueNodeData | undefined) => {
   const title = (info?.title ?? '').trim()
   if (title.length > 0) return title