# daisyUI 色名とクラスのチートシート：テーマ切替に必須の表

daisyUIを使う最大の理由は**テーマ切替を簡単にするため**だと考えています。しかし、開発者やデザイナーが `bg-blue-500` のようなTailwindの「固定色」を直接書き込むと、そのメリットはすぐに崩れてしまいます。代わりに、daisyUIが提供する `primary`、`base-100`、`error` などの**意味ベースの色名**を使い、`btn-primary`、`bg-base-200`、`text-error` のようにHTMLを書いておけば、後でテーマだけを変えるだけでUI全体のトーンが自動的に追従します。

つまり、**色名とクラスパターンを知り、それらを組み合わせてマークアップする**ことが肝心です。熟練したデザイナーなら感覚で覚えているかもしれませんが、初心者やバックエンド／フルスタック開発者がUIを触るたびにドキュメントを探すより、**このチートシートを隣に置いて作業する方がずっと速い**です。この記事はその目的のために、いつどの色名を使うか、そしてどのクラスにどう組み合わせるかを表で整理しました。

![ロボット開発者と色パレットカード](/media/editor_temp/6/726cb8ce-603f-45b6-becf-365e5d4f8b12.png)

---

## 色名（いつ使うか） {#sec-4d3fa8b26445}

| 色名 | いつ使う？（簡潔） | 代表的な使用例 |
| ------------------- | --------------------- | ---------------- |
| `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 背景上の文字色 |

---

## クラスパターン（色名の組み合わせルール） {#sec-5007f90f39f0}

| 目的 | パターン | 例 |
| ------------- | --------------------------- | -------------------------------------- |
| 背景色 | `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で濃度を調整 {#sec-c72e6700b4d3}

| 目的 | パターン | 例 |
| -------- | --------------------- | -------------------------------- |
| 軽い背景 | `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に上記色名以外を追加することはデザインの統一性にも望ましくなく、テーマ切替時に色が目立ちすぎる可能性があるため推奨しません。

---

**関連記事** : 

- [daisyUI テーマ：35色パレットで色の悩みを解消](/ko/whitedec/2026/1/25/daisyui-theme-35-colors/)  
- [Tailwind CSS プラグイン daisyUI イントロ：クラスだけで高速UI作成](/ko/whitedec/2026/1/25/tailwind-css-plugin-daisyui-intro-quick-ui-creation/)