颜色

如何使用 daisyUI 颜色？

简介

daisyUI 是完全可主题化和可着色的，因此，建议使用语义化的颜色实用工具类，而不是像下面这样使用常量颜色实用工具类：

bg-green-500
bg-orange-600
bg-blue-700
等等。

建议使用语义化的颜色实用工具类，例如：

bg-primary
bg-secondary
bg-accent
等等。

每个颜色名称都包含 CSS 变量，并且每个 daisyUI 主题在应用时都会将颜色值应用于实用工具类。

优势

语义化的颜色名称更有意义，因为在设计界面时，我们不会随意使用颜色。我们会定义一个特定的调色板，其中包含诸如 primary、secondary 等名称，并且我们只在界面中使用这些特定的颜色。此外，使用语义化的颜色名称可以更轻松地进行主题化。您不必为每个元素定义暗黑模式颜色，并且您不会仅限于浅色/深色主题。您可以拥有多个可用的主题，并且每个主题都只是一些 CSS 变量。

使用硬编码颜色值为 div 设置主题的示例

使用硬编码颜色名称

这是一个浅色背景上的硬编码深色文本，它需要双倍的类名来支持暗黑模式。

<div class="bg-zinc-100">
  <div class="bg-zinc-50 border-zinc-200 text-zinc-800">
    This is a hardcoded dark text on a light background,
    it needs double the amount of class names to support dark mode.
  </div>
</div>

🪦 固定颜色名称，基于值硬编码
🚫 没有自动暗黑模式
😵‍💫 您必须为每个元素添加暗黑模式颜色
💸 高维护成本
🐢 开发缓慢
😩 难以更改主题
⛓️‍💥 高度不一致的可能性
😰 您仅限于 2 个主题：浅色和深色

使用语义化的颜色名称

这是浅色背景上的深色文本，在暗黑模式下会切换为深色背景上的浅色文本。

<div class="bg-base-200">
  <div class="bg-base-100 border-base-300 text-base-content">
    This is dark text on a light background,
    which switches to light text on a dark background in dark mode.
  </div>
</div>

🎯 语义化名称，基于颜色的用途
✨ 自动暗黑模式
🌓 无需添加任何暗黑模式类名
🤑 添加主题的零维护成本
🚀 快速开发
⚡️ 易于更改主题
📘 所有颜色都基于设计系统保持一致
♾️ 无限主题，易于切换

所有 daisyUI 颜色名称列表

您可以在主题或实用工具类中使用这些颜色名称。

颜色名称	CSS 变量	使用场景
primary	`--color-primary`	主要品牌颜色，您品牌的主色
primary-content	`--color-primary-content`	要在其上使用的前景色内容`primary`颜色
secondary	`--color-secondary`	次要品牌颜色，您品牌的可选次要颜色
secondary-content	`--color-secondary-content`	要在其上使用的前景色内容`secondary`颜色
accent	`--color-accent`	强调品牌颜色，您品牌的可选强调色
accent-content	`--color-accent-content`	要在其上使用的前景色内容`accent`颜色
neutral	`--color-neutral`	中性深色，用于 UI 的非饱和部分
neutral-content	`--color-neutral-content`	要在中性色上使用的前景色内容
base-100	`--color-base-100`	页面基础表面颜色，用于空白背景
base-200	`--color-base-200`	基础颜色，更深的阴影，用于创建海拔高度
base-300	`--color-base-300`	基础颜色，更深的阴影，用于创建海拔高度
base-content	`--color-base-content`	要在其上使用的前景色内容`基础`颜色
info	`--color-info`	信息颜色，用于信息性/帮助性消息
info-content	`--color-info-content`	要在其上使用的前景色内容`info`颜色
success	`--color-success`	成功颜色，用于成功/安全消息
success-content	`--color-success-content`	要在其上使用的前景色内容`success`颜色
warning	`--color-warning`	警告颜色，用于警告/注意消息
warning-content	`--color-warning-content`	要在其上使用的前景色内容`warning`颜色
error	`--color-error`	错误颜色，用于错误/危险/破坏性消息
error-content	`--color-error-content`	要在其上使用的前景色内容`error`颜色

如何使用

一些 daisyUI 组件带有修饰符类名，该修饰符类名将应用颜色。例如:

<button class="btn btn-primary">Button</button>

或:

<input type="checkbox" class="checkbox checkbox-secondary" />

这些组件会自动设置正确的背景颜色、文本颜色、边框颜色等，因此您无需手动设置这些颜色。例如btn-primary设置primary背景和边框的颜色，并自动设置primary-content文本的颜色作为默认值。如果您想更改颜色，可以使用实用工具类自定义它们。

您还可以在实用工具类中使用颜色名称，就像 Tailwind 的原始颜色名称一样。这些是可与颜色名称一起使用的实用工具类

CSS 类
`bg-{颜色名称}`	也可在 CDN 上使用/colors/properties.css
`text-{颜色名称}`	也可在 CDN 上使用/colors/properties.css
`border-{颜色名称}`	也可在 CDN 上使用/colors/properties.css
`from-{颜色名称}`	也可在 CDN 上使用/colors/properties-extended.css
`via-{颜色名称}`	也可在 CDN 上使用/colors/properties-extended.css
`to-{颜色名称}`	也可在 CDN 上使用/colors/properties-extended.css
`ring-{颜色名称}`	也可在 CDN 上使用/colors/properties-extended.css
`fill-{颜色名称}`	也可在 CDN 上使用/colors/properties-extended.css
`stroke-{颜色名称}`	也可在 CDN 上使用/colors/properties-extended.css
`shadow-{颜色名称}`	也可在 CDN 上使用/colors/properties-extended.css
`outline-{颜色名称}`	也可在 CDN 上使用/colors/properties-extended.css
`divide-{颜色名称}`
`accent-{颜色名称}`
`caret-{颜色名称}`
`decoration-{颜色名称}`
`placeholder-{颜色名称}`
`ring-offset-{颜色名称}`