Theming

Theming customizes the editor UI’s visual appearance to match the product it is embedded in. Colors, fonts, sizing, panel chrome, and surface elevations are all configurable through built-in themes for quick setup or CSS custom properties for full brand alignment. Theming only affects the editor UI: it does not change how designs render or how exported output looks. That is the engine’s job.

The most common reason to theme: a product team is embedding CE.SDK inside an application that already has its own design system. The editor needs to feel native to that application, not like a third-party tool dropped into the middle of a branded UI.

CE.SDK ships three themes out of the box. By default the editor uses the light theme.

• light is the default, with a standard light background and dark UI elements.
• dark swaps to a dark background with light UI elements, suited for media-heavy workflows and dark-themed host applications.
• system follows the user’s operating system preference and updates whenever the system theme changes.

The setting can be applied at initialization or switched at runtime, so the editor follows the same dark-mode toggle the host application uses.

Three scale modes control the size of UI elements.

• normal is the standard desktop sizing.
• large increases element sizes, margins, and fonts. Useful for touch devices and accessibility contexts.
• modern is a refined color palette with unified elevation surfaces and improved visual hierarchy.

Scale can also be set through a callback function that receives the container width and a boolean indicating touch support. This is what lets the editor adapt its UI density based on viewport and device without maintaining separate configurations.

The built-in themes are a starting point. For full visual control, CE.SDK exposes its UI through CSS custom properties scoped to the ubq-public class. Custom themes are defined using CSS selectors that combine the root class with theme and scale attributes, which lets different styles apply to different combinations of theme and scale.

Typography is customizable both globally (one CSS variable controls all UI text) and at granular level: distinct tokens exist for headlines and labels, each exposing font family, size, weight, letter spacing, and line height independently.

A built-in theme generator is also available in the editor’s Settings panel. It generates a complete theme file from three base colors, which is a quick starting point for brand customization without writing CSS by hand.

The decision to theme is usually about product-fit.

• White-label integrations. The editor needs to feel native to the host application’s brand. Theming aligns colors, typography, and surface treatments with the surrounding UI so users do not feel like they crossed into a different product when they opened the editor.
• Accessibility. The large scale mode increases UI element sizes and margins, making the editor easier to use for users with visual or motor impairments and for touch-first interfaces where small targets are hard to hit precisely.
• Multi-platform consistency. Integrations deploying CE.SDK across web, mobile web, and desktop can use the responsive scale callback to serve the appropriate UI density per context.

See role for the permission side of editor configuration, and dock for the UI surface that often gets the most theming attention.