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.

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:

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

Choose the level by how far the change should reach.

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

: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 guide for how the editor theme tokens work and where to override them.

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

: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%);
}

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.

/* 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.