daisyUIテーマ：35色パレットで『色の悩み』を解消

daisyUIのテーマは単に「ダークモード対応」だけではありません。
製品レベルでデザインされた35色のパレット（テーマ）を提供し、そのパレットをアプリ全体に一貫して適用できるようにします。

多彩な色のスタイリングブティック画像

本記事はインストールが完了している前提で進めます。
インストールから始める場合は公式ガイドを参照してください：
https://daisyui.com/docs/install/

テーマを理解するコア：『色を直接指定しない』

Commandbox 광고

初心者が最も混乱しやすいポイントはここです。

誤った方法 結果
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 1行で全体の雰囲気を変える

Commandbox 광고

テーマ適用は意外と簡単です。

<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>

この1行（data-theme）がアプリ全体の色変数セットを切り替えます。

テーマは「全体」だけでなく：セクション単位でも可能

製品開発ではこうした要件が頻繁に出てきます。

  • 「メインページはシンプルだけど、イベントバナーはもっと目立たせたい」
  • 「管理者ページはダーク、ユーザーページはライト」

daisyUIは特定DOMに data-theme を付けるだけでその領域だけテーマが変わります。ネストも制限なしです。

<html data-theme="dark">
  <body>
    <main class="p-10">
      <h1 class="text-2xl font-bold">全体はダーク</h1>

      <section data-theme="light" class="mt-8 p-6 rounded-box bg-base-100 text-base-content">
        このセクションは常にライト
        <span data-theme="retro" class="ml-2">このスパンはレトロ</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テーマの中から1つを選んでその上にブランドカラーを重ねるようにしたいとき

この場合、最初から新テーマを作るより、primary、secondary だけを少しカスタマイズする方が効率的です。ボタン/リンク/CTAなどの主要インタラクションがブランド色で統一され、残りのトーン（背景/テキスト/状態色）は基本テーマのバランスをそのまま引き継げます。

primary、secondary を実際にどうカスタマイズするか（基本テーマをオーバーライドする方法）は 次回の投稿でコードとともに詳しく解説します。

次回予告

次回は以下を取り上げます。

  • 「テーマは維持しつつコンポーネントだけを少し変える」実務パターン
  • テーマをカスタマイズする方法
  • daisyUIでサポートされている色変数とクラスの種類をまとめたチートシート

また会いましょう！