daisyUI Color Names & Class Cheatsheet: 테마 전환을 위한 필수 표
daisyUI를 쓰는 가장 큰 이유는 테마 전환을 쉽게 하기 위해서라고 생각합니다. 그런데 이 장점은 개발자/디자이너가 bg-blue-500 같은 Tailwind의 “고정 색상”을 직접 박아 넣는 순간 바로 깨져요. 대신 daisyUI가 제공하는 primary, base-100, error 같은 의미 기반 색 이름으로 btn-primary, bg-base-200, text-error처럼 HTML을 작성해두면, 나중에 테마만 바꿔도 UI 전체 톤이 자동으로 따라옵니다.
그래서 결국 핵심은 색 이름(color names)과 클래스 패턴을 알고, 둘을 조합해서 마크업하는 것입니다. 숙련된 디자이너라면 이미 감으로 외우고 쓰겠지만, 초심자나 가끔 UI를 만지는 백엔드/풀스택 개발자라면 매번 문서를 뒤적이기보다 이 치트시트를 옆에 띄워두고 작업하는 게 훨씬 빠릅니다. 이번 글은 바로 그 목적을 위해, “언제 어떤 색 이름을 쓰는지”와 “어떤 클래스에 어떻게 결합하는지”를 표로 깔끔하게 정리했습니다.
Color Names (언제 쓰는지)
| Color name | 언제 사용? (짧게) | 대표 사용 예 |
|---|---|---|
primary |
브랜드의 메인 테마 색상 | 주요 버튼, 핵심 CTA |
primary-content |
primary 위 텍스트/아이콘 |
primary 버튼의 글자색 |
secondary |
보조 액션/서브 브랜드 | 서브 버튼, 보조 강조 |
secondary-content |
secondary 위 텍스트/아이콘 |
secondary 영역 글자색 |
accent |
포인트/하이라이트 | 배지, 링크 강조, 강조 요소 |
accent-content |
accent 위 텍스트/아이콘 |
accent 배경 위 글자색 |
neutral |
중립 UI(어두운 톤) | 네비게이션, 푸터, 딥톤 패널 |
neutral-content |
neutral 위 텍스트/아이콘 |
neutral 영역 글자색 |
base-100 |
기본 페이지 배경 | 페이지/캔버스 바탕 |
base-200 |
한 단계 떠있는 표면 | 카드, 섹션 배경 |
base-300 |
더 강한 구분/층 | 구분선, 깊은 패널 |
base-content |
base 계열 위 텍스트/아이콘 | 기본 본문 텍스트 |
info |
정보/가이드 | 안내 배너, 힌트 |
info-content |
info 위 텍스트/아이콘 |
info 배경 위 글자색 |
success |
성공/정상 | 완료/성공 알림 |
success-content |
success 위 텍스트/아이콘 |
success 배경 위 글자색 |
warning |
주의/경고 | 주의 메시지, 확인 필요 |
warning-content |
warning 위 텍스트/아이콘 |
warning 배경 위 글자색 |
error |
오류/위험 | 실패/에러/파괴적 액션 |
error-content |
error 위 텍스트/아이콘 |
error 배경 위 글자색 |
Class Patterns (색 이름 결합 규칙)
| 목적 | 패턴 | 예시 |
|---|---|---|
| 배경색 | bg-{COLOR} |
bg-primary, bg-base-200 |
| 글자색 | text-{COLOR} |
text-base-content, text-error |
| 테두리 | border-{COLOR} |
border-neutral, border-base-300 |
| 그라디언트 시작/중간/끝 | from- / via- / to-{COLOR} |
from-primary via-accent to-secondary |
| 링(포커스) | ring-{COLOR} |
ring-primary |
| 링 오프셋 | ring-offset-{COLOR} |
ring-offset-base-100 |
| SVG 채움 | fill-{COLOR} |
fill-accent |
| SVG 선 | stroke-{COLOR} |
stroke-neutral-content |
| 그림자 | shadow-{COLOR} |
shadow-primary |
| 아웃라인 | outline-{COLOR} |
outline-info |
| 구분선(divide) | divide-{COLOR} |
divide-base-300 |
| 폼 accent | accent-{COLOR} |
accent-primary |
| 캐럿 | caret-{COLOR} |
caret-primary |
| 밑줄/장식 | decoration-{COLOR} |
decoration-accent |
| placeholder | placeholder-{COLOR} |
placeholder-base-content |
Opacity로 농도 조절
| 목적 | 패턴 | 예시 |
|---|---|---|
| 연한 배경 | bg-{COLOR}/10 |
bg-primary/10, bg-success/15 |
| 은은한 테두리 | border-{COLOR}/30 |
border-error/30 |
| 약한 텍스트 | text-{COLOR}/70 |
text-base-content/70 |
| 호버 강도 조절 | hover:bg-{COLOR}/80 |
hover:bg-primary/80 |
색상의 농도를 조절하고 싶을 때는, 클래스 + 색상조합에
/숫자(퍼센트)로 조절하세요. 위 색상이름을 오버라이드해서 색상을 변환하는 것은 괜찮지만, html에 위 색상이름 이외로 추가하는 것은 디자인의 통일성에도 바람직하지 않고 테마전환에서 해당 색상이 너무 튈 수 있으니 권장하지 않습니다.
관련글 읽기 :
댓글이 없습니다.