Custom UI Colors

Release 3.2.2507+

Use CSS variables to freely customize editor UI colors. Works in modern browsers (Chrome, Edge, Safari, Firefox). Older browsers without CSS variable support (e.g. Internet Explorer) won't pick up these styles.

How to Configure

Override the variables in a <style> tag, scoped under the .se class:

<!-- index.html -->
<style>
.se {
  --se-editor-border: #39b6b8;       /* editor outer border */
  --se-editor-contents-bg: #fdfdfd;  /* editing area background */

  --se-toolbar-fg: #4f898a;          /* toolbar / resize bar icon & text */
  --se-toolbar-bg: #f4f4f4;          /* toolbar / resize bar background */
  --se-toolbar-border: #39b6b8;      /* toolbar / resize bar border */

  --se-dialog-border: #4f898a;       /* dialog & popup border */
}
</style>

Available CSS Variables

Variables are grouped by UI surface. Each screenshot highlights the part of the UI that the group controls.

Editor

--se-editor-border, --se-editor-contents-fg, --se-editor-contents-bg, --se-editor-shadow, --se-editor-header-shadow

Menu bar

--se-menu-bar-fg, --se-menu-bar-bg, --se-menu-bar-hover-bg, --se-menu-bar-active-bg, --se-menu-items-*

Toolbar / resize bar

--se-toolbar-fg, --se-toolbar-bg, --se-toolbar-border, --se-toolbar-active-bg, --se-toolbar-hover-bg, --se-toolbar-dropdown-menu-*

Tooltip

--se-tooltip-fg, --se-tooltip-bg, --se-tooltip-border, --se-tooltip-shadow

Dialog & popup

--se-dialog-title-fg, --se-dialog-tab-menu-*, --se-dialog-fg, --se-dialog-bg, --se-dialog-border, --se-dialog-button-*, --se-dialog-shadow

Dialog UI components

--se-ui-component-fg, --se-ui-component-bg, --se-ui-component-border, --se-ui-component-focus-border, --se-ui-component-placeholder, --se-ui-component-active-bg, --se-ui-component-hover-bg, --se-ui-component-point-*, --se-ui-component-menu-*

Ruler

--se-ruler-division, --se-ruler-number, --se-ruler-bg, --se-ruler-active-bg

Selection & mobile handle

--se-selection, --se-formula-selection, --se-multi-selection-bg, --se-multi-selection-border, --se-mobile-handle

Table handle

--se-table-handle-bar, --se-table-handle-bar-active, --se-table-handle-select-all, --se-table-handle-resize, --se-table-handle-text, --se-table-formula-label

Drawing object handle

--se-resize-handle-border, --se-resize-handle-dot, --se-resize-handle-rotation, --se-resize-handle-adj, --se-resize-handle-connector

Alt image / video

--se-alternative-image-fg, --se-alternative-image-bg, --se-alternative-image-border

Layer property button

--se-property-button-fg, --se-property-button-bg, --se-property-button-border