[feat] Add theme-aware colors to minimap (#4598)

Author: christian-byrne

src/composables/useMinimap.ts

@@ -9,6 +9,7 @@ import { app } from '@/scripts/app'
 import { useCanvasStore } from '@/stores/graphStore'
 import { useSettingStore } from '@/stores/settingStore'
 import { useWorkflowStore } from '@/stores/workflowStore'
+import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 
 interface GraphCallbacks {
   onNodeAdded?: (node: LGraphNode) => void
@@ -19,6 +20,7 @@ interface GraphCallbacks {
 export function useMinimap() {
   const settingStore = useSettingStore()
   const canvasStore = useCanvasStore()
+  const colorPaletteStore = useColorPaletteStore()
   const workflowStore = useWorkflowStore()
 
   const containerRef = ref<HTMLDivElement>()
@@ -55,12 +57,18 @@ export function useMinimap() {
 
   const width = 250
   const height = 200
-  const nodeColor = '#0B8CE999'
-  const linkColor = '#F99614'
-  const slotColor = '#F99614'
-  const viewportColor = '#FFF'
-  const backgroundColor = '#15161C'
-  const borderColor = '#333'
+
+  // Theme-aware colors for canvas drawing
+  const isLightTheme = computed(
+    () => colorPaletteStore.completedActivePalette.light_theme
+  )
+  const nodeColor = computed(
+    () => (isLightTheme.value ? '#3DA8E099' : '#0B8CE999') // lighter blue for light theme
+  )
+  const linkColor = computed(
+    () => (isLightTheme.value ? '#FFB347' : '#F99614') // lighter orange for light theme
+  )
+  const slotColor = computed(() => linkColor.value)
 
   const containerRect = ref({
     left: 0,
@@ -113,17 +121,17 @@ export function useMinimap() {
   const containerStyles = computed(() => ({
     width: `${width}px`,
     height: `${height}px`,
-    backgroundColor: backgroundColor,
-    border: `1px solid ${borderColor}`,
+    backgroundColor: isLightTheme.value ? '#FAF9F5' : '#15161C',
+    border: `1px solid ${isLightTheme.value ? '#ccc' : '#333'}`,
     borderRadius: '8px'
   }))
 
   const viewportStyles = computed(() => ({
     transform: `translate(${viewportTransform.value.x}px, ${viewportTransform.value.y}px)`,
     width: `${viewportTransform.value.width}px`,
     height: `${viewportTransform.value.height}px`,
-    border: `2px solid ${viewportColor}`,
-    backgroundColor: `${viewportColor}33`,
+    border: `2px solid ${isLightTheme.value ? '#E0E0E0' : '#FFF'}`,
+    backgroundColor: `#FFF33`,
     willChange: 'transform',
     backfaceVisibility: 'hidden' as const,
     perspective: '1000px',
@@ -206,7 +214,7 @@ export function useMinimap() {
       const h = node.size[1] * scale.value
 
       // Render solid node blocks
-      ctx.fillStyle = nodeColor
+      ctx.fillStyle = nodeColor.value
       ctx.fillRect(x, y, w, h)
     }
   }
@@ -219,7 +227,7 @@ export function useMinimap() {
     const g = graph.value
     if (!g) return
 
-    ctx.strokeStyle = linkColor
+    ctx.strokeStyle = linkColor.value
     ctx.lineWidth = 1.4
 
     const slotRadius = 3.7 * Math.max(scale.value, 0.5) // Larger slots that scale
@@ -268,7 +276,7 @@ export function useMinimap() {
     }
 
     // Render connection slots on top
-    ctx.fillStyle = slotColor
+    ctx.fillStyle = slotColor.value
     for (const conn of connections) {
       // Output slot
       ctx.beginPath()

tests-ui/tests/composables/useMinimap.test.ts

@@ -112,6 +112,14 @@ vi.mock('@/stores/settingStore', () => ({
   useSettingStore: vi.fn(() => defaultSettingStore)
 }))
 
+vi.mock('@/stores/workspace/colorPaletteStore', () => ({
+  useColorPaletteStore: vi.fn(() => ({
+    completedActivePalette: {
+      light_theme: false
+    }
+  }))
+}))
+
 vi.mock('@/scripts/api', () => ({
   api: {
     addEventListener: vi.fn(),
@@ -753,7 +761,7 @@ describe('useMinimap', () => {
   })
 
   describe('container styles', () => {
-    it('should provide correct container styles', () => {
+    it('should provide correct container styles for dark theme', () => {
       const minimap = useMinimap()
       const styles = minimap.containerStyles.value