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
codeBg	Code block background.
codeText	Default text color inside code blocks.
codeBorder	Code block border.
codeGutter	Line number gutter color.
codeSelectionBg	Selected text background inside code blocks.
codeComment	Syntax color for comments.
codeKeyword	Syntax color for keywords.
codeString	Syntax color for strings.
codeNumber	Syntax color for numbers.
codeFunction	Syntax color for function names.
codeType	Syntax color for type names.
codePunctuation	Syntax color for punctuation.

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
--clepit-code-bg
--clepit-code-text
--clepit-code-border
--clepit-code-gutter
--clepit-code-selection-bg
--clepit-code-comment
--clepit-code-keyword
--clepit-code-string
--clepit-code-number
--clepit-code-function
--clepit-code-type
--clepit-code-punctuation

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.

Reference

Packages

Themes

theme

ThemeTokens

themeOverrides

CSS custom properties

Per-block styles and classNames