Theming & Styling

Style Skins

ZynText includes four built-in style skins, set via the style option:

new ZynText(textarea, { style: 'default' });   // Clean, standard look
new ZynText(textarea, { style: 'bordered' });   // Prominent border
new ZynText(textarea, { style: 'minimal' });    // Borderless, seamless
new ZynText(textarea, { style: 'dark' });       // Dark background

Each skin adds a CSS class to the container: .zy-editor--style-bordered, .zy-editor--style-minimal, .zy-editor--style-dark.

Code Block Themes

Code blocks (<pre>) have two theme options:

new ZynText(textarea, { codeTheme: 'dark' });   // One Dark (default)
new ZynText(textarea, { codeTheme: 'light' });  // GitHub-style light

Both themes include the macOS-style header bar with traffic-light dots. The theme also affects the portable output HTML.

CSS Custom Properties

ZynText uses CSS custom properties for all colors, making it easy to customize. Override them on .zy-editor or use the --lp-* integration variables:

/* Custom accent color */
.zy-editor {
  --zy-accent: #e11d48;
  --zy-accent-muted: rgba(225, 29, 72, 0.15);
  --zy-border-focus: #e11d48;
}

/* Custom toolbar */
.zy-editor {
  --zy-toolbar-bg: #1e293b;
  --zy-toolbar-btn-hover: #334155;
  --zy-toolbar-btn-active-bg: #e11d48;
  --zy-toolbar-btn-active-color: #ffffff;
}

All CSS Variables

Dark Mode

ZynText auto-detects dark mode via the data-bs-theme="dark" attribute on <html> (Bootstrap 5.3+ convention). It observes changes via MutationObserver and emits the theme:change event.

For non-Bootstrap projects, override the CSS variables directly:

/* Dark mode overrides */
.dark-theme .zy-editor {
  --zy-bg: #1a1a2e;
  --zy-bg-elevated: #16213e;
  --zy-border: #2a2a4a;
  --zy-text: #e0e0e0;
  --zy-text-muted: #9e9e9e;
  --zy-toolbar-bg: #16213e;
  --zy-toolbar-btn-hover: #2a2a4a;
}

Integration Variables

When used inside a system that defines --lp-* CSS variables, ZynText automatically picks them up. This is used in the Larapen admin panel:

/* ZynText reads these automatically */
--lp-bg-elevated    → --zy-bg-elevated
--lp-border         → --zy-border
--lp-accent         → --zy-accent, --zy-border-focus
--lp-accent-muted   → --zy-accent-muted
--lp-text-primary   → --zy-text
--lp-text-muted     → --zy-text-muted, --zy-text-placeholder
--lp-bg-subtle      → --zy-toolbar-btn-hover
--lp-transition-fast→ --zy-transition
--lp-shadow-sm      → --zy-shadow
--lp-shadow-lg      → --zy-shadow-lg
--lp-danger         → --zy-danger

Portable Output

The HTML returned by getHTML() includes inline styles so it renders correctly without ZynText's CSS. This means content looks the same on any front-end page. Styles are applied to: paragraphs, headings, images, blockquotes, code blocks (with macOS header), tables, horizontal rules, and lists.