Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-04-29 18:52:19 +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

27
src/assets/css/style.css
View File

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

3
src/components/sidebar/SideToolbar.vue
View File

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

5
src/components/topbar/TopMenubar.vue
View File

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

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

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

4
src/types/colorPalette.ts
View File

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