Guide

Theming

Customize editor appearance with CSS custom properties.

CSS Custom Properties

editable-kit uses CSS custom properties for theming. Override them on any parent element to change the look of editors, placeholders, and image crop overlays.

--ek-focus-ring-color Image editor focus ring. Default: #39f

--ek-placeholder-color Empty editor placeholder text. Default: #adb5bd

--ek-crop-overlay-color Image crop dark overlay. Default: rgba(0, 0, 0, 0.5)

--ek-crop-grid-color Image crop grid lines. Default: rgba(255, 255, 255, 0.5)

--ek-focus-ring-width Image editor focus ring thickness. Default: 1px

--ek-placeholder-font-style Placeholder text font style. Default: normal

--ek-image-placeholder-color Empty image placeholder text color. Default: currentColor

--ek-image-placeholder-bg Empty image placeholder background. Default: transparent

--ek-crop-grid-width Crop grid line thickness. Default: 1px

/* Override CSS custom properties on any parent element */
.my-editor {
  --ek-focus-ring-color: #6366f1;                  /* Image editor focus ring */
  --ek-focus-ring-width: 2px;                      /* Image editor ring width */
  --ek-placeholder-color: #94a3b8;                 /* Empty editor placeholder text */
  --ek-placeholder-font-style: italic;             /* Placeholder font style */
  --ek-image-placeholder-color: #94a3b8;           /* Image placeholder text */
  --ek-image-placeholder-bg: #f1f5f9;             /* Image placeholder background */
  --ek-crop-overlay-color: rgba(0, 0, 0, 0.6);    /* Image crop dark overlay */
  --ek-crop-grid-color: rgba(255, 255, 255, 0.4); /* Image crop grid lines */
  --ek-crop-grid-width: 2px;                      /* Image crop grid width */
}

All Variables Reference

Every CSS custom property available, organized by component.

/* All available CSS custom properties */
.my-editor {
  /* Text editors */
  --ek-placeholder-color: #94a3b8;        /* Placeholder text color */
  --ek-placeholder-font-style: italic;    /* Placeholder font style */

  /* Image editor */
  --ek-focus-ring-color: #6366f1;         /* Focus/hover ring color */
  --ek-focus-ring-width: 2px;             /* Focus/hover ring thickness */
  --ek-image-placeholder-color: #94a3b8;  /* Empty image placeholder text */
  --ek-image-placeholder-bg: #f1f5f9;    /* Empty image placeholder background */

  /* Image cropper */
  --ek-crop-overlay-color: rgba(0, 0, 0, 0.6);    /* Crop dark overlay */
  --ek-crop-grid-color: rgba(255, 255, 255, 0.4);  /* Crop grid line color */
  --ek-crop-grid-width: 2px;                       /* Crop grid line thickness */
}

Scoped Theming

Override properties on any parent element to scope themes to a specific section of your page. Child editors inherit the closest values.

Scoped Theme

<!-- Scope theme to a specific section -->
<div style="--ek-focus-ring-color: #6366f1; --ek-placeholder-color: #94a3b8;">
  <Editable.Root {editing}>
    {#snippet children({ save })}
      <Editable.Data key="themed" data={data}>
        {#snippet children({ text, image })}
          <h2>{@render text('title')}</h2>
          {@render image('cover', { maxWidth: 800, aspect: 16/9 })}
        {/snippet}
      </Editable.Data>
    {/snippet}
  </Editable.Root>
</div>

Image Styling

Customize the image editor's focus ring, placeholder, and crop overlay with dedicated variables.

/* Custom image editor styling */
.gallery-editor {
  --ek-focus-ring-color: #f59e0b;
  --ek-focus-ring-width: 2px;
  --ek-image-placeholder-color: #9ca3af;
  --ek-image-placeholder-bg: #f3f4f6;
  --ek-crop-overlay-color: rgba(0, 0, 0, 0.7);
  --ek-crop-grid-color: rgba(255, 255, 255, 0.6);
  --ek-crop-grid-width: 2px;
}

Tip. Use --ek-focus-ring-width: 0px to completely remove the image editor focus ring if your design doesn't need one.

Dark Mode

Combine CSS custom properties with media queries or class-based dark mode to adjust editor appearance for light and dark themes.

/* Tailwind v4 dark mode with CSS custom properties */
:root {
  --ek-focus-ring-color: #3b82f6;
  --ek-focus-ring-width: 1px;
  --ek-placeholder-color: #9ca3af;
  --ek-placeholder-font-style: normal;
  --ek-image-placeholder-color: #9ca3af;
  --ek-image-placeholder-bg: #f1f5f9;
  --ek-crop-overlay-color: rgba(0, 0, 0, 0.5);
  --ek-crop-grid-color: rgba(255, 255, 255, 0.5);
  --ek-crop-grid-width: 1px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ek-focus-ring-color: #60a5fa;
    --ek-focus-ring-width: 1px;
    --ek-placeholder-color: #6b7280;
    --ek-placeholder-font-style: normal;
    --ek-image-placeholder-color: #6b7280;
    --ek-image-placeholder-bg: #1e293b;
    --ek-crop-overlay-color: rgba(0, 0, 0, 0.7);
    --ek-crop-grid-color: rgba(255, 255, 255, 0.3);
    --ek-crop-grid-width: 1px;
  }
}

Tip. These properties inherit through the DOM, so you can set them on :root for global theming or on any parent element for scoped overrides.