# Theming

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

For seamless visual integration of CKBox in your application, you might want to adjust the colors of the UI or create a custom skin.

<a id="adjusting-colors">

## 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.

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

<a id="list-of-available-color-variables">

### 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.           |

<a id="built-in-themes">

## 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-options.md#theme) configuration option.

<a id="dark-theme">

### Dark theme

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

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

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

---

Full index of the CKBox documentation: [llms.txt](../../../llms.txt)