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