Themes

Clepit themes are driven by CSS variables. Set theme: "auto" | "light" | "dark", or pass explicit themeOverrides.

theme

TypeScript

// EditorConfig / RendererConfig
theme?: 'auto' | 'light' | 'dark'

The auto preset follows the operating system colour scheme via prefers-color-scheme and switches live on change.

TypeScript

import { Editor } from '@clepit/core';

Editor.create({ containerId: 'editor', theme: 'auto' });

ThemeTokens

All 22 tokens are optional. Anything you omit falls back to the selected preset.

Token	Controls
bg	Main background of the editor / renderer
surface	Secondary surface: command panels, mode-bar headers
surface2	Tertiary surface: hover-menu backgrounds
text	Primary text colour
textMuted	Secondary text: labels, fallback paragraphs
textSubtle	Subtle text: dim elements, date markers
border	Primary border colour
borderSubtle	Subtle border: non-emphasis dividers
primary	Primary brand colour: buttons, anchor links
primaryHover	Primary hover colour: button hover/focus state
primaryBg	Tinted primary background: focus rings
marker	Text highlight colour: marker inline tool
selectionBg	Text selection background
blockHighlightBg	Active block background
success	Success state text / icon colour
successBg	Tinted success background: notification boxes
warning	Warning state text / icon colour
warningBg	Tinted warning background
error	Error state text / icon colour
errorBg	Tinted error background
info	Info state text / icon colour
infoBg	Tinted info background

themeOverrides

Override any subset of tokens. The editor injects them as CSS variables scoped to its container.

TypeScript

// themeOverrides accepts separate light and dark token sets.
// Both keys are optional — omit one to use the preset for that mode.
Editor.create({
  containerId: 'editor',
  theme: 'auto',
  themeOverrides: {
    light: {
      primary: '#5b5bff',
      primaryHover: '#4747e6',
      bg: '#ffffff',
      text: '#0a0a0a',
    },
    dark: {
      primary: '#7c7cff',
      primaryHover: '#9494ff',
      bg: '#161b22',
      text: 'rgba(240, 246, 252, 0.92)',
    },
  },
});

CSS custom properties

Every token maps to a --clepit-* variable scoped to the editor container. You can read or extend them from your own stylesheet.

CSS

/* Every ThemeToken maps to a --clepit-* CSS variable.
   Variables are scoped to .clepit-editor, .clepit-renderer-content, and body[data-clepit-theme]. */

--clepit-bg
--clepit-surface
--clepit-surface-2
--clepit-text
--clepit-text-muted
--clepit-text-subtle
--clepit-border
--clepit-border-subtle
--clepit-primary
--clepit-primary-hover
--clepit-primary-bg
--clepit-marker
--clepit-selection-bg
--clepit-block-highlight-bg
--clepit-success
--clepit-success-bg
--clepit-warning
--clepit-warning-bg
--clepit-error
--clepit-error-bg
--clepit-info
--clepit-info-bg

CSS

#editor {
  color: var(--clepit-text);
  background: var(--clepit-bg);
  --my-surface: var(--clepit-surface-2);
  border: 1px solid var(--clepit-border);
}

Per-block styles and classNames

RendererConfig.styles pipes framework-free CSS properties directly into the component root element. RendererConfig.classNames adds extra CSS classes without touching built-in styles. Both can be combined.

TypeScript

import { Renderer } from '@clepit/core';
import type { BlockStyles, BlockClassNames } from '@clepit/core';

const styles: BlockStyles = {
  // alert block — keyed by variant
  alert: {
    error: { borderRadius: '8px', padding: '12px 16px' },
    info: { borderRadius: '8px', padding: '12px 16px' },
  },
  // header block — keyed by level
  header: {
    h1: { fontFamily: 'Georgia, serif' },
    h2: { fontFamily: 'Georgia, serif' },
  },
  // paragraph block — flat CSSProperties
  paragraph: { lineHeight: '1.75' },
  // table block — sub-element keys
  table: { cell: { padding: '8px 12px' } },
  // code block — sub-element keys
  code: { container: { borderRadius: '6px' } },
};

const classNames: BlockClassNames = {
  paragraph: 'prose-paragraph',
  header: { h1: 'prose-h1', h2: 'prose-h2' },
  alert: { info: 'alert-info', error: 'alert-error' },
};

Renderer.create({ containerId: 'output', data, styles, classNames });

Subscribe to runtime token changes. Useful for syncing surrounding UI with editor theme switches.

TypeScript

import { StyleManager } from '@clepit/core';

const unsubscribe = StyleManager.subscribe(theme => {
  // theme is 'light' | 'dark' — sync surrounding UI
  document.documentElement.setAttribute('data-theme', theme);
});

// later — clean up when the component unmounts
unsubscribe();

Providing themeOverrides per mount lets the same app ship multiple differently-themed editors on the same page.