Skip to content

Theming

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.
import CreativeEditorSDK from 'https://cdn.img.ly/packages/imgly/cesdk-js/1.51.0/index.js';


const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-js/1.51.0/assets',
  theme: 'light', // 'light' or 'dark'
  ui: {
    scale: ({ containerWidth, isTouch }) => {
      if (containerWidth < 600 || isTouch) {
        return 'large';
      } else {
        return 'normal';
      }
    }, // or 'normal' or 'large'
  },
  callbacks: { onUpload: 'local' }, // Enable local uploads in Asset Library.
};


CreativeEditorSDK.create('#cesdk_container', config).then(async instance => {
  // Do something with the instance of CreativeEditor SDK, for example:
  // Populate the asset library with default / demo asset sources.
  instance.addDefaultAssetSources();
  instance.addDemoAssetSources({ sceneMode: 'Design' });
  await instance.createDesignScene();
});

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 below on how to provide your theme.

elements: {
  panels: {
    settings: true;
  }
}

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.

.ubq-public[data-ubq-theme='dark'][data-ubq-scale='normal'] {
  --ubq-canvas: hsl(230.27, 52.11%, 13.92%);
  --ubq-elevation-1: hsl(230.4, 52.08%, 18.82%);
  --ubq-elevation-2: hsl(229.69, 52.46%, 23.92%);
  --ubq-foreground-default: hsla(0, 0%, 100%, 0.9);
  --ubq-foreground-light: hsla(0, 0%, 100%, 0.7);
  --ubq-foreground-info: hsla(0, 0%, 100%, 0.5);
  --ubq-interactive-default: hsl(229.87, 52.38%, 28.82%);
  --ubq-interactive-hover: hsl(229.69, 52.46%, 23.92%);
  --ubq-interactive-pressed: hsl(230.45, 52.38%, 16.47%);
  --ubq-input-default: hsl(234, 50%, 3.92%);
  --ubq-input-hover: hsl(228, 55.56%, 1.76%);
  --ubq-border-default: hsla(230, 52.17%, 63.92%, 0.1);
  --ubq-stroke-contrast-1: hsla(230, 52.17%, 63.92%, 0.08);
  --ubq-stroke-contrast-2: hsla(230, 52.17%, 63.92%, 0.25);
  --ubq-focus-outline: hsl(230.27, 52.11%, 13.92%);
  --ubq-overlay-default: hsla(230.27, 52.11%, 13.92%, 0.8);
  --ubq-foreground-active: hsla(210, 30%, 10%, 0.9);
  --ubq-interactive-active-default:
    linear-gradient(to bottom, hsla(0, 0%, 100%, 1), hsla(0, 0%, 100%, 0)),
    hsla(0, 0%, 100%, 0.88);
  --ubq-interactive-active-hover:
    linear-gradient(to bottom, hsla(0, 0%, 100%, 1), hsla(0, 0%, 100%, 0)),
    hsla(210, 100%, 95%, 0.98);
  --ubq-interactive-active-pressed:
    linear-gradient(to bottom, hsla(0, 0%, 100%, 1), hsla(0, 0%, 100%, 0)),
    hsla(0, 0%, 100%, 0.5);
  --ubq-notice-info: hsla(0, 0%, 100%, 1);
  --ubq-foreground-accent: hsl(0, 0%, 0%);
  --ubq-interactive-accent-default: hsl(0, 0%, 100%);
  --ubq-interactive-accent-hover: hsl(0, 0%, 100%);
  --ubq-interactive-accent-pressed: hsl(0, 0%, 95%);
  --ubq-focus-default: hsl(288.99, 0%, 92.5%);
  --ubq-notice-warning: hsl(37.45, 0%, 93.5%);
  --ubq-notice-error: hsl(311.23, 0%, 88.9%);
  --ubq-notice-success: hsl(166.23, 0%, 92.19%);


  --ubq-typography-headline-l-size: 16px;
  --ubq-typography-headline-l-line_height: 20px;
  --ubq-typography-headline-l-letter_spacing: 0.01em;
  --ubq-typography-headline-l-font_family: var(
    --ubq-typography-font_family,
    'Inter',
    sans-serif
  );
  --ubq-typography-headline-l-weight: 600;


  --ubq-typography-headline-m-size: 12px;
  --ubq-typography-headline-m-line_height: 16px;
  --ubq-typography-headline-m-letter_spacing: 0.03em;
  --ubq-typography-headline-m-font_family: var(
    --ubq-typography-font_family,
    'Inter',
    sans-serif
  );
  --ubq-typography-headline-m-weight: 600;


  --ubq-typography-label-m-size: 12px;
  --ubq-typography-label-m-line_height: 16px;
  --ubq-typography-label-m-letter_spacing: 0.02em;
  --ubq-typography-label-m-font_family: var(
    --ubq-typography-font_family,
    'Inter',
    sans-serif
  );
  --ubq-typography-label-m-weight: normal;


  --ubq-typography-label-s-size: 10px;
  --ubq-typography-label-s-line_height: 14px;
  --ubq-typography-label-s-letter_spacing: 0.02em;
  --ubq-typography-label-s-font_family: var(
    --ubq-typography-font_family,
    'Inter',
    sans-serif
  );
  --ubq-typography-label-s-weight: normal;


  --ubq-typography-body-m-size: 12px;
  --ubq-typography-body-m-line_height: 18px;
  --ubq-typography-body-m-letter_spacing: 0.02em;
  --ubq-typography-body-m-font_family: var(
    --ubq-typography-font_family,
    'Inter',
    sans-serif
  );
  --ubq-typography-body-m-weight: normal;


  --ubq-typography-input-m-size: 12px;
  --ubq-typography-input-m-line_height: 16px;
  --ubq-typography-input-m-letter_spacing: 0.02em;
  --ubq-typography-input-m-font_family: var(
    --ubq-typography-font_family,
    'Inter',
    sans-serif
  );
  --ubq-typography-input-m-weight: unset;


  --ubq-typography-button-m-size: 12px;
  --ubq-typography-button-m-line_height: 16px;
  --ubq-typography-button-m-letter_spacing: 0.02em;
  --ubq-typography-button-m-font_family: var(
    --ubq-typography-font_family,
    'Inter',
    sans-serif
  );
  --ubq-typography-button-m-weight: unset;
}

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: