Theming

Match the editor to your brand with config.theme — a preset base, custom color tokens, border radius, and font family. For a live preview of every option, open the Playground.

When to use this

  • You want the editor to blend into your product's existing look.
  • You need light/dark parity, or a fully custom palette.
  • You're theming the UI chrome only — not the image content.

Built-in presets

Two presets ship out of the box:

// Dark theme (default)
<ImageEditor src="/photo.jpg" config={{ theme: { preset: "dark" } }} />

// Light theme
<ImageEditor src="/photo.jpg" config={{ theme: { preset: "light" } }} />

ThemeConfig reference

PropertyTypeDefaultDescription
preset"dark" | "light" | "custom""dark"Base preset.
colorsPartial<Record<ThemeColorKey, string>>—Override individual color tokens.
borderRadiusstringpresetGlobal border radius (e.g. "0.5rem").
fontFamilystringpresetGlobal UI font family.

Custom colors

Override any color token with the colors property. Values use HSL format without the hsl() wrapper (e.g. "262 83% 58%").

<ImageEditor
  src="/photo.jpg"
  config={{
    theme: {
      preset: "custom",
      colors: {
        background: "240 10% 4%",
        foreground: "0 0% 95%",
        primary: "262 83% 58%",
        "primary-foreground": "0 0% 100%",
        accent: "262 83% 58%",
      },
    },
  }}
/>

Available color keys

background, foreground, card, card-foreground, popover, popover-foreground, primary, primary-foreground, secondary, secondary-foreground, muted, muted-foreground, accent, accent-foreground, destructive, destructive-foreground, border, input, ring, chart-1, chart-2, chart-3, chart-4, chart-5, sidebar, sidebar-foreground, sidebar-primary, sidebar-primary-foreground, sidebar-accent, sidebar-accent-foreground, sidebar-border, sidebar-ring

Next steps