allow custom bypass color (#993)

* allow custom bypass color

* shove the not-litegraph-color-def into litegraph

* prettier just does this to be funny i swear

src/extensions/core/colorPalette.ts

@@ -42,6 +42,7 @@ const colorPalettes: ColorPalettes = {
         NODE_DEFAULT_BOXCOLOR: '#666',
         NODE_DEFAULT_SHAPE: 'box',
         NODE_BOX_OUTLINE_COLOR: '#FFF',
+        NODE_BYPASS_BGCOLOR: '#FF00FF',
         DEFAULT_SHADOW_COLOR: 'rgba(0,0,0,0.5)',
         DEFAULT_GROUP_FONT: 24,
 
@@ -107,6 +108,7 @@ const colorPalettes: ColorPalettes = {
         NODE_DEFAULT_BOXCOLOR: '#CCC',
         NODE_DEFAULT_SHAPE: 'box',
         NODE_BOX_OUTLINE_COLOR: '#000',
+        NODE_BYPASS_BGCOLOR: '#FF00FF',
         DEFAULT_SHADOW_COLOR: 'rgba(0,0,0,0.1)',
         DEFAULT_GROUP_FONT: 24,
 
@@ -170,6 +172,7 @@ const colorPalettes: ColorPalettes = {
         NODE_DEFAULT_BOXCOLOR: '#839496', // Base0
         NODE_DEFAULT_SHAPE: 'box',
         NODE_BOX_OUTLINE_COLOR: '#fdf6e3', // Base3
+        NODE_BYPASS_BGCOLOR: '#FF00FF',
         DEFAULT_SHADOW_COLOR: 'rgba(0,0,0,0.5)',
         DEFAULT_GROUP_FONT: 24,
 
@@ -246,6 +249,7 @@ const colorPalettes: ColorPalettes = {
         NODE_DEFAULT_BOXCOLOR: '#6e7581',
         NODE_DEFAULT_SHAPE: 'box',
         NODE_BOX_OUTLINE_COLOR: '#FFF',
+        NODE_BYPASS_BGCOLOR: '#FF00FF',
         DEFAULT_SHADOW_COLOR: 'rgba(0,0,0,0.5)',
         DEFAULT_GROUP_FONT: 22,
         WIDGET_BGCOLOR: '#2b2f38',
@@ -320,6 +324,7 @@ const colorPalettes: ColorPalettes = {
         NODE_DEFAULT_BOXCOLOR: '#545d70',
         NODE_DEFAULT_SHAPE: 'box',
         NODE_BOX_OUTLINE_COLOR: '#e5eaf0',
+        NODE_BYPASS_BGCOLOR: '#FF00FF',
         DEFAULT_SHADOW_COLOR: 'rgba(0,0,0,0.5)',
         DEFAULT_GROUP_FONT: 24,
         WIDGET_BGCOLOR: '#2e3440',
@@ -394,6 +399,7 @@ const colorPalettes: ColorPalettes = {
         NODE_DEFAULT_BOXCOLOR: '#30363d',
         NODE_DEFAULT_SHAPE: 'box',
         NODE_BOX_OUTLINE_COLOR: '#e5eaf0',
+        NODE_BYPASS_BGCOLOR: '#FF00FF',
         DEFAULT_SHADOW_COLOR: 'rgba(0,0,0,0.5)',
         DEFAULT_GROUP_FONT: 24,
         WIDGET_BGCOLOR: '#161b22',
@@ -696,6 +702,11 @@ app.registerExtension({
             )
           }
         }
+        // Sets special case colors
+        if (colorPalette.colors.litegraph_base.NODE_BYPASS_BGCOLOR) {
+          app.bypassBgColor =
+            colorPalette.colors.litegraph_base.NODE_BYPASS_BGCOLOR
+        }
         app.canvas.draw(true, true)
       }
     }

src/scripts/app.ts

@@ -135,6 +135,7 @@ export class ComfyApp {
   bodyBottom: HTMLElement
   canvasContainer: HTMLElement
   menu: ComfyAppMenu
+  bypassBgColor: string
 
   // @deprecated
   // Use useExecutionStore().executingNodeId instead
@@ -155,6 +156,7 @@ export class ComfyApp {
       parent: document.body
     })
     this.menu = new ComfyAppMenu(this)
+    this.bypassBgColor = '#FF00FF'
 
     /**
      * List of extensions that are registered with the app
@@ -1566,7 +1568,7 @@ export class ComfyApp {
       // @ts-expect-error
       if (node.mode === 4) {
         // never
-        bgColor = '#FF00FF'
+        bgColor = app.bypassBgColor
         this.editor_alpha = 0.2
       } else {
         bgColor = old_bgcolor || LiteGraph.NODE_DEFAULT_BGCOLOR

src/types/colorPalette.ts

@@ -44,6 +44,7 @@ const litegraphBaseSchema = z
     NODE_DEFAULT_BOXCOLOR: z.string(),
     NODE_DEFAULT_SHAPE: z.string(),
     NODE_BOX_OUTLINE_COLOR: z.string(),
+    NODE_BYPASS_BGCOLOR: z.string(),
     DEFAULT_SHADOW_COLOR: z.string(),
     DEFAULT_GROUP_FONT: z.number(),
     WIDGET_BGCOLOR: z.string(),