Contribute to this guideReport an issue

Setting Editor UI Color Documentation

The editor UI color can be adjusted by the developer to match the look and feel of a website or an application.

In order to define the color of the user interface, use the config.uiColor configuration setting which accepts an RGB color code. In the editor instance below the UI color was set to the #CCEAEE RGB value.

Please note that this configuration option can only be used for editor skins that are compatible with the so-called "chameleon" feature, for example Moono-Lisa, Moono and Kama. Refer to the Setting Editor User Interface Color article to learn more about this feature.

Related Features

Get Sample Source Code

  • Setting editor UI color
    <!doctype html>
    <html lang="en">
    
    <head>
      <meta charset="utf-8">
      <meta name="robots" content="noindex, nofollow">
      <title>Setting editor UI color</title>
      <script src="https://cdn.ckeditor.com/4.24.0-lts/standard-all/ckeditor.js"></script>
    </head>
    
    <body>
      <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href=&quot;https://ckeditor.com/&quot;&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
      <script>
        CKEDITOR.replace('editor1', {
          uiColor: '#CCEAEE',
          removeButtons: 'PasteFromWord'
        });
      </script>
    </body>
    
    </html>