daisyUI 테마: 35개 테마로 ‘색 고민’ 끝내기

daisyUI의 테마는 단순히 “다크모드 지원” 정도가 아닙니다.
색 조합을 제품 수준으로 미리 디자인해 둔 35개의 팔레트(테마) 를 제공하고, 그 팔레트를 앱 전체에 일관되게 적용할 수 있게 해줍니다.

다채로운 색상의 스타일링 부티크 이미지

이 글은 설치가 끝났다는 가정으로 진행합니다.
설치부터 해야 한다면 공식 가이드를 먼저 보세요:
https://daisyui.com/docs/install/

테마를 이해하는 핵심: “색을 직접 지정하지 않는다”

초보자가 가장 많이 헷갈리는 지점이 바로 여기입니다.

잘못된 방법 결과
Tailwind로 bg-white, text-slate-900, bg-blue-600처럼 색을 직접 찍어버리면 테마를 바꿔도 그 요소는 고정 색상을 유지합니다.

즉, 테마를 쓰려면 색을 하드코딩하지 말고, daisyUI가 제공하는 토큰(의미 기반 색상 이름) 을 써야 합니다.

❌ 잘못된 예시: 테마를 무시하는 하드코딩

<div class="bg-white text-slate-900 p-6 rounded-2xl">
  <button class="bg-blue-600 text-white px-4 py-2 rounded-lg">Save</button>
</div>

✅ 올바른 예시: daisyUI 토큰을 사용해 테마에 ‘순응’

<div class="bg-base-100 text-base-content p-6 rounded-box">
  <button class="btn btn-primary">Save</button>
</div>

여기서 중요한 건 “무슨 색이냐”가 아니라 “역할이 무엇이냐”입니다.

  • bg-base-100 : 화면/카드의 기본 배경
  • text-base-content : 기본 텍스트 색
  • btn-primary : 제품의 대표 행동(CTA)

테마는 이 역할들에 맞춰 색을 갈아 끼웁니다.

그래서 ‘반드시’ 무엇을 써야 하나?

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)

예를 들어 “경고 배너”를 만들 때도 색을 찍지 말고 역할로 표현합니다.

<div class="bg-warning text-warning-content p-4 rounded-box">
  결제 정보가 누락되었습니다.
</div>

테마 적용: data-theme 하나로 전체 분위기 바꾸기

테마 적용은 의외로 단순합니다.

<html data-theme="cupcake">
  <body>
    <div class="bg-base-100 text-base-content min-h-screen p-10">
      <button class="btn btn-primary">Primary</button>
    </div>
  </body>
</html>

이 한 줄(data-theme)이 앱 전체의 색 변수 세트를 바꿉니다.

테마는 “전체”만 바꾸는 게 아니다: 섹션 단위로도 가능

제품을 만들다 보면 이런 요구가 자주 나옵니다.

  • “메인 페이지는 깔끔한데, 이벤트 배너는 좀 더 튀게”
  • “관리자 페이지는 dark, 사용자 페이지는 light”

daisyUI는 특정 DOM에 data-theme만 붙이면 그 영역만 테마가 바뀝니다. 중첩도 제한이 없습니다.

<html data-theme="dark">
  <body>
    <main class="p-10">
      <h1 class="text-2xl font-bold">전체는 dark</h1>

      <section data-theme="light" class="mt-8 p-6 rounded-box bg-base-100 text-base-content">
        이 섹션은 항상 light
        <span data-theme="retro" class="ml-2">이 span은 retro</span>
      </section>
    </main>
  </body>
</html>

이 기능은 “테마 토글”보다 오히려 실전에서 더 자주 쓰입니다.

테마 관리: 필요한 테마만 켜는 습관

설치가 끝났다면, 테마 활성화는 CSS의 @plugin "daisyui" { ... } 블록에서 관리합니다.

@import "tailwindcss";

@plugin "daisyui" {
  themes: light --default, dark --prefersdark, cupcake;
}
  • themes는 쉼표로 구분한 목록입니다.
  • --default는 기본 테마
  • --prefersdark는 OS 다크 모드 선호(prefers-color-scheme: dark)일 때 기본 테마

"일단 다 켜고 고르자"면 이렇게도 가능합니다.

@plugin "daisyui" {
  themes: all;
}

다만 제품에서는 보통 필요한 것만 켜는 편이 관리가 쉽습니다.

차별 포인트: ‘테마 선택’을 디자인이 아니라 제품 전략으로 보기

테마 35개를 “예쁜 스킨”으로만 보면 아깝습니다. 저는 테마를 이렇게 씁니다.

단계 활용 방식
MVP 단계 테마를 “브랜드 후보”로 여러 개 띄워두고, UI/콘텐츠와 어울리는지 빠르게 검증
운영 단계 색을 하드코딩하지 않았기 때문에, 브랜드 리뉴얼/시즌 이벤트를 테마 교체로 끝냄
팀 협업 디자이너가 없어도 ‘역할 기반 토큰’만 지키면 일관성이 유지됨

결국 요지는 하나입니다.

“색을 직접 찍는 습관”만 버리면, 테마는 앱 전체를 단숨에 업그레이드하는 장치가 된다.

커스텀 테마는 언제 필요할까?

결론부터 말하면, 대부분은 기본 35개 테마만으로도 충분합니다. 기본 테마들이 이미 완성도가 높아서, 보통은 “기본 테마 선택 + 아주 약간의 수정” 정도로 실전에 투입할 수 있어요.

그럼에도 커스텀(오버라이드)을 고려할 때가 있습니다.

  • 브랜드 컬러가 명확한 경우: 회사/서비스의 대표 색이 이미 정해져 있고, 기본 테마 35개 중 하나를 고른 뒤 그 위에 브랜드 컬러를 덮어씌우듯 맞추고 싶을 때

이럴 땐 처음부터 새 테마를 만드는 것보다, primary, secondary 정도만 살짝 커스터마이즈하는 방식이 가장 효율적입니다. 버튼/링크/CTA 같은 핵심 인터랙션이 브랜드 색으로 정리되면서도, 나머지 톤(배경/텍스트/상태 색)은 기본 테마의 균형을 그대로 가져갈 수 있거든요.

primary, secondary를 실제로 어떻게 커스터마이징하는지(기본 테마를 오버라이딩하는 방식)는 다음 포스트에서 코드와 함께 자세히 다뤄보겠습니다.

다음 편 예고

다음 글에서는 아래를 다뤄보려 합니다.

  • “테마는 유지하고 컴포넌트만 살짝 변형”하는 실전 패턴
  • 테마를 커스터마이즈 하는 방법
  • daisyUI에서 지원하는 색상변수와 클래스의 종류 치트시트

다음에 또 만나요!