# CKEditor AI theme customization

You can change the colors of the CKEditor AI user interface by overriding its CSS custom properties (tokens). Most AI tokens default to a value of the editor theme, so CKEditor AI follows the changes you make to the editor theme. Set AI component tokens only to change single AI elements.

> **Unlock this feature with selected CKEditor Plans**
>
> Try all premium features – no credit card needed.
>
> [Sign up for a free trial ](https://portal.ckeditor.com/checkout?plan=free)[Select a Plan](https://ckeditor.com/pricing/)

<a id="demo">

## Demo

Switch between the themes below. The code block above the editor shows the exact CSS that the demo applies. Open the chat or run a review to see the AI accent color in more places.

**Theme:**

<a id="snippet-ai-theme-default">

Default

<a id="snippet-ai-theme-brand">

Brand color for the whole editor

<!-- 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="how-the-ai-tokens-are-organized">

## How the AI tokens are organized

The AI tokens sit on top of the editor theme in two layers:

* **AI color palette**: a short set of shared colors, such as `--ck-ai-accent-700-color` or `--ck-ai-neutral-600-color`. Each one points at a token of the editor theme, for example `--ck-ai-accent-700-color: var(--ck-color-base-action)`.
* **AI component tokens**: one token per element and property, named component-first, such as `--ck-ai-chat-icon-color` or `--ck-ai-review-progress-bar-fill-color`. Most of them point at the AI palette.

All AI tokens follow the [theme token naming](../../framework/deep-dive/ui/theme-token-naming.md) convention: `--ck-ai-<component>[-<state>]-<property>-color`. Type `--ck-ai-chat` in the browser developer tools to list every token of the chat.

All AI tokens are declared and resolved on `:root, :host`. This decides where an override takes effect, as described in [Where to put the overrides](#where-to-put-the-overrides). A few component tokens also get a different value in a specific state or variant of a component, for example `--ck-ai-model-selector-item-secondary-color` in the chat controls. A `:root` override does not reach such a variant, so override the token on that component instead.

<a id="recoloring-ckeditor-ai">

## Recoloring CKEditor AI

Choose the level by how far the change should reach.

<a id="follow-the-brand-color-of-the-editor">

### Follow the brand color of the editor

Override the accent tokens of the editor theme. The whole editor changes, and CKEditor AI follows, because its palette reads these tokens:

```css
:root {
	--ck-color-base-action: hsl(168, 76%, 34%);
	--ck-color-base-action-hover: hsl(168, 76%, 28%);
	--ck-color-base-action-disabled: hsl(168, 40%, 70%);
	--ck-color-base-active: hsl(168, 76%, 34%);
	--ck-color-base-active-focus: hsl(168, 76%, 28%);
	--ck-color-base-selected: hsl(168, 60%, 96%);
	--ck-color-base-selected-hover: hsl(168, 60%, 92%);

	/* Background of active tabs, including the AI tabs. */
	--ck-color-base-action-muted: hsl(168, 45%, 92%);
}
```

See the [Theme customization](../../framework/deep-dive/ui/theme-customization.md) guide for how the editor theme tokens work and where to override them.

<a id="change-a-single-element">

### Change a single element

Override the component token of that element. Find it in the browser developer tools on the element itself, or by its name prefix:

```css
:root {
	/* The muted icons and secondary text in the chat and other AI controls. */
	--ck-ai-chat-icon-color: hsl(0, 0%, 30%);

	/* Only the progress bar of a running review. */
	--ck-ai-review-progress-bar-fill-color: hsl(145, 63%, 42%);
}
```

<a id="where-to-put-the-overrides">

## Where to put the overrides

| Where                             | What works                                                                                                     |
| --------------------------------- | -------------------------------------------------------------------------------------------------------------- |
| `:root`                           | Every token: editor theme, AI palette, and AI component tokens, except the component variants described above. |
| `:host` (editor in a shadow root) | The same as `:root`, inside that shadow root.                                                                  |
| A narrower selector               | **Only AI component tokens.**                                                                                  |

The AI palette and the editor theme tokens resolve once, on `:root`. Overriding one of them on a narrower selector does not reach the component tokens that read it. To style one region, override the component tokens there. The AI interface renders in two places you can target:

* `.ck-ai-tabs`: the sidebar or overlay with the chat, review, and translate panels.
* `.ck-ai-body`: the panels and dropdowns opened from the AI tabs.

```css
/* Takes effect: a component token on a narrower selector. */
.ck-ai-tabs {
	--ck-ai-chat-icon-color: hsl(0, 0%, 30%);
}
```

Load your overrides after the editor styles, or the default declarations on `:root` win.

---

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