openCode - Next.js 标准配色规则 (daisyUI 5)

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. 不要将 dark: 与 daisyUI 颜色名称一起使用。
5. 如果可能，请仅使用 daisyUI 颜色名称。这样颜色可以随主题自动变化。
6. 如果使用 Tailwind CSS 颜色名称（例如 red-500），它在所有主题中都会保持相同的颜色。
7. 如果使用 daisyUI 颜色名称（例如 primary），它的颜色会随主题而变化。
8. 避免为文本使用 Tailwind CSS 颜色名称。例如，在 bg-base-100 上使用 text-gray-800 在暗色主题下会变得难以阅读，因为 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; 禁用所有内置主题。通常在仅定义自定义主题之前执行此操作。
• 将 data-theme="THEME_NAME" 添加到 <html> 或嵌套元素上。主题可以无深度限制地嵌套。

<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] *));