Adjust UI theme slightly (#1853)

* Format CSS - prettier

* Cast Minor Shadows

Adds faint shadows to the top and side bars

* Darken the sidebar slightly

* Add theme config for bar shadows

* Fix menu item alignment and spacing

* [Refactor] Prefer canvas setDirty over draw

- nits
- types

src/assets/css/style.css

@@ -9,6 +9,7 @@
   --fg-color: #000;
   --bg-color: #fff;
   --comfy-menu-bg: #353535;
+  --comfy-menu-secondary-bg: #292929;
   --comfy-input-bg: #222;
   --input-text: #ddd;
   --descrip-text: #999;
@@ -179,8 +180,8 @@ body {
 }
 
 .comfy-modal select,
-.comfy-modal input[type=button],
-.comfy-modal input[type=checkbox] {
+.comfy-modal input[type='button'],
+.comfy-modal input[type='checkbox'] {
   margin: 3px 3px 3px 4px;
 }
 
@@ -294,8 +295,8 @@ span.drag-handle {
   padding: 3px 4px;
   cursor: move;
   vertical-align: middle;
-  margin-top: -.4em;
-  margin-left: -.2em;
+  margin-top: -0.4em;
+  margin-left: -0.2em;
   font-size: 12px;
   font-family: sans-serif;
   letter-spacing: 2px;
@@ -362,11 +363,11 @@ button.comfy-queue-btn {
   z-index: 99;
 }
 
-.comfy-modal.comfy-settings input[type="range"] {
+.comfy-modal.comfy-settings input[type='range'] {
   vertical-align: middle;
 }
 
-.comfy-modal.comfy-settings input[type="range"] + input[type="number"] {
+.comfy-modal.comfy-settings input[type='range'] + input[type='number'] {
   width: 3.5em;
 }
 
@@ -397,7 +398,7 @@ button.comfy-queue-btn {
   .comfy-menu span.drag-handle {
     display: none;
   }
-  
+
   .comfy-menu-queue-size {
     flex: unset;
   }
@@ -431,7 +432,9 @@ button.comfy-queue-btn {
   padding-right: 8px;
 }
 
-.graphdialog input, .graphdialog textarea, .graphdialog select {
+.graphdialog input,
+.graphdialog textarea,
+.graphdialog select {
   background-color: var(--comfy-input-bg);
   border: 2px solid;
   border-color: var(--border-color);
@@ -493,7 +496,8 @@ dialog::backdrop {
   text-align: right;
 }
 
-#comfy-settings-dialog tbody button, #comfy-settings-dialog table > button {
+#comfy-settings-dialog tbody button,
+#comfy-settings-dialog table > button {
   background-color: var(--bg-color);
   border: 1px var(--border-color) solid;
   border-radius: 0;
@@ -572,7 +576,7 @@ dialog::backdrop {
 }
 
 .litemenu-entry.has_submenu::after {
-  content: ">";
+  content: '>';
   position: absolute;
   top: 0;
   right: 2px;
@@ -586,7 +590,8 @@ dialog::backdrop {
   will-change: transform;
 }
 
-.litegraph.litecontextmenu .litemenu-entry:hover:not(.disabled):not(.separator) {
+.litegraph.litecontextmenu
+  .litemenu-entry:hover:not(.disabled):not(.separator) {
   background-color: var(--comfy-menu-bg) !important;
   filter: brightness(155%);
   will-change: transform;

src/components/sidebar/SideToolbar.vue

@@ -89,8 +89,9 @@ const getTabTooltipSuffix = (tab: SidebarTabExtension) => {
   width: var(--sidebar-width);
   height: 100%;
 
-  background-color: var(--comfy-menu-bg);
+  background-color: var(--comfy-menu-secondary-bg);
   color: var(--fg-color);
+  box-shadow: var(--bar-shadow);
 }
 
 .side-tool-bar-end {

src/components/topbar/TopMenubar.vue

@@ -79,6 +79,7 @@ eventBus.on((event: string, payload: any) => {
   width: 100vw;
   background: var(--comfy-menu-bg);
   color: var(--fg-color);
+  box-shadow: var(--bar-shadow);
   font-family: Arial, Helvetica, sans-serif;
   font-size: 0.8em;
   box-sizing: border-box;
@@ -96,6 +97,10 @@ eventBus.on((event: string, payload: any) => {
   background: var(--p-highlight-background-focus);
 }
 
+:deep(.p-menubar-item-label) {
+  line-height: revert;
+}
+
 .comfyui-logo {
   font-size: 1.2em;
   user-select: none;

src/extensions/core/colorPalette.ts

@@ -65,6 +65,7 @@ const colorPalettes: ColorPalettes = {
         'fg-color': '#fff',
         'bg-color': '#202020',
         'comfy-menu-bg': '#353535',
+        'comfy-menu-secondary-bg': '#303030',
         'comfy-input-bg': '#222',
         'input-text': '#ddd',
         'descrip-text': '#999',
@@ -76,7 +77,8 @@ const colorPalettes: ColorPalettes = {
         'content-bg': '#4e4e4e',
         'content-fg': '#fff',
         'content-hover-bg': '#222',
-        'content-hover-fg': '#fff'
+        'content-hover-fg': '#fff',
+        'bar-shadow': 'rgba(16, 16, 16, 0.5) 0 0 0.5rem'
       }
     }
   },
@@ -132,6 +134,7 @@ const colorPalettes: ColorPalettes = {
         'fg-color': '#222',
         'bg-color': '#DDD',
         'comfy-menu-bg': '#F5F5F5',
+        'comfy-menu-secondary-bg': '#D9D9D9',
         'comfy-input-bg': '#C9C9C9',
         'input-text': '#222',
         'descrip-text': '#444',
@@ -143,7 +146,8 @@ const colorPalettes: ColorPalettes = {
         'content-bg': '#e0e0e0',
         'content-fg': '#222',
         'content-hover-bg': '#adadad',
-        'content-hover-fg': '#222'
+        'content-hover-fg': '#222',
+        'bar-shadow': 'rgba(16, 16, 16, 0.25) 0 0 0.5rem'
       }
     }
   },
@@ -194,6 +198,7 @@ const colorPalettes: ColorPalettes = {
         'fg-color': '#fdf6e3', // Base3
         'bg-color': '#002b36', // Base03
         'comfy-menu-bg': '#073642', // Base02
+        'comfy-menu-secondary-bg': '#06323D',
         'comfy-input-bg': '#002b36', // Base03
         'input-text': '#93a1a1', // Base1
         'descrip-text': '#586e75', // Base01
@@ -205,7 +210,8 @@ const colorPalettes: ColorPalettes = {
         'content-bg': '#657b83',
         'content-fg': '#fdf6e3',
         'content-hover-bg': '#002b36',
-        'content-hover-fg': '#fdf6e3'
+        'content-hover-fg': '#fdf6e3',
+        'bar-shadow': 'rgba(16, 16, 16, 0.5) 0 0 0.5rem'
       }
     }
   },
@@ -270,6 +276,7 @@ const colorPalettes: ColorPalettes = {
         'fg-color': '#fff',
         'bg-color': '#2b2f38',
         'comfy-menu-bg': '#242730',
+        'comfy-menu-secondary-bg': '#22252E',
         'comfy-input-bg': '#2b2f38',
         'input-text': '#ddd',
         'descrip-text': '#b2b7bd',
@@ -281,7 +288,8 @@ const colorPalettes: ColorPalettes = {
         'content-bg': '#6e7581',
         'content-fg': '#fff',
         'content-hover-bg': '#2b2f38',
-        'content-hover-fg': '#fff'
+        'content-hover-fg': '#fff',
+        'bar-shadow': 'rgba(8, 8, 8, 0.75) 0 0 0.5rem'
       }
     }
   },
@@ -346,6 +354,7 @@ const colorPalettes: ColorPalettes = {
         'fg-color': '#e5eaf0',
         'bg-color': '#2e3440',
         'comfy-menu-bg': '#161b22',
+        'comfy-menu-secondary-bg': '#14181F',
         'comfy-input-bg': '#2e3440',
         'input-text': '#bcc2c8',
         'descrip-text': '#999',
@@ -357,7 +366,8 @@ const colorPalettes: ColorPalettes = {
         'content-bg': '#545d70',
         'content-fg': '#e5eaf0',
         'content-hover-bg': '#2e3440',
-        'content-hover-fg': '#e5eaf0'
+        'content-hover-fg': '#e5eaf0',
+        'bar-shadow': 'rgba(0, 0, 0, 0.75) 0 0 0.5rem'
       }
     }
   },
@@ -422,6 +432,7 @@ const colorPalettes: ColorPalettes = {
         'fg-color': '#e5eaf0',
         'bg-color': '#161b22',
         'comfy-menu-bg': '#13171d',
+        'comfy-menu-secondary-bg': '#11141A',
         'comfy-input-bg': '#161b22',
         'input-text': '#bcc2c8',
         'descrip-text': '#999',
@@ -433,7 +444,8 @@ const colorPalettes: ColorPalettes = {
         'content-bg': '#30363d',
         'content-fg': '#e5eaf0',
         'content-hover-bg': '#161b22',
-        'content-hover-fg': '#e5eaf0'
+        'content-hover-fg': '#e5eaf0',
+        'bar-shadow': 'rgba(0, 0, 0, 1) 0 0 0.5rem'
       }
     }
   }
@@ -570,7 +582,7 @@ app.registerExtension({
     }
 
     const getColorPaletteTemplate = async () => {
-      let colorPalette = {
+      const colorPalette: Palette = {
         id: 'my_color_palette_unique_id',
         name: 'My Color Palette',
         colors: {
@@ -583,14 +595,10 @@ app.registerExtension({
       // Copy over missing keys from default color palette
       const defaultColorPalette = colorPalettes[defaultColorPaletteId]
       for (const key in defaultColorPalette.colors.litegraph_base) {
-        if (!colorPalette.colors.litegraph_base[key]) {
-          colorPalette.colors.litegraph_base[key] = ''
-        }
+        colorPalette.colors.litegraph_base[key] ||= ''
       }
       for (const key in defaultColorPalette.colors.comfy_base) {
-        if (!colorPalette.colors.comfy_base[key]) {
-          colorPalette.colors.comfy_base[key] = ''
-        }
+        colorPalette.colors.comfy_base[key] ||= ''
       }
 
       return completeColorPalette(colorPalette)
@@ -716,7 +724,7 @@ app.registerExtension({
           app.bypassBgColor =
             colorPalette.colors.litegraph_base.NODE_BYPASS_BGCOLOR
         }
-        app.canvas.draw(true, true)
+        app.canvas.setDirty(true, true)
       }
     }
 

src/types/colorPalette.ts

@@ -65,6 +65,7 @@ const comfyBaseSchema = z.object({
   ['bg-color']: z.string(),
   ['bg-img']: z.string().optional(),
   ['comfy-menu-bg']: z.string(),
+  ['comfy-menu-secondary-bg']: z.string().optional(),
   ['comfy-input-bg']: z.string(),
   ['input-text']: z.string(),
   ['descrip-text']: z.string(),
@@ -76,7 +77,8 @@ const comfyBaseSchema = z.object({
   ['content-bg']: z.string(),
   ['content-fg']: z.string(),
   ['content-hover-bg']: z.string(),
-  ['content-hover-fg']: z.string()
+  ['content-hover-fg']: z.string(),
+  ['bar-shadow']: z.string()
 })
 
 const colorsSchema = z