🎨 ComfyUI 디자인 시스템 컬러 가이드

Tailwind CSS & PrimeVue 통합 컬러 시스템

컬러 시스템 개요

ComfyUI는 Tailwind CSS와 PrimeVue의 컬러 시스템을 통합하여 사용합니다

주요 특징

🎯 Tailwind CSS

유틸리티 클래스 기반 스타일링

text-zinc-500, bg-blue-600

🎨 PrimeVue

컴포넌트 테마 시스템

var(--p-surface-500)

🌓 다크 모드

자동 테마 전환 지원

.dark-theme 클래스 적용

Tailwind CSS 색상 팔레트

프로젝트에서 사용하는 Tailwind 색상 시스템

✨ Overridden Colors

tailwind.config.js에서 재정의한 커스텀 색상

📦 Default Colors

Tailwind CSS 기본 색상 팔레트

PrimeVue Aura 테마 색상

컴포넌트에서 사용되는 시맨틱 색상 토큰 (Aura 테마 + Blue primary)

🎨 Primitive Colors

PrimeVue에서 사용 가능한 기본 색상 팔레트

🎨 Semantic Tokens

Light Theme
Dark Theme

테마별 자동 색상 전환

PrimeVue CSS 변수와 Tailwind 클래스의 테마별 동작

🎨 PrimeVue 자동 테마 색상

클래스 없이도 자동으로 테마에 맞춰 변경되는 색상들

Light Theme

기본 색상 (클래스 없음)

일반 텍스트: color → #334155

Muted 텍스트: text-muted → #64748b

배경: background → #ffffff

보더: border → #e2e8f0

CSS 변수

--p-text-color: #334155
--p-text-muted-color: #64748b
--p-surface-0: #ffffff
--p-surface-100: #f1f5f9
--p-border-color: #e2e8f0
Dark Theme

기본 색상 (클래스 없음)

일반 텍스트: color → #ffffff

Muted 텍스트: text-muted → #a1a1aa

배경: background → #18181b

보더: border → #3f3f46

CSS 변수

--p-text-color: #ffffff
--p-text-muted-color: #a1a1aa
--p-surface-0: #ffffff
--p-surface-900: #18181b
--p-border-color: #3f3f46

✨ Tailwind text-muted 클래스

tailwind.config.js에 정의된 text-muted 색상

설정 코드

textColor: { muted: 'var(--p-text-muted-color)', highlight: 'var(--p-primary-color)' }

사용법: class="text-muted"

→ PrimeVue의 CSS 변수를 참조하여 테마에 따라 자동 변경

Neutral 색상 팔레트

⚠️ 주의: Tailwind neutral은 독립적인 색상입니다 (PrimeVue surface와 별개)

Light Theme

밝은 배경에서의 Neutral 색상

흰색 배경에서 대비를 위해 어두운 색상 사용

Dark Theme

어두운 배경에서의 Neutral 색상

검은색 배경에서 대비를 위해 밝은 색상 사용

⚠️ 색상 시스템 차이점

🎨 Tailwind Neutral

사용: bg-neutral-*, text-neutral-*

특징: 고정된 색상 값

테마: 수동으로 dark: 클래스 필요

<div class="bg-neutral-100 dark:bg-neutral-900">

🎨 PrimeVue Surface

사용: CSS 변수 또는 surface-* 클래스

특징: 테마에 따라 자동 변경

Light: Slate 색상 사용

Dark: Zinc 색상 사용

background: var(--p-surface-100); /* 자동으로 테마 전환 */

💡 권장 사항

통합 방법:

• PrimeVue 컴포넌트: surface 자동 적용

• 커스텀 컴포넌트: CSS 변수 사용

• Tailwind 유틸리티: zinc/slate 직접 사용

/* Light 테마 */ bg-slate-100 /* Dark 테마 */ dark:bg-zinc-900

⚠️ 현재 문제점

1. 색상 시스템 중복: Tailwind의 neutral과 PrimeVue의 surface가 같은 역할이지만 다른 값 사용

2. 테마 전환 불일치: bg-neutral-*은 수동 dark: 클래스 필요, PrimeVue는 자동 전환

3. 해결 방안: Tailwind config에서 neutral을 PrimeVue surface 변수로 매핑하거나, 일관된 색상 시스템 하나만 사용 권장

사용 가이드

개발자를 위한 색상 사용 방법

Tailwind CSS 사용법

텍스트 색상

<div class="text-zinc-500"> <div class="text-blue-600"> <div class="dark-theme:text-neutral-200">

배경 색상

<div class="bg-gray-100"> <div class="bg-emerald-500"> <div class="dark-theme:bg-zinc-900">

보더 색상

<div class="border-neutral-300"> <div class="border-teal-400"> <div class="dark-theme:border-zinc-700">

PrimeVue CSS 변수

Primary 색상

color: var(--p-primary-color); background: var(--p-primary-hover-color);

Surface 색상

background: var(--p-surface-100); border: 1px solid var(--p-surface-300);

텍스트 색상

color: var(--p-text-color); color: var(--p-text-muted-color);

📊 실제 사용 통계

레포지토리에서 실제로 사용 중인 색상 및 클래스 분석

🎨 Tailwind CSS 사용 현황

Background Classes (bg-*)

Text Classes (text-*)

Border Classes (border*)

Shadow & Rounded Classes

🎨 색상별 사용 빈도

🎨 PrimeVue 사용 현황

컴포넌트 사용 빈도

CSS 변수 사용

Surface 클래스 사용

Severity 클래스 사용