Theming

Give the editor your brand’s colors with the colors prop.

The three color roles: surface is the editor's body, accent paints Save, controls paints the value rings and the ruler's needle

The Colors Prop

import { EmbedEditor } from '@embededitor/full/react';

const BrandedEditor = ({ src }: { src: string }) => (
  <div style={{ height: 600 }}>
    <EmbedEditor
      colors={{ accent: '#6366f1', surface: '#64748b' }}
      src={src}
    />
  </div>
);

export default BrandedEditor;

import { mountEditor } from '@embededitor/full/standalone';

mountEditor(document.getElementById('editor'), {
  colors: { accent: '#6366f1', surface: '#64748b' },
  src: '/photos/sunset.jpg'
});

Give one base color per role. A role you leave out keeps its default.

The Three Roles

Role	What it paints	Default
`accent`	Your brand: Save, Annotate while on, Choose File, selections and snap marks, the annotations’ default color.	iOS yellow, `#facc15`
`controls`	The value controls: rings, the ruler’s needle, the center marker, a slider’s handle.	iOS yellow, `#facc15`
`surface`	The editor’s body: backgrounds, text, lines, the crop mask.	Zinc

If you set only accent, the controls stay yellow. Set controls too to recolor them.

How Colors Apply

Each base color becomes the 500 step of a full 50 to 950 scale the editor builds.
Save’s text turns dark or light to stay readable on the accent.
Accepted values: hex, rgb(), hsl() and CSS color names.

colors is the only way to theme the editor. Your page’s CSS, its variables included, never recolors it, so a scale and the text on it always match. Custom properties such as --ee-accent-500 set on your page, on a wrapper or on the editor’s host element have no effect.

Invalid Colors

Any other value is an INVALID_PROPS error that names the role, for example colors.accent. See Errors. To set the color new annotations start with, use annotationColor.

Your Logo

logo and logoText show your brand left of the toolbar. They work in every edition: Free, Lite and Full.

Editor.tsx

<EmbedEditor
	logo='https://example.com/logo.svg'
	logoText='Lume Studio'
	src={src}
/>

Prop	What it does
`logo`	An image, as an `http(s):`, `data:` or `blob:` URL.
`logoText`	Your name as text: alone, or after the `logo` image. One line, cut with an ellipsis where it doesn’t fit.

If the logo image fails to load, the name shows alone.

Get Started

Frameworks

Ways to Show It

Features

Customization

Saving

Resources

The Colors Prop

The Three Roles

How Colors Apply

Invalid Colors

Your Logo

​The Colors Prop

​The Three Roles

​How Colors Apply

​Invalid Colors

​Your Logo

The Colors Prop

The Three Roles

How Colors Apply

Invalid Colors

Your Logo