Custom annotation theme

This is the simplest way to change the look of annotations. Using the power of CSS variables, it is really easy to override the default design of comments. You can undo this 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 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 (for example, <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.

Every day, we work hard to keep our documentation complete. Have you spotted outdated information? Is something missing? Please report it via our issue tracker.

With the release of version 42.0.0, we have rewritten much of our documentation to reflect the new import paths and features. We appreciate your feedback to help us ensure its accuracy and completeness.