Theming

Echo Editor uses shadcn-vue design tokens (CSS variables) and Tailwind CSS 4 — but its stylesheet is fully isolated: every rule is confined to editor elements, so it never restyles your app, even if your app also uses Tailwind or shadcn-vue.

Props

<EchoEditor :extensions="extensions" theme="violet" :radius="0.75" :dark="isDark" />

• theme — zinc (default), slate, stone, gray, neutral, red, rose, orange, green, blue, yellow, violet
• radius — 0, 0.25, 0.5, 0.75, 1 (rem)
• dark — true / false; omit to follow the system preference

Built-in pickers

<script setup lang="ts">
import { ThemeToggle, ThemePicker } from 'vue-echo-editor'
</script>

<template>
  <ThemeToggle />  <!-- light / dark -->
  <ThemePicker />  <!-- colour + radius popover -->
</template>

useTheme

import { useTheme } from 'vue-echo-editor'

const { theme, borderRadius, isDark, setTheme, setBorderRadius, toggleTheme } = useTheme()
setTheme('blue')

The state is shared by every editor on the page, persisted in localStorage, and safe to call during SSR.

Custom CSS

Override tokens or target the content element:

.echo-editor {
  --primary: oklch(0.55 0.2 260);
  --radius: 0.375rem;
}

.echo-editor .EchoContentView {
  font-family: 'Inter', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.75;
}

.echo-editor .EchoContentView h1 {
  letter-spacing: -0.02em;
}

Style isolation

At build time every selector in vue-echo-editor/style.css is wrapped in a zero-specificity :where(.echo-editor-ui, .echo-editor-ui *) guard, and design tokens are defined on .echo-editor-ui instead of :root. The class is present on the editor root and on everything it portals to <body> (menus, popovers, dialogs, toasts, the slash menu).

• No global preflight, utilities or :root variables leak into your app.
• Specificity is unchanged, so your overrides above keep working.
• To render stored content outside the editor with editor typography, add both classes: <div class="echo-editor echo-editor-ui"><div class="EchoContentView" v-html="html" /></div>.

Useful selectors: .echo-editor (root), .echo-editor-focus (root while focused), .EchoContentView (content), .echo-toolbar (toolbar), .echo-action-button (toolbar buttons), .collaboration-carets__caret / __label (remote carets).