# Custom annotation theme You can change the look of annotations by overriding the default design with [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables). This is the lightest-touch way to customize their appearance, without providing a custom template or view. 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](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#Inheritance_of_custom_properties), 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 `` section of your page, but in this case, you will need to use a more specific CSS selector than `:root` (for example, ``). > **Note** > > Check out the [color sheet](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-ui/theme/globals/_colors.css) for the full list of customizable colors. You can also browse [other files](https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-ui/theme/globals) with CSS Variables in CKEditor 5. ```css /* 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-comment-content-font-family: Arial; --ck-comment-content-font-size: 13px; --ck-comment-content-font-color: #333; --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: --- Full index of the CKEditor 5 documentation: [llms.txt](../../../../llms.txt)