Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-03-04 12:40:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adjust UI theme slightly (#1853)

Browse Source 
* 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
This commit is contained in:
filtered
2024-12-10 10:03:14 +11:00
committed by GitHub
parent 0b91d53c9f
commit c2145b6f45
5 changed files with 48 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/extensions/core/colorPalette.ts
View File

@@ -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)
}
}