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

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

Browse Source 
## Summary

Addressing the theme aspect of #6976 

## Changes

- **What**: Not comprehensive, but swaps many of the colors in the
litegraph panel styles to reference theme tokens.

## Screenshots (if applicable)
<img width="730" height="637" alt="image"
src="https://github.com/user-attachments/assets/1f8b0c0f-f957-487e-96b5-324ed2a6a717"
/>
<img width="721" height="719" alt="image"
src="https://github.com/user-attachments/assets/37f098a3-39f6-4cae-8bcb-601121d106f5"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7036-A11y-style-Make-properties-panel-use-theme-colors-Not-comprehensive-2ba6d73d365081038481c66be68a599a)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Alexander Brown
2025-11-29 16:06:29 -08:00
committed by GitHub
parent 2cce0fe611
commit d3aa8dfc88
8 changed files with 35 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
packages/design-system/src/css/style.css
View File

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