Editor Themes
Customize the appearance and branding of the Print Editor interface.
Editor Themes control the visual appearance of the Print Editor that customers use to design products. Each theme defines primary, surface, and accent colors, optional background images for the editor canvas and proof view, and custom CSS overrides for fine-grained styling control. You can create multiple themes and switch the active theme at any time -- the change takes effect immediately for all new editor sessions on the storefront.
Only one theme can be active per storefront at a time. At least one theme must always exist.
- From your Unified Admin, go to Print Editor > Editor Themes.
- The page displays all themes in a paginated grid with a search panel.
- To search themes, use the search panel at the top right. The search filters across the Name and In Use columns.
- To add a new theme, click the Add Theme button.
| Column | Description |
|---|
| Name | Display name of the theme. |
| In Use | Checkbox indicating whether this theme is currently active on the storefront. Only one theme can be active at a time. |
| Action | Three-dot menu with Apply, Edit, and Delete options. |
- Click the Action menu on any theme row and select Apply.
- The theme is immediately set as the active theme for the storefront. The In Use column updates to reflect the change.
- All new editor sessions on the storefront will use the applied theme. Existing open sessions will pick up the change on their next page load.
- Click the Action menu on a theme row and select Delete.
- The theme is permanently removed. You cannot delete the last remaining theme -- at least one must always exist.
- Click Add Theme to create a new theme, or click Edit from the action menu on an existing theme.
- The edit page displays a form with the following sections.
| Field | Description |
|---|
| Name | Required. The display name for the theme. Shown in the theme list and used as a label when editing custom CSS. |
| Field | Description |
|---|
| Primary color | The main brand color used throughout the editor interface. Controls the color of buttons, active tabs, selection highlights, drag handles, and ruler accents. Click the color swatch to open a color picker. Default: #0062cc. |
| Surface color | The background color for editor panels, toolbars, and sidebars. Defines the overall tone of the editor chrome. Default: #2f3946. |
| Accent color | A secondary color used for contrast elements such as outlined buttons and live-preview resize handles. Default: #ffffff. |
Controls the background behind the design canvas in the editor workspace.
| Field | Description |
|---|
| Tiled Background? | Checkbox. When enabled, the background image is tiled (repeated) across the editor workspace. When disabled, the image is displayed once. |
| Editor Background Image | Upload an image file (BMP, GIF, JPG, JPEG, PNG) to display behind the design canvas. Click the attach icon to upload, the edit icon to replace, or the delete icon to remove the current image. A preview is shown after upload. |
Controls the background behind the proof/preview view shown to customers.
| Field | Description |
|---|
| Tiled Background? | Checkbox. When enabled, the proof background image is tiled. When disabled, displayed once. |
| Proof Background Image | Upload an image file (BMP, GIF, JPG, JPEG, PNG) for the proof view background. Same upload/edit/delete controls as the editor background. |
The Custom CSS Override section lets you write CSS that is appended after the theme's generated stylesheet, giving you full control over the editor's appearance beyond the color settings.
- Click the Edit button to open the CSS editor dialog.
- The dialog opens a full-screen Monaco code editor (VS Code-style) with syntax highlighting for CSS.
- Edit the CSS and click Save to persist changes, or Cancel to discard.
- Use the fullscreen icon to toggle the editor between windowed and fullscreen modes.
The default custom CSS template includes documented CSS variables you can override:
| CSS Variable | Purpose |
|---|
--pn-control-color | Color scheme for inputs, dropdowns, and tabs (except purchase buttons). Values: primary or accent. |
--pn-selection-bg-color | Fill color of drag-selection rectangles on the canvas. |
--pn-selection-border-color | Border color of drag-selection rectangles. |
--pn-hover-stroke-color | Stroke color shown when hovering over canvas items. |
--pn-dieline-stroke-color | Stroke color for dieline panel outlines. |
--pn-dieline-text-color | Text color for dieline panel labels. |
--pn-ruler-bg-color | Background color of the canvas rulers. |
--pn-ruler-text-color | Text color of ruler measurement labels. |
--pn-handle-bg-color | Background color of item drag/resize handles. |
--pn-handle-border-color | Border color of item drag/resize handles. |
--pn-preview-handle-bg-color | Background color of live-preview resize handles. |
--pn-preview-handle-text-color | Text color of live-preview resize handles. |
- Click Save to commit the theme, or Cancel to return to the list without saving.
| Area | Effect |
|---|
| Editor appearance | The active theme's primary, surface, and accent colors are applied to the editor's Angular Material components via CSS custom properties. The editor's theme-builder component reads these values and updates the Material theme at runtime. |
| Canvas background | The editor background image (if set) is displayed behind the design canvas. When tiling is enabled, the image repeats across the workspace. |
| Proof background | The proof background image is shown behind the product preview/proof view that customers see before purchasing. |
| Custom CSS | The theme's generated stylesheet and custom CSS overrides are served as a single CSS file via /editor/editor.css. The editor handler concatenates the StyleSheet and CustomStyles fields and serves them with ETag-based caching. |
| Selection and handles | Canvas interaction elements (selection rectangles, hover strokes, drag handles, rulers) are styled via CSS variables that reference the theme's color palette. |
| Area | Effect |
|---|
| Theme serving | The storefront's EditorThemeHandler dynamically resolves the active theme for each editor CSS request by looking up the HtmlEditorTheme configuration key. This makes theme changes take effect immediately without deployment. |
| Caching | Theme CSS responses include ETag headers computed from the theme GUID, last-updated timestamp, and stylesheet length. Browsers cache the CSS and revalidate via If-None-Match, receiving 304 responses when the theme hasn't changed. |
| Store cloning | When a storefront is cloned, the active editor theme configuration is copied to the new store. |
- Color Pallets — define the color options customers see in the themed editor
- Product Setup — configure per-product editor settings that work with the active theme
- Editor Settings — set global editor defaults like rulers and proofing behavior
- Site Themes — brand the storefront alongside the editor theme
