[Theme] Loosen color palette schema (#2053)

browser_tests/colorPalette.spec.ts

@@ -131,11 +131,8 @@ const customColorPalettes = {
 }
 
 test.describe('Color Palette', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.setSetting('Comfy.CustomColorPalettes', customColorPalettes)
-  })
-
   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()
     await expect(comfyPage.canvas).toHaveScreenshot(
@@ -145,6 +142,19 @@ test.describe('Color Palette', () => {
     await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot('default-color-palette.png')
   })
+
+  test('Can add custom color palette', async ({ comfyPage }) => {
+    await comfyPage.page.evaluate((p) => {
+      window['app'].extensionManager.colorPalette.addCustomColorPalette(p)
+    }, customColorPalettes.obsidian_dark)
+    expect(await comfyPage.getToastErrorCount()).toBe(0)
+
+    await comfyPage.setSetting('Comfy.ColorPalette', 'custom_obsidian_dark')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'custom-color-palette-obsidian-dark.png'
+    )
+  })
 })
 
 test.describe('Node Color Adjustments', () => {

src/stores/workspaceStore.ts

@@ -7,6 +7,7 @@ import { useCommandStore } from './commandStore'
 import { useSidebarTabStore } from './workspace/sidebarTabStore'
 import { useSettingStore } from './settingStore'
 import { useWorkflowStore } from './workflowStore'
+import { useColorPaletteService } from '@/services/colorPaletteService'
 
 export const useWorkspaceStore = defineStore('workspace', () => {
   const spinner = ref(false)
@@ -30,6 +31,7 @@ export const useWorkspaceStore = defineStore('workspace', () => {
     set: useSettingStore().set
   }))
   const workflow = computed(() => useWorkflowStore())
+  const colorPalette = useColorPaletteService()
 
   /**
    * Registers a sidebar tab.
@@ -71,6 +73,7 @@ export const useWorkspaceStore = defineStore('workspace', () => {
     sidebarTab,
     setting,
     workflow,
+    colorPalette,
 
     registerSidebarTab,
     unregisterSidebarTab,

src/types/colorPaletteTypes.ts

@@ -34,7 +34,9 @@ const litegraphBaseSchema = z.object({
   NODE_DEFAULT_SHAPE: z.union([
     z.literal(LiteGraph.BOX_SHAPE),
     z.literal(LiteGraph.ROUND_SHAPE),
-    z.literal(LiteGraph.CARD_SHAPE)
+    z.literal(LiteGraph.CARD_SHAPE),
+    // Legacy palettes have string field for NODE_DEFAULT_SHAPE.
+    z.string()
   ]),
   NODE_BOX_OUTLINE_COLOR: z.string(),
   NODE_BYPASS_BGCOLOR: z.string(),
@@ -85,17 +87,22 @@ const partialColorsSchema = z.object({
   comfy_base: comfyBaseSchema.partial()
 })
 
-export const paletteSchema = z.object({
-  id: z.string(),
-  name: z.string(),
-  colors: partialColorsSchema
-})
+// Palette in the wild can have custom metadata fields such as 'version'.
+export const paletteSchema = z
+  .object({
+    id: z.string(),
+    name: z.string(),
+    colors: partialColorsSchema
+  })
+  .passthrough()
 
-export const completedPaletteSchema = z.object({
-  id: z.string(),
-  name: z.string(),
-  colors: colorsSchema
-})
+export const completedPaletteSchema = z
+  .object({
+    id: z.string(),
+    name: z.string(),
+    colors: colorsSchema
+  })
+  .passthrough()
 
 export const colorPalettesSchema = z.record(paletteSchema)