daisyUI 色名とクラスのチートシート：テーマ切替に必須の表
daisyUIを使う最大の理由はテーマ切替を簡単にするためだと考えています。しかし、開発者やデザイナーが bg-blue-500 のようなTailwindの「固定色」を直接書き込むと、そのメリットはすぐに崩れてしまいます。代わりに、daisyUIが提供する primary、base-100、error などの意味ベースの色名を使い、btn-primary、bg-base-200、text-error のようにHTMLを書いておけば、後でテーマだけを変えるだけでUI全体のトーンが自動的に追従します。
つまり、色名とクラスパターンを知り、それらを組み合わせてマークアップすることが肝心です。熟練したデザイナーなら感覚で覚えているかもしれませんが、初心者やバックエンド／フルスタック開発者がUIを触るたびにドキュメントを探すより、このチートシートを隣に置いて作業する方がずっと速いです。この記事はその目的のために、いつどの色名を使うか、そしてどのクラスにどう組み合わせるかを表で整理しました。
色名（いつ使うか）
| 色名 | いつ使う？（簡潔） | 代表的な使用例 |
|---|---|---|
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 背景上の文字色 |
クラスパターン（色名の組み合わせルール）
| 目的 | パターン | 例 |
|---|---|---|
| 背景色 | 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-{COLOR} |
accent-primary |
| キャレット | caret-{COLOR} |
caret-primary |
| 下線／装飾 | decoration-{COLOR} |
decoration-accent |
| プレースホルダー | 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に上記色名以外を追加することはデザインの統一性にも望ましくなく、テーマ切替時に色が目立ちすぎる可能性があるため推奨しません。
関連記事 :