Add playwright test

Comfy-Org · Jan 4, 2025 · 72bd10a · 72bd10a
1 parent 6b4e036
commit 72bd10a
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 14 deletions.
diff --git a/browser_tests/colorPalette.spec.ts b/browser_tests/colorPalette.spec.ts
@@ -1,8 +1,9 @@
 import { expect } from '@playwright/test'
 
+import type { Palette } from '../src/types/colorPaletteTypes'
 import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
-const customColorPalettes = {
+const customColorPalettes: Record<string, Palette> = {
   obsidian: {
     version: 102,
     id: 'obsidian',
@@ -128,6 +129,19 @@ const customColorPalettes = {
         'tr-odd-bg-color': 'rgba(19,19,19,.9)'
       }
     }
+  },
+  // A custom light theme with fg color red
+  custom_light: {
+    id: 'light_red',
+    name: 'Light Red',
+    light_theme: true,
+    colors: {
+      node_slot: {},
+      litegraph_base: {},
+      comfy_base: {
+        'fg-color': '#ff0000'
+      }
+    }
   }
 }
 
@@ -142,6 +156,12 @@ test.describe('Color Palette', () => {
     await expect(comfyPage.canvas).toHaveScreenshot(
       'custom-color-palette-obsidian-dark.png'
     )
+    await comfyPage.setSetting('Comfy.ColorPalette', 'light_red')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'custom-color-palette-light-red.png'
+    )
+
     await comfyPage.setSetting('Comfy.ColorPalette', 'dark')
     await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot('default-color-palette.png')

diff --git a/src/assets/palettes/light.json b/src/assets/palettes/light.json
@@ -14,7 +14,12 @@
       "MASK": "#9CCC65",
       "MODEL": "#7E57C2",
       "STYLE_MODEL": "#D4E157",
-      "VAE": "#FF7043"
+      "VAE": "#FF7043",
+      "NOISE": "#B0B0B0",
+      "GUIDER": "#66FFFF",
+      "SAMPLER": "#ECB4B4",
+      "SIGMAS": "#CDFFCD",
+      "TAESD": "#DCC274"
     },
     "litegraph_base": {
       "BACKGROUND_IMAGE": "data:image/gif;base64,R0lGODlhZABkALMAAAAAAP///+vr6+rq6ujo6Ofn5+bm5uXl5d3d3f///wAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAAkALAAAAABkAGQAAAT/UMhJq7046827HkcoHkYxjgZhnGG6si5LqnIM0/fL4qwwIMAg0CAsEovBIxKhRDaNy2GUOX0KfVFrssrNdpdaqTeKBX+dZ+jYvEaTf+y4W66mC8PUdrE879f9d2mBeoNLfH+IhYBbhIx2jkiHiomQlGKPl4uZe3CaeZifnnijgkESBqipqqusra6vsLGys62SlZO4t7qbuby7CLa+wqGWxL3Gv3jByMOkjc2lw8vOoNSi0czAncXW3Njdx9Pf48/Z4Kbbx+fQ5evZ4u3k1fKR6cn03vHlp7T9/v8A/8Gbp4+gwXoFryXMB2qgwoMMHyKEqA5fxX322FG8tzBcRnMW/zlulPbRncmQGidKjMjyYsOSKEF2FBlJQMCbOHP6c9iSZs+UnGYCdbnSo1CZI5F64kn0p1KnTH02nSoV3dGTV7FFHVqVq1dtWcMmVQZTbNGu72zqXMuW7danVL+6e4t1bEy6MeueBYLXrNO5Ze36jQtWsOG97wIj1vt3St/DjTEORss4nNq2mDP3e7w4r1bFkSET5hy6s2TRlD2/mSxXtSHQhCunXo26NevCpmvD/UU6tuullzULH76q92zdZG/Ltv1a+W+osI/nRmyc+fRi1Xdbh+68+0vv10dH3+77KD/i6IdnX669/frn5Zsjh4/2PXju8+8bzc9/6fj27LFnX11/+IUnXWl7BJfegm79FyB9JOl3oHgSklefgxAC+FmFGpqHIYcCfkhgfCohSKKJVo044YUMttggiBkmp6KFXw1oII24oYhjiDByaKOOHcp3Y5BD/njikSkO+eBREQAAOw==",

diff --git a/src/constants/coreColorPalettes.ts b/src/constants/coreColorPalettes.ts
@@ -4,7 +4,7 @@ import github from '@/assets/palettes/github.json'
 import light from '@/assets/palettes/light.json'
 import nord from '@/assets/palettes/nord.json'
 import solarized from '@/assets/palettes/solarized.json'
-import type { ColorPalettes } from '@/types/colorPaletteTypes'
+import type { ColorPalettes, CompletedPalette } from '@/types/colorPaletteTypes'
 
 export const CORE_COLOR_PALETTES: ColorPalettes = {
   dark,
@@ -15,4 +15,6 @@ export const CORE_COLOR_PALETTES: ColorPalettes = {
   github
 } as const
 
-export const DEFAULT_COLOR_PALETTE = dark
+export const DEFAULT_COLOR_PALETTE: CompletedPalette = dark
+export const DEFAULT_DARK_COLOR_PALETTE: CompletedPalette = dark
+export const DEFAULT_LIGHT_COLOR_PALETTE: CompletedPalette = light
diff --git a/src/hooks/coreCommandHooks.ts b/src/hooks/coreCommandHooks.ts
@@ -5,9 +5,12 @@ import {
   LiteGraph
 } from '@comfyorg/litegraph'
 
+import {
+  DEFAULT_DARK_COLOR_PALETTE,
+  DEFAULT_LIGHT_COLOR_PALETTE
+} from '@/constants/coreColorPalettes'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
-import { useColorPaletteService } from '@/services/colorPaletteService'
 import { useDialogService } from '@/services/dialogService'
 import { useWorkflowService } from '@/services/workflowService'
 import type { ComfyCommand } from '@/stores/commandStore'
@@ -26,7 +29,6 @@ export function useCoreCommands(): ComfyCommand[] {
   const workflowStore = useWorkflowStore()
   const dialogService = useDialogService()
   const colorPaletteStore = useColorPaletteStore()
-  const colorPaletteService = useColorPaletteService()
   const getTracker = () => workflowStore.activeWorkflow?.changeTracker
 
   const getSelectedNodes = (): LGraphNode[] => {
@@ -414,18 +416,18 @@ export function useCoreCommands(): ComfyCommand[] {
       label: 'Toggle Theme (Dark/Light)',
       versionAdded: '1.3.12',
       function: (() => {
-        let previousDarkTheme: string = 'dark'
-        let previousLightTheme: string = 'light'
+        let previousDarkTheme: string = DEFAULT_DARK_COLOR_PALETTE.id
+        let previousLightTheme: string = DEFAULT_LIGHT_COLOR_PALETTE.id
 
         return () => {
           const settingStore = useSettingStore()
           const theme = colorPaletteStore.completedActivePalette
           if (theme.light_theme) {
             previousLightTheme = theme.id
-            settingStore.set('Comfy.ColorPalette', previousLightTheme)
+            settingStore.set('Comfy.ColorPalette', previousDarkTheme)
           } else {
             previousDarkTheme = theme.id
-            settingStore.set('Comfy.ColorPalette', previousDarkTheme)
+            settingStore.set('Comfy.ColorPalette', previousLightTheme)
           }
         }
       })()

diff --git a/src/stores/workspace/colorPaletteStore.ts b/src/stores/workspace/colorPaletteStore.ts
@@ -3,7 +3,9 @@ import { computed, ref } from 'vue'
 
 import {
   CORE_COLOR_PALETTES,
-  DEFAULT_COLOR_PALETTE
+  DEFAULT_COLOR_PALETTE,
+  DEFAULT_DARK_COLOR_PALETTE,
+  DEFAULT_LIGHT_COLOR_PALETTE
 } from '@/constants/coreColorPalettes'
 import type {
   ColorPalettes,
@@ -63,20 +65,24 @@ export const useColorPaletteStore = defineStore('colorPalette', () => {
         palette.colors.comfy_base['comfy-menu-bg']
     }
 
+    const defaultPalette = palette.light_theme
+      ? DEFAULT_LIGHT_COLOR_PALETTE
+      : DEFAULT_DARK_COLOR_PALETTE
+
     return {
       ...palette,
       colors: {
         ...palette.colors,
         node_slot: {
-          ...DEFAULT_COLOR_PALETTE.colors.node_slot,
+          ...defaultPalette.colors.node_slot,
           ...palette.colors.node_slot
         },
         litegraph_base: {
-          ...DEFAULT_COLOR_PALETTE.colors.litegraph_base,
+          ...defaultPalette.colors.litegraph_base,
           ...palette.colors.litegraph_base
         },
         comfy_base: {
-          ...DEFAULT_COLOR_PALETTE.colors.comfy_base,
+          ...defaultPalette.colors.comfy_base,
           ...palette.colors.comfy_base
         }
       }