颜色

如何使用 SENSOROUI 的颜色体系？

介绍

SENSOROUI 可以完全进行主题化和颜色化，你可以不再使用普通颜色工具类的方式：

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

建议使用更有语义的颜色工具类：

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

每一个颜色名字都有 CSS 变量，每一个 daisyUI 的主题都可以应用到这些颜色类上。

收益

当我们设计接口时，不再使用随机的颜色，而使用更有含义的名字。我们通过例如 primary、Secondary 来定义我们的调色盘颜色。我们只在我们的接口里使用这些特定的颜色。通过使用这些更有语义的颜色，主题的实现变得更容易。你不需要为每一个元素定义黑暗模式的颜色，并且你不再受限于只有一套白天/黑暗模式的主题。你可以有多种主题，每一个主题的本质就是一些 CSS 变量。

daisyUI 颜色名

你可以在你的主题里或者工具类里使用这些颜色名字。

颜色名+描述	每一种主题是否必须实现	使用样例
primary Primary color	required	Class name: `bg-primary` CSS variable: `oklch(var(--p))`
primary-content Foreground content color to use on primary color	optional Will be a readable tone of primary if not specified	Class name: `bg-primary-content` CSS variable: `oklch(var(--pc))`

secondary Secondary color	required	Class name: `bg-secondary` CSS variable: `oklch(var(--s))`
secondary-content Foreground content color to use on secondary color	optional Will be a readable tone of secondary if not specified	Class name: `bg-secondary-content` CSS variable: `oklch(var(--sc))`

accent Accent color	required	Class name: `bg-accent` CSS variable: `oklch(var(--a))`
accent-content Foreground content color to use on accent color	optional Will be a readable tone of accent if not specified	Class name: `bg-accent-content` CSS variable: `oklch(var(--ac))`

neutral Neutral color	required	Class name: `bg-neutral` CSS variable: `oklch(var(--n))`
neutral-content Foreground content color to use on neutral color	optional Will be a readable tone of neutral if not specified	Class name: `bg-neutral-content` CSS variable: `oklch(var(--nc))`

base-100 Base color of page, used for blank backgrounds	required	Class name: `bg-base-100` CSS variable: `oklch(var(--b1))`
base-200 Base color, a little darker	optional Will be a darker tone of base-100 if not specified	Class name: `bg-base-200` CSS variable: `oklch(var(--b2))`
base-300 Base color, even more darker	optional Will be a darker tone of base-200 if not specified	Class name: `bg-base-300` CSS variable: `oklch(var(--b3))`
base-content Foreground content color to use on base color	optional Will be a readable tone of base-100 if not specified	Class name: `bg-base-content` CSS variable: `oklch(var(--bc))`

info Info color	optional Will be a default blue color if not specified	Class name: `bg-info` CSS variable: `oklch(var(--in))`
info-content Foreground content color to use on info color	optional Will be a readable tone of info if not specified	Class name: `bg-info-content` CSS variable: `oklch(var(--inc))`
success Success color	optional Will be a default green color if not specified	Class name: `bg-success` CSS variable: `oklch(var(--su))`
success-content Foreground content color to use on success color	optional Will be a readable tone of success if not specified	Class name: `bg-success-content` CSS variable: `oklch(var(--suc))`
warning Warning color	optional Will be a default orange color if not specified	Class name: `bg-warning` CSS variable: `oklch(var(--wa))`
warning-content Foreground content color to use on warning color	optional Will be a readable tone of warning if not specified	Class name: `bg-warning-content` CSS variable: `oklch(var(--wac))`
error Error color	optional Will be a default red color if not specified	Class name: `bg-error` CSS variable: `oklch(var(--er))`
error-content Foreground content color to use on error color	optional Will be a readable tone of error if not specified	Class name: `bg-error-content` CSS variable: `oklch(var(--erc))`

如何使用

有一些组件类会有可以进行选择颜色的修饰类。例如：:

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

或者:

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

就像在 Tailwind 的原生颜色名字一样，你也可以在工具类里使用这些颜色名字。下面是可以使用颜色名字的工具类：

bg-{COLOR_NAME}
to-{COLOR_NAME}
via-{COLOR_NAME}
from-{COLOR_NAME}
text-{COLOR_NAME}
ring-{COLOR_NAME}
fill-{COLOR_NAME}
caret-{COLOR_NAME}
stroke-{COLOR_NAME}
border-{COLOR_NAME}
divide-{COLOR_NAME}
accent-{COLOR_NAME}
shadow-{COLOR_NAME}
outline-{COLOR_NAME}
decoration-{COLOR_NAME}
placeholder-{COLOR_NAME}
ring-offset-{COLOR_NAME}