papopporking-oss/opencode-nextjs-standard

daisyUI 5 カラー

daisyUI カラー名

• primary: メインブランドカラー。
• primary-content: primary 上で使用する前景コンテンツカラー。
• secondary: オプションのセカンダリブランドカラー。
• secondary-content: secondary 上で使用する前景コンテンツカラー。
• accent: オプションのアクセントブランドカラー。
• accent-content: accent 上で使用する前景コンテンツカラー。
• neutral: 彩度の高い色を使用しない UI 領域向けの暗いニュートラルカラー。
• neutral-content: neutral 上で使用する前景コンテンツカラー。
• base-100: 空白の背景用のページベースサーフェスカラー。
• base-200: より暗いベースシェードで、階層感を追加します。
• base-300: さらに暗いベースシェードで、より強い階層感を追加します。
• base-content: ベースカラー上で使用する前景コンテンツカラー。
• info: 情報メッセージやヘルプメッセージの色。
• info-content: info 上で使用する前景コンテンツカラー。
• success: 成功メッセージや安全状態のメッセージの色。
• success-content: success 上で使用する前景コンテンツカラー。
• warning: 警告メッセージや注意を促すメッセージの色。
• warning-content: warning 上で使用する前景コンテンツカラー。
• error: エラー、危険、破壊的操作のメッセージの色。
• error-content: error 上で使用する前景コンテンツカラー。

daisyUI カラールール

1. daisyUI は、Tailwind CSS のカラーにセマンティックなカラー名を追加します。
2. 他の Tailwind CSS カラー名と同様に、ユーティリティクラスで daisyUI のカラー名を使用します。例えば、bg-primary は背景にプライマリカラーを使用します。
3. 各 daisyUI カラー名の値は変数です。そのため、色はテーマに応じて変わります。
4. daisyUI のカラー名と一緒に dark: を使用しないでください。
5. 可能な限り、daisyUI のカラー名のみを使用してください。これにより、色がテーマに応じて自動的に変更されます。
6. red-500 などの Tailwind CSS カラー名を使用すると、その色はすべてのテーマで同じままです。
7. primary などの daisyUI カラー名を使用すると、その色はテーマに応じて変わります。
8. テキストに Tailwind CSS カラー名を使用しないでください。例えば、bg-base-100 上の text-gray-800 は、ダークテーマでは bg-base-100 が暗いため読みづらくなります。
9. *-content カラーは、関連するカラーとの明確なコントラストが必要です。
10. ページの大部分には base-* カラーを使用します。すべての要素にはデフォルトのバリアントを使用します。primary は、ページ上で最も重要な要素にのみ使用します。1回だけ使用してください。
11. まれに、コンテンツがすべてのテーマで同じ色を維持する必要がある場合は、Tailwind CSS カラーを使用できます。例えば、text-error の代わりに text-red-500 を使用できます。SVG アイコンやチャートでは、固定色が必要になる場合があります。

テーマの有効化と適用

デフォルト設定では、light と dark が有効になります。daisyUI プラグインで、指定したテーマ、すべてのテーマ、または組み込みテーマなしを選択します。

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

• themes: all; を使用すると、すべての組み込みテーマが有効になります。
• themes: false; を使用すると、すべての組み込みテーマが無効になります。通常は、カスタムテーマのみを定義する前に行います。
• <html> またはネストされた要素に data-theme="THEME_NAME" を追加します。深さ制限なくテーマをネストできます。

<html data-theme="dark">
  <section data-theme="light">
    <div data-theme="retro">Nested theme</div>
  </section>
</html>

daisyUI カスタムテーマとカスタムカラー

Tailwind CSS、daisyUI、およびカスタム daisyUI テーマを含む CSS ファイルは、次の構造になります。

