> ## Documentation Index
> Fetch the complete documentation index at: https://docs.embededitor.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Theming

> Match the editor to your brand with three base colors: accent, controls and surface.

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](https://mintcdn.com/feliperohde/YwW874QNSEhHkBQq/images/theming.webp?fit=max\&auto=format\&n=YwW874QNSEhHkBQq\&q=85\&s=72b1c8a69523e30921b552f365945b52)

## The Colors Prop

```tsx React theme={"dark"}
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;
```

```js JavaScript theme={"dark"}
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.

> [!NOTE]
>
> `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](https://docs.embededitor.com/api-reference/errors.md).

To set the color new annotations start with, use [`annotationColor`](https://docs.embededitor.com/api-reference/props#appearance).

## Your Logo

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

```tsx Editor.tsx theme={"dark"}
<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.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.