외관 메뉴 (Appearance) - ComfyUI 설정 메뉴 설명
색상 팔레트 Color Palette
색상 팔레트는 ComfyUI 전체의 색상 주제 구성을 위해 사용되며, 해당 메뉴 기능은 다음과 같습니다.
- ComfyUI 주제 전환
- 현재 선택된 주제를
Json형식으로 내보내기 Json파일에서 사용자 정의 주제 구성 불러오기- 사용자 정의 주제 구성 삭제
현재 기본 제공되는 주제는 다음과 같습니다:
- Dark 어두운 주제
- Light 밝은 주제
- Arc 주제
- Solarized 과도 노출 주제
- Nord 주제
- Github 스타일 주제
기본 제공 주제 스타일 미리보기
Dark 어두운 주제
Light 밝은 주제
Arc 주제
Solarized 과도 노출 주제
Nord 주제
Github 스타일
ComfyUI 주제 스타일 사용자 정의 방법
기본 주제 파일을 내보내고 수정하여 ComfyUI 스타일을 사용자 정의할 수 있습니다. 해당 Json 파일은 텍스트 편집기 또는 VS Code와 같은 IDE를 사용하여 편집할 수 있습니다.
편집 시, 내용 형식이 잘못되지 않도록 주의하고, 해당 id 이름은 고유해야 합니다. 아래는 제가 내보낸 ComfyUI Light 주제 인터페이스의 Json입니다. 이를 참고하여 수정 구성을 진행할 수 있습니다. 또한 ComfyUI는 지속적으로 업데이트되므로, 아래 구성은 최신 버전이 아닐 수 있으며, ComfyUI 인터페이스에서 내보내어 수정하는 것을 권장합니다.
{
"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",
"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": "#F5F5F5",
"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"
}
}
}노드（Node）
노드 불투명도（Node opacity）
이 옵션은 주로 노드의 배경색 투명도에 영향을 미치며, 값 0.1-1로 설정할 수 있고, 값이 작을수록 배경색이 더 투명해집니다.
노드 위젯（Node Widget）
텍스트 영역 위젯 글꼴 크기（Textarea widget font size）
해당 노드에 텍스트 입력이 있을 때, 이 옵션은 텍스트 영역의 글꼴 크기를 결정하며, 최소 8 최대 24로 설정할 수 있습니다.
사이드바（Sidebar）
사이드바 크기（Sidebar size）
사이드바 크기 조건
- 정상（normal）: 정상 사이드바 크기
- 작음（small）: 작은 사이드바 크기
사이드바 위치（Sidebar location）
사이드바 위치, 왼쪽 / 오른쪽
트리 탐색기（Tree Explorer）
트리 탐색기 항목 패딩（Tree explorer item padding）
사이드바 메뉴의 내패딩을 설정하며, 0-8의 내패딩 설정을 지원합니다.