Revision Ver-1

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

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

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

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

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

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

\n\n\n\n\n\n\n\n\n\n\n\n\n\n

誤った方法	結果
Tailwindで `bg-white`、`text-slate-900`、`bg-blue-600` など色を直接指定すると	テーマを変更してもその要素は固定色を維持します。

つまり、テーマを使うには色をハードコーディングせず、daisyUIが提供するトークン（意味ベースの色名）を使用する必要があります。

❌ 誤った例：テーマを無視したハードコーディング

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

✅ 正しい例：daisyUIトークンを使ってテーマに『順応』

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

ここで重要なのは「何色か」ではなく「何の役割か」です。

bg-base-100 : 画面/カードの基本背景
text-base-content : 基本テキスト色
btn-primary : 製品の代表的な行動（CTA）

テーマはこれらの役割に合わせて色を差し替えます。

では『必ず』何を使うべきか？

daisyUIテーマを正しく使うには、以下のうちの一つ（または両方）を習慣的に使用します。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

使用法	例
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">\n  支払い情報が欠落しています。\n</div>\n

テーマ適用：`data-theme` 1行で全体の雰囲気を変える

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

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

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

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

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

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

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

<html data-theme="dark">\n  <body>\n    <main class="p-10">\n      <h1 class="text-2xl font-bold">全体はダーク</h1>\n\n      <section data-theme="light" class="mt-8 p-6 rounded-box bg-base-100 text-base-content">\n        このセクションは常にライト\n        <span data-theme="retro" class="ml-2">このスパンはレトロ</span>\n      </section>\n    </main>\n  </body>\n</html>\n

この機能は「テーマトグル」より実務で頻繁に使われます。

テーマ管理：必要なテーマだけをオンにする習慣

インストールが完了したら、テーマの有効化はCSSの @plugin "daisyui" { ... } ブロックで管理します。

@import "tailwindcss";\n\n@plugin "daisyui" {\n  themes: light --default, dark --prefersdark, cupcake;\n}\n

themes は カンマ区切りのリストです。
--default はデフォルトテーマ
--prefersdark は OS のダークモード好み（prefers-color-scheme: dark）時のデフォルトテーマ

「まず全部オンにして選ぶ」場合はこうもできます。

@plugin "daisyui" {\n  themes: all;\n}\n

ただし製品では通常 必要なものだけをオンにするほうが管理しやすいです。

差別化ポイント：『テーマ選択』をデザインではなく製品戦略として見る

35のテーマを「可愛いスキン」だけだと損です。私はテーマをこう使います。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

ステージ	活用方法
MVP段階	テーマを「ブランド候補」として複数立ち上げ、UI/コンテンツと合うかを迅速に検証
運用段階	色をハードコーディングしないので、ブランドリニューアル/シーズンイベントはテーマ切替で完結
チーム協力	デザイナーがいなくても「役割ベースのトークン」を守れば一貫性が保てる

結局のところは一つです。

\n
「色を直接書く習慣」をやめるだけで、テーマはアプリ全体を一瞬でアップグレードできるツールになります。
\n

カスタムテーマはいつ必要か？

結論から言うと、ほとんどの場合は基本35テーマだけで十分です。基本テーマはすでに完成度が高く、通常は「基本テーマ選択 + ほんの少しの修正」で実務に投入できます。

それでもカスタム（オーバーライド）を検討するケースがあります。

ブランドカラーが明確な場合：会社/サービスの代表色が既に決まっており、基本35テーマの中から1つを選んでその上にブランドカラーを重ねるようにしたいとき

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

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

次回予告

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

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

また会いましょう！

', '/media/editor_temp/6/80ae2ebd-04c4-4f84-b0d2-15666a888080.png')

daisyUIテーマ：35色パレットで色の悩みを解消 [ r1 ]