Style: Fix slot colors to pull values from the theme (#6688)

## Summary

Pull colors for the slots from the Theme.

## Screenshots

| Before | After |
| ------ | ----- |
| <img width="798" height="383" alt="image"
src="https://github.com/user-attachments/assets/6c9cad2c-87db-41e2-92b9-d5d14f60d55c"
/> | <img width="964" height="407" alt="image"
src="https://github.com/user-attachments/assets/932d6e61-2eb3-462b-9b64-f0d4ce1804db"
/> |

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6688-Style-Fix-slot-colors-to-pull-values-from-the-theme-2ab6d73d3650818d9a73ecc9ab26d0e8)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>

src/constants/slotColors.ts

@@ -1,30 +1,5 @@
-/**
- * Default colors for node slot types
- * Mirrors LiteGraph's slot_default_color_by_type
- */
-const SLOT_TYPE_COLORS: Record<string, string> = {
-  number: '#AAD',
-  string: '#DCA',
-  boolean: '#DAA',
-  vec2: '#ADA',
-  vec3: '#ADA',
-  vec4: '#ADA',
-  color: '#DDA',
-  image: '#353',
-  latent: '#858',
-  conditioning: '#FFA',
-  control_net: '#F8F',
-  clip: '#FFD',
-  vae: '#F82',
-  model: '#B98',
-  '*': '#AAA' // Default color
-}
-
-/**
- * Get the color for a slot type
- */
 export function getSlotColor(type?: string | number | null): string {
-  if (!type) return SLOT_TYPE_COLORS['*']
-  const typeStr = String(type).toLowerCase()
-  return SLOT_TYPE_COLORS[typeStr] || SLOT_TYPE_COLORS['*']
+  if (!type) return '#AAA'
+  const typeStr = String(type).toUpperCase()
+  return `var(--color-datatype-${typeStr})`
 }

src/services/colorPaletteService.ts

@@ -97,6 +97,26 @@ export const useColorPaletteService = () => {
     )
   }
 
+  function loadLinkColorPaletteForVueNodes(
+    linkColorPalette: Colors['node_slot']
+  ) {
+    if (!linkColorPalette) return
+    const rootStyle = document.getElementById('vue-app')?.style
+    if (!rootStyle) return
+
+    for (const dataType of nodeDefStore.nodeDataTypes) {
+      const cssVar = `color-datatype-${dataType}`
+
+      const valueMaybe =
+        linkColorPalette[dataType as unknown as keyof Colors['node_slot']]
+      if (valueMaybe) {
+        rootStyle.setProperty(`--${cssVar}`, valueMaybe)
+      } else {
+        rootStyle.removeProperty(`--${cssVar}`)
+      }
+    }
+  }
+
   function loadLitegraphForVueNodes(
     palette: Colors['litegraph_base'],
     colorPaletteId: string
@@ -229,6 +249,7 @@ export const useColorPaletteService = () => {
       completedPalette.colors.litegraph_base,
       colorPaletteId
     )
+    loadLinkColorPaletteForVueNodes(completedPalette.colors.node_slot)
     loadComfyColorPalette(completedPalette.colors.comfy_base)
     app.canvas.setDirty(true, true)