Fix custom_ prefix

browser_tests/colorPalette.spec.ts

@@ -134,8 +134,11 @@ const customColorPalettes = {
 test.describe('Color Palette', () => {
   test('Can show custom color palette', async ({ comfyPage }) => {
     await comfyPage.setSetting('Comfy.CustomColorPalettes', customColorPalettes)
-    await comfyPage.setSetting('Comfy.ColorPalette', 'custom_obsidian_dark')
-    await comfyPage.nextFrame()
+    // Reload to apply the new setting. Setting Comfy.CustomColorPalettes directly
+    // doesn't update the store immediately.
+    await comfyPage.reload()
+
+    await comfyPage.setSetting('Comfy.ColorPalette', 'obsidian_dark')
     await expect(comfyPage.canvas).toHaveScreenshot(
       'custom-color-palette-obsidian-dark.png'
     )
@@ -150,6 +153,12 @@ test.describe('Color Palette', () => {
     }, customColorPalettes.obsidian_dark)
     expect(await comfyPage.getToastErrorCount()).toBe(0)
 
+    await comfyPage.setSetting('Comfy.ColorPalette', 'obsidian_dark')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'custom-color-palette-obsidian-dark.png'
+    )
+    // Legacy `custom_` prefix is still supported
     await comfyPage.setSetting('Comfy.ColorPalette', 'custom_obsidian_dark')
     await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot(

src/components/dialog/content/setting/ColorPaletteMessage.vue

@@ -44,16 +44,18 @@ import Message from 'primevue/message'
 import Select from 'primevue/select'
 
 import { useColorPaletteService } from '@/services/colorPaletteService'
+import { useSettingStore } from '@/stores/settingStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 
+const settingStore = useSettingStore()
 const colorPaletteStore = useColorPaletteStore()
 const colorPaletteService = useColorPaletteService()
 const { palettes, activePaletteId } = storeToRefs(colorPaletteStore)
 
 const importCustomPalette = async () => {
   const palette = await colorPaletteService.importColorPalette()
   if (palette) {
-    colorPaletteStore.activePaletteId = palette.id
+    settingStore.set('Comfy.ColorPalette', palette.id)
   }
 }
 </script>

src/components/graph/GraphCanvas.vue

@@ -225,26 +225,19 @@ watch(
 const colorPaletteService = useColorPaletteService()
 const colorPaletteStore = useColorPaletteStore()
 watch(
-  [() => canvasStore.canvas, () => colorPaletteStore.activePaletteId],
-  ([canvas, activePaletteId]) => {
+  [() => canvasStore.canvas, () => settingStore.get('Comfy.ColorPalette')],
+  ([canvas, currentPaletteId]) => {
     if (!canvas) return
 
-    colorPaletteService.loadColorPalette(activePaletteId)
+    colorPaletteService.loadColorPalette(currentPaletteId)
   }
 )
-// Sync the active palette id with the setting store
 watch(
   () => colorPaletteStore.activePaletteId,
   (newValue) => {
     settingStore.set('Comfy.ColorPalette', newValue)
   }
 )
-watch(
-  () => settingStore.get('Comfy.ColorPalette'),
-  (newValue) => {
-    colorPaletteStore.activePaletteId = newValue
-  }
-)
 
 const workflowStore = useWorkflowStore()
 const persistCurrentWorkflow = () => {

src/constants/coreSettings.ts

@@ -672,7 +672,11 @@ export const CORE_SETTINGS: SettingParams[] = [
     name: 'The active color palette id',
     type: 'hidden',
     defaultValue: 'dark',
-    versionModified: '1.6.7'
+    versionModified: '1.6.7',
+    migrateDeprecatedValue(value: string) {
+      // Legacy custom palettes were prefixed with 'custom_'
+      return value.startsWith('custom_') ? value.replace('custom_', '') : value
+    }
   },
   {
     id: 'Comfy.CustomColorPalettes',

src/services/colorPaletteService.ts

@@ -179,7 +179,7 @@ export const useColorPaletteService = () => {
   return {
     addCustomColorPalette: wrapWithErrorHandling(addCustomColorPalette),
     deleteCustomColorPalette: wrapWithErrorHandling(deleteCustomColorPalette),
-    loadColorPalette: wrapWithErrorHandling(loadColorPalette),
+    loadColorPalette: wrapWithErrorHandlingAsync(loadColorPalette),
     exportColorPalette: wrapWithErrorHandling(exportColorPalette),
     importColorPalette: wrapWithErrorHandlingAsync(importColorPalette)
   }