@import "tailwindcss";
@plugin "daisyui";
@plugin "daisyui/theme" {
  name: "mytheme";
  default: true; /* デフォルトとして設定 */
  prefersdark: false; /* デフォルトのダークモードとして設定 (prefers-color-scheme:dark) */
  color-scheme: light; /* ブラウザ提供 UI の色 */

  --color-base-100: oklch(98% 0.02 240);
  --color-base-200: oklch(95% 0.03 240);
  --color-base-300: oklch(92% 0.04 240);
  --color-base-content: oklch(20% 0.05 240);
  --color-primary: oklch(55% 0.3 240);
  --color-primary-content: oklch(98% 0.01 240);
  --color-secondary: oklch(70% 0.25 200);
  --color-secondary-content: oklch(98% 0.01 200);
  --color-accent: oklch(65% 0.25 160);
  --color-accent-content: oklch(98% 0.01 160);
  --color-neutral: oklch(50% 0.05 240);
  --color-neutral-content: oklch(98% 0.01 240);
  --color-info: oklch(70% 0.2 220);
  --color-info-content: oklch(98% 0.01 220);
  --color-success: oklch(65% 0.25 140);
  --color-success-content: oklch(98% 0.01 140);
  --color-warning: oklch(80% 0.25 80);
  --color-warning-content: oklch(20% 0.05 80);
  --color-error: oklch(65% 0.3 30);
  --color-error-content: oklch(98% 0.01 30);

  --radius-selector: 1rem; /* セレクターのボーダー半径 (checkbox, toggle, badge) */
  --radius-field: 0.25rem; /* フィールドのボーダー半径 (button, input, select, tab) */
  --radius-box: 0.5rem; /* ボックスのボーダー半径 (card, modal, alert) */
  /* --radius-* の推奨値: 0rem, 0.25rem, 0.5rem, 1rem, 2rem */

  --size-selector: 0.25rem; /* セレクターの基本サイズ (checkbox, toggle, badge)。意図的に大きくしない限り値は 0.25rem である必要があります。大きくする場合は 0.28125 または 0.3125 にできます。意図的に小さくする場合は 0.21875 または 0.1875 にできます。 */
  --size-field: 0.25rem; /* フィールドの基本サイズ (button, input, select, tab)。意図的に大きくしない限り値は 0.25rem である必要があります。大きくする場合は 0.28125 または 0.3125 にできます。意図的に小さくする場合は 0.21875 または 0.1875 にできます。 */

  --border: 1px; /* ボーダーサイズ。意図的に太くしない限り値は 1px である必要があります。太くする場合は 1.5px または 2px にできます。意図的に細くする場合は 0.5px にできます。 */

  --depth: 1; /* 0 または 1 のみ - コンポーネントに影と微妙な 3D 効果を追加します */
  --noise: 0; /* 0 または 1 のみ - コンポーネントに微妙なノイズ（グレイン）効果を追加します */
}

ルール

• 例にあるすべての CSS 変数を含める必要があります。
• 色は OKLCH、hex、または別の形式を使用できます。
• カスタムテーマを生成する場合は、例のコメントを含めないでください。コードのみを指定してください。

オプション: https://daisyui.com/theme-generator/ のビジュアルツールを使用して、カスタムテーマを作成できます。

組み込みテーマの変更

組み込みテーマ名を使用します。必要な値のみを変更します。daisyUI は他の値を継承します。

@plugin "daisyui/theme" {
  name: "light";
  default: true;
  --color-primary: blue;
  --color-secondary: teal;
}

カスタム CDN テーマの場合は、同じ変数をセレクターで定義します。セレクターは、選択した data-theme およびテーマコントローラーと一致する必要があります。

:root:has(input.theme-controller[value=mytheme]:checked),
[data-theme="mytheme"] {
  color-scheme: light;
  --color-primary: oklch(55% 0.3 240);
  /* 残りのカスタムテーマ変数を定義してください */
}

Tailwind の dark: バリアントを 1 つ以上の daisyUI テーマに追従させるには、カスタムバリアントを定義します。

@custom-variant dark (&:where([data-theme=night], [data-theme=night] *));