主题

为了在您的应用程序中无缝地视觉集成 CKBox，您可能希望调整 UI 的颜色或创建自定义皮肤。

# 调整颜色

CKBox 公开了几个 CSS 变量，允许控制整个应用程序的颜色调色板。默认皮肤中使用的所有颜色都源于五个基本颜色：action、neutral、danger、warning 和 success。覆盖每个颜色就像将它的 HSL 值设置为相应的 CSS 变量一样简单。

CKBox UI 的最主要颜色由 action 颜色定义。通过调整该颜色的色调和饱和度，您可以使用两个 CSS 变量更改 CKBox 调色板的颜色。

色调
饱和度

.ckbox {
	--ckbox-action-h: 214;
	--ckbox-action-s: 100%;
}

将以上 CSS 代码段添加到您的应用程序中将配置 CKBox 使用您使用滑块配置的 UI 颜色。

您可以使用下表中列出的 CSS 变量控制每个基本颜色的色调和饱和度。

颜色	CSS 变量	描述
`action`	`--ckbox-action-h` `--ckbox-action-s`	用于按钮、图标、滑块等的主要颜色的基色。
`neutral`	`--ckbox-neutral-h` `--ckbox-neutral-s`	用于中性背景的颜色。
`success`	`--ckbox-success-h` `--ckbox-success-s`	用于成功消息的颜色。
`warning`	`--ckbox-warning-h` `--ckbox-warning-s`	用于警告的颜色。
`danger`	`--ckbox-danger-h` `--ckbox-danger-s`	用于有关风险操作和错误的通知的颜色。

CKBox 附带一个额外的内置 dark 主题。要使用它，您必须将相应的样式表添加到您的网页中。可以使用 theme 配置选项设置活动主题。

<link rel="stylesheet" href="https://cdn.ckbox.io/ckbox/2.5.1/styles/themes/dark.css">

CKBox.mount(document.querySelector('#ckbox'), {
    tokenUrl: 'https://your.token.url',
    theme: 'dark'
});