mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 14:30:41 +00:00
fd236b3587
## Summary Small updates to the UI to make it more visually distinct from the graph nodes and improving the login button ## Changes - **What**: - Improve theme support with dynamic colors - Standardize surface colors/borders - Add shadows to all floating UI elements - Change side toolbar to be docked by default - Decrease side toolbar width - Change login button to icon only - Update C button to be more distinctive ## Review Focus - Theme tokens, I am not sure what the overall plan for how these tokens will be supported for custom user palettes. I've implemented a method where default variables are chosen that look nice over all existing themes, but they can be overridden. ## Screenshots Dark theme updated color <img width="958" height="615" alt="image" src="https://github.com/user-attachments/assets/a2c540cf-6c05-4ad3-996b-8b7b80df8d2d" /> Themed & updated menu button (active vs hover vs default) <img width="58" height="338" alt="github" src="https://github.com/user-attachments/assets/90244ee2-d5ee-4b26-9d99-f4b8439aa372" /><img width="58" height="338" alt="nord" src="https://github.com/user-attachments/assets/053e8e7b-d639-4b72-92d2-ec7e2167aab8" /><img width="58" height="338" alt="arc" src="https://github.com/user-attachments/assets/3caeb07b-d41b-4d88-83b4-ef8d45d4e5a6" /><img width="58" height="338" alt="solarized" src="https://github.com/user-attachments/assets/6ebf6afb-ec3a-436b-90eb-bda40be1c79f" /><img width="58" height="338" alt="light" src="https://github.com/user-attachments/assets/fbb7f96a-b722-40c5-86fa-a0732e166972" /><img width="58" height="338" alt="dark" src="https://github.com/user-attachments/assets/5459208b-9256-4c55-9373-169e9cd9f09a" /> With labels <img width="58" height="394" alt="labels" src="https://github.com/user-attachments/assets/f97ee354-35cd-42b8-896f-57ac39644c1d" /> Logged out (only visible on desktop) <img width="323" height="48" alt="logged out" src="https://github.com/user-attachments/assets/75b71420-0c1b-446f-8cdd-43c68674d346" /> Logged in <img width="355" height="48" alt="logged in" src="https://github.com/user-attachments/assets/324fd133-a793-49dd-844a-f93dd5d1effb" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6381-UI-color-updates-tweaks-29b6d73d3650816384d2ef5617a776a0) by [Unito](https://www.unito.io) --------- Co-authored-by: GitHub Action <action@github.com> Co-authored-by: github-actions <github-actions@github.com>
80 lines
3.5 KiB
JSON
80 lines
3.5 KiB
JSON
{
|
|
"id": "light",
|
|
"name": "Light",
|
|
"light_theme": true,
|
|
"colors": {
|
|
"node_slot": {
|
|
"CLIP": "#FFA726",
|
|
"CLIP_VISION": "#5C6BC0",
|
|
"CLIP_VISION_OUTPUT": "#8D6E63",
|
|
"CONDITIONING": "#EF5350",
|
|
"CONTROL_NET": "#66BB6A",
|
|
"IMAGE": "#42A5F5",
|
|
"LATENT": "#AB47BC",
|
|
"MASK": "#9CCC65",
|
|
"MODEL": "#7E57C2",
|
|
"STYLE_MODEL": "#D4E157",
|
|
"VAE": "#FF7043",
|
|
"NOISE": "#B0B0B0",
|
|
"GUIDER": "#66FFFF",
|
|
"SAMPLER": "#ECB4B4",
|
|
"SIGMAS": "#CDFFCD",
|
|
"TAESD": "#DCC274"
|
|
},
|
|
"litegraph_base": {
|
|
"BACKGROUND_IMAGE": "data:image/gif;base64,R0lGODlhZABkALMAAAAAAP///+vr6+rq6ujo6Ofn5+bm5uXl5d3d3f///wAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAAkALAAAAABkAGQAAAT/UMhJq7046827HkcoHkYxjgZhnGG6si5LqnIM0/fL4qwwIMAg0CAsEovBIxKhRDaNy2GUOX0KfVFrssrNdpdaqTeKBX+dZ+jYvEaTf+y4W66mC8PUdrE879f9d2mBeoNLfH+IhYBbhIx2jkiHiomQlGKPl4uZe3CaeZifnnijgkESBqipqqusra6vsLGys62SlZO4t7qbuby7CLa+wqGWxL3Gv3jByMOkjc2lw8vOoNSi0czAncXW3Njdx9Pf48/Z4Kbbx+fQ5evZ4u3k1fKR6cn03vHlp7T9/v8A/8Gbp4+gwXoFryXMB2qgwoMMHyKEqA5fxX322FG8tzBcRnMW/zlulPbRncmQGidKjMjyYsOSKEF2FBlJQMCbOHP6c9iSZs+UnGYCdbnSo1CZI5F64kn0p1KnTH02nSoV3dGTV7FFHVqVq1dtWcMmVQZTbNGu72zqXMuW7danVL+6e4t1bEy6MeueBYLXrNO5Ze36jQtWsOG97wIj1vt3St/DjTEORss4nNq2mDP3e7w4r1bFkSET5hy6s2TRlD2/mSxXtSHQhCunXo26NevCpmvD/UU6tuullzULH76q92zdZG/Ltv1a+W+osI/nRmyc+fRi1Xdbh+68+0vv10dH3+77KD/i6IdnX669/frn5Zsjh4/2PXju8+8bzc9/6fj27LFnX11/+IUnXWl7BJfegm79FyB9JOl3oHgSklefgxAC+FmFGpqHIYcCfkhgfCohSKKJVo044YUMttggiBkmp6KFXw1oII24oYhjiDByaKOOHcp3Y5BD/njikSkO+eBREQAAOw==",
|
|
"CLEAR_BACKGROUND_COLOR": "lightgray",
|
|
"NODE_TITLE_COLOR": "#222",
|
|
"NODE_SELECTED_TITLE_COLOR": "#000",
|
|
"NODE_TEXT_SIZE": 14,
|
|
"NODE_TEXT_COLOR": "#444",
|
|
"NODE_TEXT_HIGHLIGHT_COLOR": "#1e293b",
|
|
"NODE_SUBTEXT_SIZE": 12,
|
|
"NODE_DEFAULT_COLOR": "#F7F7F7",
|
|
"NODE_DEFAULT_BGCOLOR": "#F5F5F5",
|
|
"NODE_DEFAULT_BOXCOLOR": "#CCC",
|
|
"NODE_DEFAULT_SHAPE": 2,
|
|
"NODE_BOX_OUTLINE_COLOR": "#000",
|
|
"NODE_BYPASS_BGCOLOR": "#FF00FF",
|
|
"NODE_ERROR_COLOUR": "#E00",
|
|
"DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.1)",
|
|
"DEFAULT_GROUP_FONT": 24,
|
|
"WIDGET_BGCOLOR": "#D4D4D4",
|
|
"WIDGET_OUTLINE_COLOR": "#999",
|
|
"WIDGET_TEXT_COLOR": "#222",
|
|
"WIDGET_SECONDARY_TEXT_COLOR": "#555",
|
|
"WIDGET_DISABLED_TEXT_COLOR": "#999",
|
|
"LINK_COLOR": "#4CAF50",
|
|
"EVENT_LINK_COLOR": "#FF9800",
|
|
"CONNECTING_LINK_COLOR": "#2196F3",
|
|
"BADGE_FG_COLOR": "#000",
|
|
"BADGE_BG_COLOR": "#FFF"
|
|
},
|
|
"comfy_base": {
|
|
"fg-color": "#222",
|
|
"bg-color": "#DDD",
|
|
"comfy-menu-bg": "#FFFFFF",
|
|
"comfy-menu-hover-bg": "#ccc",
|
|
"comfy-menu-secondary-bg": "#EEE",
|
|
"comfy-input-bg": "#C9C9C9",
|
|
"input-text": "#222",
|
|
"descrip-text": "#444",
|
|
"drag-text": "#555",
|
|
"error-text": "#F44336",
|
|
"border-color": "#888",
|
|
"tr-even-bg-color": "#f9f9f9",
|
|
"tr-odd-bg-color": "#fff",
|
|
"content-bg": "#e0e0e0",
|
|
"content-fg": "#222",
|
|
"content-hover-bg": "#adadad",
|
|
"content-hover-fg": "#222",
|
|
"bar-shadow": "rgba(16, 16, 16, 0.25) 0 0 0.5rem",
|
|
"interface-panel-box-shadow": "1px 1px 8px 0 rgba(0, 0, 0, 0.2)",
|
|
"interface-panel-drop-shadow": "1px 1px 4px rgba(0, 0, 0, 0.4)",
|
|
"interface-panel-hover-surface": "var(--color-gray-200)",
|
|
"interface-panel-selected-surface": "color-mix(in srgb, var(--interface-panel-surface) 78%, var(--contrast-mix-color))",
|
|
"contrast-mix-color": "#000"
|
|
}
|
|
}
|
|
}
|