Skip to content

Styling

Cascade layers, the --owe-* design tokens and light and dark themes.

On this page

The editor is isolated from your page's CSS: resets, element rules and utility classes don't reach into it, and only a more specific selector or !important overrides its rules. Theme the editor by setting design tokens.

Stylesheets

open-wysiwyg-editor/style.css has the editor, its UI and its content styles. content.css has only the content styles, for published pages: wrap the saved HTML in <div class="owe-content-root">. Each framework package ships the same files under its own name, for example @open-wysiwyg-editor/vue/style.css.

Design tokens

Set tokens on .owe (or :root). This site themes the editor like this:

CSS
.owe {
  --owe-brand: #0066ff;
  --owe-font: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --owe-radius: 24px;
}
Common design tokens
TokenTypeWhat it controls
--owe-fontfont stackUI and content font.
--owe-font-size, --owe-line-heightlengthBase size of the content.
--owe-radius, --owe-radius-smlengthCorner radius of the editor and its controls.
--owe-bg, --owe-chrome, --owe-surfacecolorBackgrounds of the content area, the toolbar and panels.
--owe-text, --owe-mutedcolorText colors.
--owe-border, --owe-border-subtlecolorBorders. Keep --owe-border at 3:1 against the background.
--owe-brand, --owe-brand-2, --owe-on-brandcolorThe one brand color, the second color of the gradient edge, and the text on brand fills. See the Theming guide.
--owe-accent, --owe-primary, --owe-focuscolorDerived from the brand: links and text, the fill of pressed buttons, and the focus ring.

Light and dark

The editor ships a light and a dark token set. Set ui.theme to light, dark or auto (the default, which follows the system), and override tokens under .owe[data-theme="dark"] for different values per theme.

Edit this page on GitHub