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. The Value column shows example values.

Editor

1.00

ItemDescriptionValue
--se-editor-borderEditor outer border color#39b6b8
--se-editor-contents-fgEditing area text color#39b6b8
--se-editor-contents-bgEditing area background color#39b6b8
--se-editor-shadowEditor outer shadow0px 0px 1px 1px rgba(0, 0, 0, 0.8)
--se-editor-header-shadowEditor header (menu / toolbar area) shadow0px 0px 1px 1px rgba(0, 0, 0, 0.8)

1.00

ItemDescriptionValue
--se-menu-bar-fgMenu bar text color#39b6b8
--se-menu-bar-bgMenu bar background color#39b6b8
--se-menu-bar-hover-bgMenu bar button color on mouse over#39b6b8
--se-menu-bar-active-bgMenu bar button color when active#39b6b8
--se-menu-items-borderBorder color of the menu list layer shown when a menu is opened#39b6b8
--se-menu-items-fgIcon & text color of the menu list layer shown when a menu is opened#39b6b8
--se-menu-items-bgBackground color of the menu list layer shown when a menu is opened#39b6b8
--se-menu-items-hover-bgButton color on mouse over in the menu list layer shown when a menu is opened#39b6b8
--se-menu-items-active-bgButton color when active in the menu list layer shown when a menu is opened#39b6b8
--se-menu-items-shadowShadow of the menu list layer shown when a menu is opened0px 0px 1px 1px rgba(0, 0, 0, 0.8)

Toolbar / resize bar

Toolbar / resize bar Toolbar dropdown menu

ItemDescriptionValue
--se-toolbar-fgToolbar & resize bar icon & text color#39b6b8
--se-toolbar-bgToolbar & resize bar background color#39b6b8
--se-toolbar-borderToolbar & resize bar border color#39b6b8
--se-toolbar-active-bgToolbar button / dropdown color when active#39b6b8
--se-toolbar-hover-bgToolbar button / dropdown color on mouse over#39b6b8
--se-toolbar-dropdown-menu-fgIcon & text color of the menu list layer shown when a toolbar dropdown is opened#39b6b8
--se-toolbar-dropdown-menu-bgBackground color of the menu list layer shown when a toolbar dropdown is opened#39b6b8
--se-toolbar-dropdown-menu-borderBorder color of the menu list layer shown when a toolbar dropdown is opened#39b6b8
--se-toolbar-dropdown-menu-active-bgButton color when active in the menu list layer shown when a toolbar dropdown is opened#39b6b8
--se-toolbar-dropdown-menu-hover-bgButton color on mouse over in the menu list layer shown when a toolbar dropdown is opened#39b6b8
--se-toolbar-dropdown-menu-shadowShadow of the menu list layer shown when a toolbar dropdown is opened0px 0px 1px 1px rgba(0, 0, 0, 0.8)

Tooltip

1.00

ItemDescriptionValue
--se-tooltip-fgTooltip text color#39b6b8
--se-tooltip-bgTooltip background color#39b6b8
--se-tooltip-borderTooltip border color#39b6b8
--se-tooltip-shadowTooltip shadow0px 0px 1px 1px rgba(0, 0, 0, 0.8)

Dialog & popup

Dialog Popup

ItemDescriptionValue
--se-dialog-title-fgDialog title text color#39b6b8
--se-dialog-tab-menu-fgTab menu icon & text color in the dialog & popup#39b6b8
--se-dialog-tab-menu-borderTab menu border color in the dialog & popup#39b6b8
--se-dialog-tab-menu-hover-bgTab menu color on mouse over in the dialog & popup#39b6b8
--se-dialog-tab-menu-non-active-fgInactive tab menu icon & text color in the dialog & popup#39b6b8
--se-dialog-tab-menu-non-active-bgInactive tab menu background color in the dialog & popup#39b6b8
--se-dialog-fgDialog & popup text color#39b6b8
--se-dialog-bgDialog & popup background color#39b6b8
--se-dialog-borderDialog & popup border color#39b6b8
--se-dialog-button-fgBottom button text color in the dialog & popup#39b6b8
--se-dialog-button-bgBottom button background color in the dialog & popup#39b6b8
--se-dialog-button-borderBottom point button border color in the dialog & popup#39b6b8
--se-dialog-button-point-fgBottom point button text color in the dialog & popup#39b6b8
--se-dialog-button-point-bgBottom point button background color in the dialog & popup#39b6b8
--se-dialog-shadowDialog & popup shadow0px 0px 1px 1px rgba(0, 0, 0, 0.8)
--se-dialog-shadow-reversedDialog & popup shadow (when flipped)0px 0px 1px 1px rgba(0, 0, 0, 0.8)

