Skip to main content
Language:

Theming in CreativeEditor SDK

In this example, we will show you how to theme CreativeEditor SDK.

Explore a full code sample of the integration on CodeSandbox or view the code on GitHub.

Prerequisites#

Theming involves adjusting the colors, fonts, and sizes of the Editor UI. We have provisioned three levels of support for themes:

  1. Our built-in themes can be used out-of-the-box.
  2. Our theme generator can be used for quickly generating new themes based on three main colors
  3. A custom theme can be added by leveraging our theming API for the most detailed customization of our UI.

Using the built-in Themes and Scale#

We provide two built-in themes, which can be configured via

  • theme: string can be set to either dark or light. Both styles cover popular defaults offered by many current operating systems and apps. By default the 'dark' theme is active.
  • ui.scale: string can be set to either normal or large. In large mode, many UI elements, margins and fonts are increased in size. In addition to the stylistic choice, this improves readability and can aid users with slight visual or motor impairments, and users with small screens. By default, the 'normal' scale is applied.

Using the Theme Generator#

In order to get started quickly with building a custom theme, use our built-in theme generator found in the 'Settings' panel. Using only three base colors, this will generate a theme file that you can directly use. See Theming API on how to provide your theme.

Using a Custom Theme#

To provide a theme to the editor, link your themes index.css files or populate a <style> tag on the same page that includes the editor.

💡 We suggest to provide one light and one dark theme for the best possible user experience.

💡 We suggest to allow users to switch between large and normal scale, and to build your themes so that the desired scaling is taken into account.

Theming API#

Our theming API consists of several custom CSS properties, allowing you to adapt the look and feel of the editor to your needs.

To limit the scope of a theme to the CE.SDK Editor UI wrap any CSS properties in the ubq-public class.

The CE.SDK Editor supports switching between dark and light mode UI, which is a popular default in current operating systems. To adjust your theme based on that switch, use the data attribute data-ubq-theme.

The CE.SDK Editor also supports switching between a 'normal' and 'large' mode UI. The data attribute data-ubq-scale contains information on which scaling is currently requested:

File:
import 'https://cdn.img.ly/packages/imgly/cesdk-js/1.9.0/cesdk.umd.js';
let config = {
baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-js/1.9.0/assets',
theme: 'light', // 'light' or 'dark'
ui: {
scale: 'normal', // 'normal' or 'large'
elements: {
panels: {
settings: true
}
}
}
};
CreativeEditorSDK.init('#cesdk_container', config).then((instance) => {
/** do something with the instance of CreativeEditor SDK **/
});