# 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` 付き） |
例えば「警告バナー」を作るときも色を直接指定せず、役割で表現します。
```html
支払い情報が欠落しています。
```
---
## テーマ適用：`data-theme` 1行で全体の雰囲気を変える {#sec-4d6308cbf561}
テーマ適用は意外と簡単です。
```html
```
この1行（`data-theme`）が**アプリ全体の色変数セット**を切り替えます。
---
## テーマは「全体」だけでなく：セクション単位でも可能 {#sec-e0f142807b1a}
製品開発ではこうした要件が頻繁に出てきます。
- 「メインページはシンプルだけど、イベントバナーはもっと目立たせたい」
- 「管理者ページはダーク、ユーザーページはライト」
daisyUIは特定DOMに `data-theme` を付けるだけで**その領域だけ**テーマが変わります。ネストも制限なしです。
```html
全体はダーク
```
この機能は「テーマトグル」より実務で頻繁に使われます。
---
## テーマ管理：必要なテーマだけをオンにする習慣 {#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テーマの中から1つを選んで**その上にブランドカラーを重ねる**ようにしたいとき
この場合、最初から新テーマを作るより、**`primary`、`secondary` だけを少しカスタマイズ**する方が効率的です。ボタン/リンク/CTAなどの主要インタラクションがブランド色で統一され、残りのトーン（背景/テキスト/状態色）は基本テーマのバランスをそのまま引き継げます。
`primary`、`secondary` を実際にどうカスタマイズするか（基本テーマをオーバーライドする方法）は **次回の投稿で**コードとともに詳しく解説します。
---
## 次回予告 {#sec-b349bf2c99ab}
次回は以下を取り上げます。
- 「テーマは維持しつつコンポーネントだけを少し変える」実務パターン
- テーマをカスタマイズする方法
- daisyUIでサポートされている色変数とクラスの種類をまとめたチートシート
また会いましょう！