CKEditor Ecosystem Documentation
Search
Home/CKBox/Getting started

guideTheming

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 two additional built-in themes: dark and aqua. To use one of these themes, 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/1.5.1/styles/themes/dark.css">

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

# Aqua theme

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

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

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

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