CKEditor 生态系统文档
Search
首页/CKBox/入门

guide主题

为了在您的应用程序中无缝地视觉集成 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 颜色。


of 2

# 可用颜色变量列表

您可以使用下表中列出的 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'
});