Dialog UI components

Dialog UI component Dialog UI component

ItemDescriptionValue
--se-ui-component-fgIcon & text color of the dialog & popup UI component#39b6b8
--se-ui-component-bgBackground color of the dialog & popup UI component#39b6b8
--se-ui-component-borderBorder color of the dialog & popup UI component#39b6b8
--se-ui-component-focus-borderBorder color of the dialog & popup UI component when focused#39b6b8
--se-ui-component-placeholderPlaceholder color of the dialog & popup UI component#39b6b8
--se-ui-component-active-bgBackground color of the dialog & popup UI component when active#39b6b8
--se-ui-component-hover-bgBackground color of the dialog & popup UI component on mouse over#39b6b8
--se-ui-component-point-active-bgPoint background color of the dialog & popup UI component when active#39b6b8
--se-ui-component-point-active-borderPoint border color of the dialog & popup UI component when active#39b6b8
--se-ui-component-menu-fgIcon & text color of the dialog & popup UI component menu list layer#39b6b8
--se-ui-component-menu-bgBackground color of the dialog & popup UI component menu list layer#39b6b8
--se-ui-component-menu-borderBorder color of the dialog & popup UI component menu list layer#39b6b8
--se-ui-component-menu-active-bgButton background color when active in the dialog & popup UI component menu list layer#39b6b8
--se-ui-component-menu-hover-bgButton background color on mouse over in the dialog & popup UI component menu list layer#39b6b8
--se-ui-component-menu-shadowShadow of the dialog & popup UI component menu list layer0px 0px 1px 1px rgba(0, 0, 0, 0.8)

Ruler

1.00

ItemDescriptionValue
--se-ruler-divisionRuler division line color#39b6b8
--se-ruler-numberRuler number color#39b6b8
--se-ruler-bgRuler inactive area color#39b6b8
--se-ruler-active-bgRuler active area color#39b6b8

Selection & mobile handle

1.00

ItemDescriptionValue
--se-selectionText selection colorrgba(57, 182, 184, 0.4)
--se-formula-selectionBorder color of the table formula range selection#39b6b8
--se-multi-selection-bgBackground color of the multi-selection of AP (absolute position) objectsrgba(57, 182, 184, 0.2)
--se-multi-selection-borderBorder color of the multi-selection of AP (absolute position) objects#39b6b8
--se-mobile-handleMobile selection handle color#39b6b8

Table handle

Table handle Table handle

ItemDescriptionValue
--se-table-handle-barTable handle bar color#39b6b8
--se-table-handle-bar-activeActive table handle bar color#39b6b8
--se-table-handle-select-allSelect-all button color of the table handle#39b6b8
--se-table-handle-resizeResize button color of the table handle#39b6b8
--se-table-handle-textColumn (A, B, C, ...) / row (1, 2, 3, ...) header text color of the table handle#39b6b8
--se-table-formula-labelMarker color of table cells that contain a formula#39b6b8

Drawing object handle

1.00

ItemDescriptionValue
--se-resize-handle-borderDrawing object handle border color#39b6b8
--se-resize-handle-dotResize grip color of the drawing object handle#39b6b8
--se-resize-handle-rotationRotation grip color of the drawing object handle#39b6b8
--se-resize-handle-adjShape adjustment point grip color of the drawing object handle#39b6b8
--se-resize-handle-connectorLine shape connection point color of the drawing object handle#39b6b8

Alt image / video

1.00

ItemDescriptionValue
--se-alternative-image-fgAlt image / video icon color#39b6b8
--se-alternative-image-bgAlt image / video background color#39b6b8
--se-alternative-image-borderAlt image / video border color#39b6b8

Layer property button

1.00

ItemDescriptionValue
--se-property-button-fgLayer property button icon color#39b6b8
--se-property-button-bgLayer property button background color#39b6b8
--se-property-button-borderLayer property button border color#39b6b8