Theming
For seamless visual integration of CKBox in your application, you might want to adjust the colors of the UI or create a custom skin.
# Adjusting colors
CKBox exposes several CSS variables that allow controlling the color palette of the whole application. All the colors used in the default skin are derived from the five base colors: action, neutral, danger, warning, and success. Overriding each of these colors is as simple as setting its HSL values to the appropriate CSS variables.
The most dominant color of the CKBox UI is defined by the action color. By adjusting the hue and saturation of this color, you can change the colors of the CKBox palette using just two CSS variables.
.ckbox {
--ckbox-action-h: 214;
--ckbox-action-s: 100%;
}
Adding the above CSS snippet to your application will configure CKBox to use UI colors you have configured using sliders.
# List of available color variables
You can control the hue and the saturation of each base color using the CSS variables listed in the table below.
| Color | CSS variables | Description |
|---|---|---|
action |
--ckbox-action-h--ckbox-action-s |
Base of the most dominant color used for buttons, icons, sliders, etc. |
neutral |
--ckbox-neutral-h--ckbox-neutral-s |
Color used for neutral backgrounds. |
success |
--ckbox-success-h--ckbox-success-s |
Color used for success messages. |
warning |
--ckbox-warning-h--ckbox-warning-s |
Color used for warnings. |
danger |
--ckbox-danger-h--ckbox-danger-s |
Color used for notifications about risky actions and errors. |
# Built-in themes
CKBox comes with an additional built-in dark theme. To use it, you have to add the appropriate stylesheet to your webpage. The active theme can be set using the theme configuration option.
# Dark theme
<link rel="stylesheet" href="https://cdn.ckbox.io/ckbox/2.6.1/styles/themes/dark.css">
CKBox.mount(document.querySelector('#ckbox'), {
tokenUrl: 'https://your.token.url',
theme: 'dark'
});