Setting Editor User Interface Color
The editor UI color can be easily adjusted by the developer to match the look and feel of a website or an application where CKEditor 4 is embedded in.
Please note that this feature can only be used for editor skins that are compatible with the so-called “chameleon” feature. The skins created by CKSource, i.e. Moono-Lisa, Moono and Kama, already support it. If you are using a custom skin, you will need to define the CKEDITOR.skin.chameleon function in your skin.js file.
If you want to change the default UI color, you need to define the CKEDITOR.config.uiColor configuration setting which accepts an RGB color code.
For example, to change the CKEditor UI to the joyful green color that would match this article’s header, you could set the following editor configuration:
config.uiColor = '#66AB16';
This will cause the editor UI to assume the provided color, as visible below.
# User Interface Color Demo
The “Setting Editor UI Color” sample shows how the editor user interface color can be changed by using the configuration option.
# Related Features
Read more about changing the UI color by using the color picker tool in the Using the UI Color Picker article.