Skip to content

A11y/style: Make properties panel use theme colors. Not comprehensive. #7036

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
DrJKL merged 3 commits into from
Nov 30, 2025
Merged

A11y/style: Make properties panel use theme colors. Not comprehensive. #7036

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
45eb2ad
A11y/style: Make properties panel use theme colors. Not comprehensive.
DrJKL Nov 29, 2025
27ed2b3
[automated] Update test expectations
invalid-email-address Nov 29, 2025
0580ac6
style: Remove some importants that required other importants... The c…
DrJKL Nov 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
style: Remove some importants that required other importants... The c… 
…ontext menu gets the theming now.
  • Loading branch information
@DrJKL
DrJKL committed Nov 29, 2025
commit 0580ac6a255d015a2b1a059341be2cab94ff3197
19 changes: 7 additions & 12 deletions packages/design-system/src/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1190,24 +1190,19 @@ dialog::backdrop {
.litegraph.litecontextmenu,
.litegraph.litecontextmenu.dark {
z-index: 9999 !important;
background-color: var(--comfy-menu-bg) !important;
background-color: var(--comfy-menu-bg);
}

.litegraph.litecontextmenu
.litemenu-entry:hover:not(.disabled):not(.separator) {
background-color: var(--comfy-menu-hover-bg, var(--border-color)) !important;
color: var(--fg-color);
}

.litegraph.litecontextmenu .litemenu-entry.submenu,
.litegraph.litecontextmenu.dark .litemenu-entry.submenu {
background-color: var(--comfy-menu-bg) !important;
color: var(--input-text);
background-color: var(--comfy-menu-bg);
color: var(--fg-color);
}

.litegraph.litecontextmenu input {
background-color: var(--comfy-input-bg) !important;
color: var(--input-text) !important;
background-color: var(--comfy-input-bg);
color: var(--input-text);
}

.comfy-context-menu-filter {
Expand Down Expand Up @@ -1248,14 +1243,14 @@ dialog::backdrop {

.litegraph.litesearchbox {
z-index: 9999 !important;
background-color: var(--comfy-menu-bg) !important;
background-color: var(--comfy-menu-bg);
overflow: hidden;
display: block;
}

.litegraph.litesearchbox input,
.litegraph.litesearchbox select {
background-color: var(--comfy-input-bg) !important;
background-color: var(--comfy-input-bg);
color: var(--input-text);
}

Expand Down
40 changes: 12 additions & 28 deletions src/lib/litegraph/public/css/litegraph.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@
min-width: 100px;
color: #aaf;
padding: 0;
box-shadow: 0 0 10px black !important;
background-color: #2e2e2e !important;
box-shadow: 0 0 10px black;
background-color: #2e2e2e;
z-index: 10;
max-height: -webkit-fill-available;
overflow-y: auto;
Expand All @@ -36,10 +36,6 @@
}
}

.litegraph.litecontextmenu.dark {
background-color: #000 !important;
}

.litegraph.litecontextmenu .litemenu-title img {
margin-top: 2px;
margin-left: 2px;
Expand All @@ -51,14 +47,6 @@
padding: 2px;
}

.litegraph.litecontextmenu .litemenu-entry.submenu {
background-color: #2e2e2e !important;
}

.litegraph.litecontextmenu.dark .litemenu-entry.submenu {
background-color: #000 !important;
}

.litegraph .litemenubar ul {
font-family: Tahoma, sans-serif;
margin: 0;
Expand Down Expand Up @@ -137,8 +125,8 @@
height: 0px;
margin: 3px 0 2px 0;
background-color: transparent;
padding: 0 !important;
cursor: default !important;
padding: 0;
cursor: default;
}

.litegraph .litemenu-entry.has_submenu {
Expand All @@ -154,8 +142,8 @@
}

.litegraph .litemenu-entry:hover:not(.disabled):not(.separator) {
background-color: #444 !important;
color: #eee;
background-color: var(--palette-interface-panel-hover-surface);
color: var(--content-hover-fg);
transition: all 0.2s;
}

Expand Down Expand Up @@ -372,10 +360,6 @@
padding: 4px;
}

.litegraph .dialog .property:hover {
background-color: color(from var(--comfy-menu-bg) 255 g b / .5);
}

.litegraph .dialog .property_name {
color: var(--muted-foreground);
display: inline-block;
Expand Down Expand Up @@ -432,17 +416,17 @@
padding: 4px 20px;
margin-left: 0px;
background-color: var(--secondary-background);
color: var(--text-foreground);
color: var(--base-foreground);
}

.litegraph .dialog .btn:hover {
background-color: var(--secondary-background-hover);
color: var(--text-foreground);
color: var(--base-foreground);
}

.litegraph .dialog .btn.delete:hover {
background-color: var(--color-danger-100);
color: var(--text-foreground);
color: var(--base-foreground);
}

.litegraph .bullet_icon {
Expand Down Expand Up @@ -496,11 +480,11 @@

.graphmenu-entry.danger,
.litemenu-entry.danger {
color: var(--error-text) !important;
color: var(--error-text);
}

.litegraph .litemenu-entry.danger:hover:not(.disabled) {
color: var(--error-text) !important;
color: var(--error-text);
opacity: 0.8;
}

Expand Down Expand Up @@ -549,7 +533,7 @@
min-height: 2em;
background-color: #333;
font-size: 1.2em;
box-shadow: 0 0 10px black !important;
box-shadow: 0 0 10px black;
z-index: 10;
}

Expand Down
Loading