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 on Stackblitz 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: "normal" | "large" | ({ containerWidth, isTouch }: { containerWidth?: number, isTouch?: boolean }) => "normal" | "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. For more flexibility, a callback can be passed as a value that needs to return either of the two string values mentioned above. Inside that callback, two parameters are available. containerWidth returns the width of the HTML element into which the CE.SDK editor is being rendered. A potential use case is rendering different scalings on devices with a small width, like mobile phones. isTouch returns a boolean which indicates if the user agent supports touch input or not. For example, this can be used to render the large UI scaling if a device has touch input to make it easier to target the UI elements with a finger.

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: