# daisyUI 테마: 35개 테마로 ‘색 고민’ 끝내기
daisyUI의 테마는 단순히 “다크모드 지원” 정도가 아닙니다.
**색 조합을 제품 수준으로 미리 디자인해 둔 35개의 팔레트(테마)** 를 제공하고, 그 팔레트를 **앱 전체에 일관되게 적용**할 수 있게 해줍니다.
> 이 글은 **설치가 끝났다는 가정**으로 진행합니다.
> 설치부터 해야 한다면 공식 가이드를 먼저 보세요:
>
---
## 테마를 이해하는 핵심: “색을 직접 지정하지 않는다” {#sec-648a5757ecf6}
초보자가 가장 많이 헷갈리는 지점이 바로 여기입니다.
| 잘못된 방법 | 결과 |
|------------|------|
| Tailwind로 `bg-white`, `text-slate-900`, `bg-blue-600`처럼 색을 직접 찍어버리면 | 테마를 바꿔도 그 요소는 **고정 색상**을 유지합니다. |
즉, 테마를 쓰려면 **색을 하드코딩하지 말고**, daisyUI가 제공하는 **토큰(의미 기반 색상 이름)** 을 써야 합니다.
### ❌ 잘못된 예시: 테마를 무시하는 하드코딩 {#sec-0b5438bac864}
```html
```
### ✅ 올바른 예시: daisyUI 토큰을 사용해 테마에 ‘순응’ {#sec-e1146fcf48a6}
```html
```
여기서 중요한 건 “무슨 색이냐”가 아니라 “역할이 무엇이냐”입니다.
- `bg-base-100` : 화면/카드의 기본 배경
- `text-base-content` : 기본 텍스트 색
- `btn-primary` : 제품의 대표 행동(CTA)
테마는 이 역할들에 맞춰 색을 갈아 끼웁니다.
---
## 그래서 ‘반드시’ 무엇을 써야 하나? {#sec-7cfab9901bed}
daisyUI 테마를 제대로 쓰려면, 아래 둘 중 하나(혹은 둘 다)를 습관처럼 사용하면 됩니다.
| 사용법 | 예시 |
|--------|------|
| **daisyUI 컴포넌트 클래스** | `btn`, `btn-primary`, `alert`, `badge`, `card`, `navbar`, `input` … |
| **daisyUI 컬러 토큰 클래스(의미 기반 색상)** | 배경/텍스트 기본: `bg-base-100`, `bg-base-200`, `bg-base-300`, `text-base-content` 포인트 색: `bg-primary`, `text-primary`, `bg-secondary`, `bg-accent`, `bg-neutral` 상태 색: `bg-info`, `bg-success`, `bg-warning`, `bg-error` (+ 각각의 `*-content`) |
예를 들어 “경고 배너”를 만들 때도 색을 찍지 말고 역할로 표현합니다.
위에서 나열한 것보다 더 다양하게 있는데 이것은 다음편 **daisyUI에서 사용하는 color names 와 class Cheatsheet** 에서 자세히 다뤄보도록 하겠습니다.
```html
결제 정보가 누락되었습니다.
```
---
## 테마 적용: `data-theme` 하나로 전체 분위기 바꾸기 {#sec-4d6308cbf561}
테마 적용은 의외로 단순합니다.
```html
```
이 한 줄(`data-theme`)이 **앱 전체의 색 변수 세트**를 바꿉니다.
---
## 테마는 “전체”만 바꾸는 게 아니다: 섹션 단위로도 가능 {#sec-e0f142807b1a}
제품을 만들다 보면 이런 요구가 자주 나옵니다.
- “메인 페이지는 깔끔한데, 이벤트 배너는 좀 더 튀게”
- “관리자 페이지는 dark, 사용자 페이지는 light”
daisyUI는 특정 DOM에 `data-theme`만 붙이면 **그 영역만** 테마가 바뀝니다. 중첩도 제한이 없습니다.
```html
전체는 dark
이 섹션은 항상 light
이 span은 retro
```
이 기능은 “테마 토글”보다 오히려 실전에서 더 자주 쓰입니다.
---
## 테마 관리: 필요한 테마만 켜는 습관 {#sec-ab5d0648dae0}
설치가 끝났다면, 테마 활성화는 CSS의 `@plugin "daisyui" { ... }` 블록에서 관리합니다.
```css
@import "tailwindcss";
@plugin "daisyui" {
themes: light --default, dark --prefersdark, cupcake;
}
```
- `themes`는 **쉼표로 구분한 목록**입니다.
- `--default`는 기본 테마
- `--prefersdark`는 OS 다크 모드 선호(`prefers-color-scheme: dark`)일 때 기본 테마
"일단 다 켜고 고르자"면 이렇게도 가능합니다.
```css
@plugin "daisyui" {
themes: all;
}
```
다만 제품에서는 보통 **필요한 것만 켜는 편**이 관리가 쉽습니다.
---
## 차별 포인트: ‘테마 선택’을 디자인이 아니라 제품 전략으로 보기 {#sec-612655295e82}
테마 35개를 “예쁜 스킨”으로만 보면 아깝습니다. 저는 테마를 이렇게 씁니다.
| 단계 | 활용 방식 |
|------|-----------|
| **MVP 단계** | 테마를 “브랜드 후보”로 여러 개 띄워두고, UI/콘텐츠와 어울리는지 빠르게 검증 |
| **운영 단계** | 색을 하드코딩하지 않았기 때문에, 브랜드 리뉴얼/시즌 이벤트를 **테마 교체로 끝냄** |
| **팀 협업** | 디자이너가 없어도 ‘역할 기반 토큰’만 지키면 일관성이 유지됨 |
결국 요지는 하나입니다.
> **“색을 직접 찍는 습관”만 버리면, 테마는 앱 전체를 단숨에 업그레이드하는 장치가 된다.**
---
## 커스텀 테마는 언제 필요할까? {#sec-67726d664b47}
결론부터 말하면, **대부분은 기본 35개 테마만으로도 충분**합니다. 기본 테마들이 이미 완성도가 높아서, 보통은 “기본 테마 선택 + 아주 약간의 수정” 정도로 실전에 투입할 수 있어요.
그럼에도 커스텀(오버라이드)을 고려할 때가 있습니다.
- **브랜드 컬러가 명확한 경우**: 회사/서비스의 대표 색이 이미 정해져 있고, 기본 테마 35개 중 하나를 고른 뒤 **그 위에 브랜드 컬러를 덮어씌우듯** 맞추고 싶을 때
이럴 땐 처음부터 새 테마를 만드는 것보다, **`primary`, `secondary` 정도만 살짝 커스터마이즈**하는 방식이 가장 효율적입니다. 버튼/링크/CTA 같은 핵심 인터랙션이 브랜드 색으로 정리되면서도, 나머지 톤(배경/텍스트/상태 색)은 기본 테마의 균형을 그대로 가져갈 수 있거든요.
`primary`, `secondary`를 실제로 어떻게 커스터마이징하는지(기본 테마를 오버라이딩하는 방식)는 **다음 포스트에서** 코드와 함께 자세히 다뤄보겠습니다.
---
## 다음 편 예고 {#sec-b349bf2c99ab}
다음 글에서는 아래를 다뤄보려 합니다.
- “테마는 유지하고 컴포넌트만 살짝 변형”하는 실전 패턴
- 테마를 커스터마이즈 하는 방법
- daisyUI에서 지원하는 색상변수와 클래스의 종류 치트시트
다음에 또 만나요!