Although it was designed with versatility and the most common editor use cases in mind, some integrations may require adjustments to make it match the style guidelines of the ecosystem. This kind of customization can be done by importing an extra .css file and overriding the native CSS variables.

Below you can see a demo of an editor with the dark theme as a result of customizations described later in this guide:

Having cloned an existing build of CKEditor for a quick start, let’s use the full potential of CSS variables (custom properties). The customization explained in this guide will make the theme dark, with slightly bigger text and more rounded corners.

Check out the color sheet for a full list of customizable colors. You can also browse other files to learn about other useful tools.

The file containing custom variables will be named custom.css and it will look as below:

This file can be referenced directly in HTML after the <link> tag injected by the editor and its content will simply override the default CSS variables. CSS variables are natively supported in all major web browsers and just like any other CSS rule, they are prioritized in the order of precedence.

<linkrel="stylesheet"href="custom.css"type="text/css">

Alternatively, the style sheet can also be imported into a JavaScript file that is processed by webpack and the loaders, becoming a part of the build, e.g. an entry point of the application.