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. 使用 daisyUI 色彩名稱的實用類別，就如同使用其他 Tailwind CSS 色彩名稱一樣。例如，bg-primary 會將主要色彩設為背景。
3. 每個 daisyUI 色彩名稱的值都是一個變數。因此，色彩可以隨著主題改變。
4. 不要對 daisyUI 色彩名稱使用 dark:。
5. 如果可能，只使用 daisyUI 色彩名稱。這樣色彩就能隨著主題自動改變。
6. 如果你使用 Tailwind CSS 色彩名稱（例如 red-500），其色彩在所有主題中都保持不變。
7. 如果你使用 daisyUI 色彩名稱（例如 primary），其色彩會隨主題變化。
8. 避免在文字上使用 Tailwind CSS 色彩名稱。例如，在深色主題中，text-gray-800 搭配 bg-base-100 會因為 bg-base-100 是深色而無法閱讀。
9. *-content 色彩必須與其相關色彩有清晰的對比。
10. 頁面大部分區域使用 base-* 色彩。所有元素使用預設變體。primary 僅用於頁面上最重要的元素，且僅使用一次。
11. 在少數情況下，如果內容必須在所有主題中保持相同色彩，可以使用 Tailwind CSS 色彩。例如，可以使用 text-red-500 代替 text-error。對於 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">嵌套主題</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; /* 選擇器（核取方塊、切換開關、徽章）的邊框圓角 */
  --radius-field: 0.25rem; /* 欄位（按鈕、輸入框、選單、頁籤）的邊框圓角 */
  --radius-box: 0.5rem; /* 盒子（卡片、模態框、警示框）的邊框圓角 */
  /* --radius-* 的建議值：0rem, 0.25rem, 0.5rem, 1rem, 2rem */

  --size-selector: 0.25rem; /* 選擇器（核取方塊、切換開關、徽章）的基礎尺寸。除非我們故意要讓選擇器變大，否則值必須為 0.25rem。如果需要變大，可以使用 0.28125 或 0.3125。如果我們故意讓選擇器變小，可以使用 0.21875 或 0.1875 */
  --size-field: 0.25rem; /* 欄位（按鈕、輸入框、選單、頁籤）的基礎尺寸。除非我們故意讓欄位變大，否則值必須為 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、十六進位或其他格式。
• 如果你產生自訂主題，請不要包含範例中的註解。只提供程式碼。

可選：使用 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: 變體跟隨一個或多個 daisyUI 主題，請定義一個自訂變體：

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