Bootstrap的色彩调色板在v5.3.0中持续扩展并变得更加细腻。我们新增了文本和背景颜色的变量,以及主题颜色。这些新颜色可以通过Sass和CSS变量提供(但不包括我们的颜色映射或实用类),明确目标是让用户更容易在明暗等多种颜色模式中进行自定义。这些新变量被全局设置并调整为我们的新深色模式,而原有主题颜色保持不变。下面是颜色预览地址。
https://v5.bootcss.com/docs/customize/color/
secondarytertiary{color}-bg-subtle{color}-border-subtle{color}-text:root
以 为 的颜色表示在 和 颜色模式中使用的数值。例如, 。-rgbred, green, bluergb()rgba()rgba(var(--bs-secondary-bg-rgb), .5)
小心!我们新的次要和三级颜色,以及现有的次要主题色,以及浅色和深色主题色,可能会有些混淆。预计这会在第六版中得到解决。
| 描述 | 样板 | 变量 |
|---|---|---|
| 正文——默认的前景色(颜色)和背景,包括组件。 | --bs-body-color--bs-body-color-rgb | |
--bs-body-bg--bs-body-bg-rgb | ||
次要——使用较轻的文字选项。使用分隔器和显示禁用组件状态的选项。colorbg | --bs-secondary-color--bs-secondary-color-rgb | |
--bs-secondary-bg--bs-secondary-bg-rgb | ||
第三阶段——使用更轻的文字选项。使用为悬浮状态、重音和油井设计背景的选项。colorbg | --bs-tertiary-color--bs-tertiary-color-rgb | |
--bs-tertiary-bg--bs-tertiary-bg-rgb | ||
| 重点——对于高对比度文本。背景不适用。 | --bs-emphasis-color--bs-emphasis-color-rgb | |
边境——用于组成边界、分隔线和规则。用来和背景混合,背景有明暗。--bs-border-color-translucentrgba() | --bs-border-color--bs-border-color-rgb | |
| 小学——主题颜色,用于超链接、焦点样式以及组件和表单的主动状态。 | 小学 | --bs-primary--bs-primary-rgb |
背景 细腻 | --bs-primary-bg-subtle | |
边界微妙 | --bs-primary-border-subtle | |
正文 | --bs-primary-text | |
| 成功——主题颜色用于积极或成功的行动和信息。 | 成功 | --bs-success--bs-success-rgb |
背景 细腻 | --bs-success-bg-subtle | |
边界微妙 | --bs-success-border-subtle | |
正文 | --bs-success-text | |
| 危险——主题色用于错误和危险动作。 | 危险 | --bs-danger--bs-danger-rgb |
背景 细腻 | --bs-danger-bg-subtle | |
边界微妙 | --bs-danger-border-subtle | |
正文 | --bs-danger-text | |
| 警告——主题颜色用于非破坏性警告信息。 | 警告 | --bs-warning--bs-warning-rgb |
背景 细腻 | --bs-warning-bg-subtle | |
边界微妙 | --bs-warning-border-subtle | |
正文 | --bs-warning-text | |
| 信息 —主题色用于中性且信息丰富的内容。 | 信息 | --bs-info--bs-info-rgb |
背景 细腻 | --bs-info-bg-subtle | |
边界微妙 | --bs-info-border-subtle | |
正文 | --bs-info-text | |
| 光——新增主题选项,颜色对比度较低。 | 光 | --bs-light--bs-light-rgb |
背景 细腻 | --bs-light-bg-subtle | |
边界微妙 | --bs-light-border-subtle | |
正文 | --bs-light-text | |
| 黑暗——新增主题选项,用于更高对比度的颜色。 | 黑暗 | --bs-dark--bs-dark-rgb |
背景 细腻 | --bs-dark-bg-subtle | |
边界微妙 | --bs-dark-border-subtle | |
正文 | --bs-dark-text |