Skip to content

Theming and brand colors

One brand color, button tokens, and recipes for shadcn/ui and your own dashboard.

On this page

Set one color and the whole editor follows it, in light and dark: pressed toolbar buttons, dialog buttons, links, the focus ring, the caret, the text selection and the gradient edge of the card. Try it with the brand color in the playground on the home page.

One color

ui.brand takes any CSS color and picks black or white for the text on brand buttons by contrast. The brand attribute does the same on <owe-editor>. In plain CSS, set --owe-brand (and --owe-on-brand if white does not read well) on .owe, on a wrapper or on :root.

createEditor({ element, ui: { brand: "#e11d48" } });

Derived tokens

Everything else comes from the brand with color-mix(). Set any of these yourself and yours wins.

Tokens derived from the brand
TokenDerived as
--owe-primaryThe brand. Pressed toolbar buttons and primary dialog buttons.
--owe-primary-hoverThe primary color mixed 15% toward black.
--owe-accentLink and text color: the brand mixed 30% toward black in light, 40% toward white in dark.
--owe-focus, --owe-caretThe accent color.
--owe-selectionThe brand at 22% opacity in light, 45% in dark.
--owe-gradientFrom --owe-brand to --owe-brand-2. ui.brand sets a lighter tint as the second color.

Button tokens

These restyle the buttons, the toolbar and the card without touching a selector. Set them on .owe or on any element around it, such as your dashboard wrapper. Unset, they use the default shown.

Button and toolbar tokens
TokenDefaultStyles
--owe-btn-color--owe-iconToolbar button icon and text.
--owe-btn-bgtransparentToolbar button background.
--owe-btn-hover-color, --owe-btn-hover-bg--owe-text, --owe-surface-2Button on hover.
--owe-btn-active-color, --owe-btn-active-bg--owe-on-accent, --owe-primaryA pressed or toggled button.
--owe-btn-primary-bg, --owe-btn-primary-color--owe-primary, --owe-on-accentThe primary button in dialogs (Insert, Apply).
--owe-btn-radius--owe-radius-smCorners of buttons and menu items.
--owe-toolbar-bg, --owe-toolbar-border--owe-chrome, --owe-border-subtleToolbar, find bar and status bar.
--owe-editor-border, --owe-editor-radius--owe-border-subtle, --owe-radiusBorder and corners of the card.

A dark toolbar over a light editing area, with smaller corners:

CSS
.owe {
  --owe-toolbar-bg: #0f172a;
  --owe-toolbar-border: #0f172a;
  --owe-btn-color: #e2e8f0;
  --owe-btn-hover-bg: #1e293b;
  --owe-btn-hover-color: #ffffff;
  --owe-btn-radius: 6px;
  --owe-editor-radius: 8px;
}

Match your dashboard

Point the tokens at the variables your design system already defines, for example shadcn/ui as below. The editor never declares a token itself, so yours wins wherever you set it, and the tokens read your variables when they are used, so the editor follows your light and dark themes without a script. Also set theme to dark when your dashboard is dark, so links, selection and native controls match.

CSS
/* shadcn/ui (Tailwind v4 variables) */
.owe {
  --owe-brand: var(--primary);
  --owe-brand-2: var(--primary);
  --owe-on-brand: var(--primary-foreground);
  --owe-bg: var(--card);
  --owe-text: var(--card-foreground);
  --owe-body: var(--card-foreground);
  --owe-chrome: var(--muted);
  --owe-surface: var(--popover);
  --owe-surface-2: var(--accent);
  --owe-field-bg: var(--background);
  --owe-muted: var(--muted-foreground);
  --owe-icon: var(--foreground);
  --owe-border-subtle: var(--border);
  --owe-popup-border: var(--border);
  /* input outlines need 3:1; shadcn's --border is lighter */
  --owe-border: color-mix(in oklab, var(--foreground) 45%, var(--card));
  --owe-radius: var(--radius);
  --owe-radius-sm: calc(var(--radius) - 2px);
  --owe-font: inherit;
}

Changing the theme later

<owe-editor> follows changes to its theme and brand attributes. For createEditor(), call setTheme() on its UI. It replaces the whole theme, so pass everything you want to keep. The playground on the home page does exactly this.

TypeScript
import { getUI } from "open-wysiwyg-editor";

getUI(editor)?.setTheme({ theme: "dark", brand: "#e11d48", tokens: { radius: "8px" } });

Check the contrast

The editor cannot choose colors for you. --owe-accent keeps 4.5:1 on white for typical brands, but a very pale brand needs an explicit --owe-accent, and pressed buttons need 3:1 against the toolbar.

Edit this page on GitHub