CKEditor Ecosystem Documentation
Search
Report an issue
Home/CKEditor 5/Features

guideCustom annotation theme

This is the simplest way to alter the look of annotations for CKEditor 5 collaboration features. Using the power of CSS variables, it is really easy to override the default design of comments. This action can be done by adding an extra .css file.

CSS Variables in comments added to the document created in CKEditor 5 WYSIWYG editor.

The image above shows you which variables are responsible for every component of the default annotation view.

# Example of comments customization with CSS variables

With the inheritance of CSS variables you can change the default :root values of the variables in the .ck-sidebar scope. You can easily override these properties with a .css file or place your customizations directly into the <head> section of your page, but in this case you will need to use a more specific CSS selector than :root (e.g. <body>).

Check out the color sheet for the full list of customizable colors. You can also browse other files with CSS variables in CKEditor 5.

/* Change the default yellow color of the comment marker in the content to green. */
:root {
    --ck-color-comment-marker: hsl(127, 98%, 83%);
    --ck-color-comment-marker-active: hsl(127, 98%, 68%);
}

.ck-sidebar {
    --ck-color-comment-background: #ecf5f0;
    --ck-color-comment-separator: #64ca6d;
    --ck-color-comment-remove-background: #eccbcb;

    --ck-color-comment-count: #807e81;

    --ck-color-annotation-icon: #0f5c2f;
    --ck-color-annotation-info: #1eb35c;

    --ck-annotation-button-size: 0.85em;

    --ck-user-avatar-background: #239855;
}

/* You can even change the appearance of a single element. */
.ck-sidebar .ck-comment__wrapper:first-of-type {
    --ck-color-annotation-info: #8e9822;
    --ck-user-avatar-background: #8e9822;
}

The examples above will generate the following designs for comments:

Custom CSS variables in comments added to the document created in CKEditor 5 WYSIWYG editor.