Editor Theming

The Elucim editor uses CSS custom properties (design tokens) for all UI chrome colors. Every color in the toolbar, inspector, timeline, and canvas overlay is driven by tokens — making the editor fully themeable.

Quick Theme Override

Pass a theme prop to <ElucimEditor> with your color overrides:

import { ElucimEditor } from '@elucim/editor';

function App() {
  return (
    <ElucimEditor
      theme={{
        accent: '#e040fb',
        bg: '#1e1e2e',
        surface: '#181825',
        fg: '#cdd6f4',
        border: '#45475a',
      }}
      style={{ width: '100vw', height: '100vh' }}
    />
  );
}

You only need to override the tokens you want to change — all others keep their defaults.

Available Tokens

Token	Default	Description
`accent`	`#4a9eff`	Primary accent — selection highlights, active buttons
`bg`	`#1a1a2e`	Editor background
`surface`	`#12122a`	Deeper surface (minimap, nested panels)
`panel`	`rgba(22,22,42,0.93)`	Floating panel backgrounds
`chrome`	`rgba(15,23,42,0.8)`	UI chrome — toolbar, timeline
`fg`	`#e0e0e0`	Primary foreground text
`text-secondary`	`#94a3b8`	Secondary text (labels)
`text-muted`	`#64748b`	Muted text (placeholders)
`text-disabled`	`#475569`	Disabled text
`border`	`#334155`	Panel borders, dividers
`border-subtle`	`#1e293b`	Subtle separators
`input-bg`	`#0f172a`	Input field backgrounds
`success`	`#34d399`	Success indicators
`info`	`#4fc3f7`	Info indicators
`error`	`#f87171`	Error indicators

Token Naming

Tokens accept either bare names or full CSS variable names:

// These are equivalent:
theme={{ accent: '#e040fb' }}
theme={{ '--elucim-editor-accent': '#e040fb' }}

All tokens resolve to CSS custom properties with the --elucim-editor- prefix.

Theme Presets

Dark (Default)

The editor ships with a dark theme inspired by VS Code’s dark modern palette. No configuration needed.

Dark theme (default)

Light

Pass { 'color-scheme': 'light' } in the editor theme to switch to light mode:

<ElucimEditor editorTheme={{ 'color-scheme': 'light' }} />

Light theme

<ElucimEditor
  theme={{
    accent: '#cba6f7',
    bg: '#1e1e2e',
    surface: '#181825',
    panel: 'rgba(30,30,46,0.93)',
    chrome: 'rgba(24,24,37,0.8)',
    fg: '#cdd6f4',
    'text-secondary': '#a6adc8',
    'text-muted': '#6c7086',
    border: '#45475a',
    'border-subtle': '#313244',
    'input-bg': '#11111b',
    success: '#a6e3a1',
    error: '#f38ba8',
  }}
/>

<ElucimEditor
  theme={{
    accent: '#88c0d0',
    bg: '#2e3440',
    surface: '#242933',
    panel: 'rgba(46,52,64,0.93)',
    chrome: 'rgba(59,66,82,0.8)',
    fg: '#eceff4',
    'text-secondary': '#d8dee9',
    'text-muted': '#81a1c1',
    border: '#4c566a',
    'border-subtle': '#3b4252',
    'input-bg': '#242933',
    success: '#a3be8c',
    error: '#bf616a',
  }}
/>

Programmatic Token Access

Use the token helpers to build custom UI that matches the editor theme:

`v(token)` — CSS Variable Reference

Returns a var(--token, fallback) string for use in inline styles:

import { v } from '@elucim/editor';

const style = {
  color: v('--elucim-editor-accent'),
  // → 'var(--elucim-editor-accent, #4a9eff)'

  borderColor: v('--elucim-editor-border'),
  // → 'var(--elucim-editor-border, #334155)'
};

`buildThemeVars(overrides)` — Generate CSS Variable Object

Merges user overrides with defaults:

import { buildThemeVars } from '@elucim/editor';

const vars = buildThemeVars({ accent: '#e040fb', bg: '#1e1e2e' });
// → {
//   '--elucim-editor-accent': '#e040fb',
//   '--elucim-editor-bg': '#1e1e2e',
//   '--elucim-editor-surface': '#12122a',
//   ... (all other defaults)
// }

`EDITOR_TOKENS` — Token Defaults

The full token registry:

import { EDITOR_TOKENS } from '@elucim/editor';
// { '--elucim-editor-accent': '#4a9eff', '--elucim-editor-bg': '#1a1a2e', ... }

`EDITOR_TOKENS_LIGHT` — Light Mode Defaults

Light-mode token registry. When you pass { 'color-scheme': 'light' } in the theme, buildThemeVars() uses these as the base instead of the dark defaults:

import { EDITOR_TOKENS_LIGHT } from '@elucim/editor';
// { '--elucim-editor-accent': '#2563eb', '--elucim-editor-bg': '#f1f5f9', ... }

You can also use EDITOR_TOKENS_LIGHT to build a fully custom light theme:

<ElucimEditor
  theme={{ 'color-scheme': 'light', accent: '#e040fb' }}
  style={{ width: '100vw', height: '100vh' }}
/>

`makeRotateCursor(color)` — Themed Rotation Cursor

Generates an SVG data-URL cursor for the rotation handle. CSS custom properties can’t be used inside url() data URIs, so this function takes a resolved color value:

import { makeRotateCursor } from '@elucim/editor';

const cursor = makeRotateCursor('#e040fb');
// → 'url("data:image/svg+xml,...") 12 12, pointer'

Semi-Transparent Variants

The editor uses color-mix() for translucent versions of tokens. Use the same technique in custom components:

/* 20% accent with 80% transparent */
background: color-mix(in srgb, var(--elucim-editor-accent) 20%, transparent);

/* 50% border */
border-color: color-mix(in srgb, var(--elucim-editor-border) 50%, transparent);

Using Tokens in Your Own CSS

Since the editor sets CSS custom properties on its root element, you can use them anywhere:

.my-custom-panel {
  background: var(--elucim-editor-panel);
  color: var(--elucim-editor-fg);
  border: 1px solid var(--elucim-editor-border);
  border-radius: 8px;
}

Next Steps

Back to the Editor Overview
Learn about the Inspector & Properties
See the full Editor API Reference