Guides
Theming
Recolor the editor with a theme object mapped to --atelier-* CSS custom properties — no CSS file required.
Theming
Pass a theme object to recolor the editor without writing CSS. Light tokens map to
--atelier-* custom properties; dark* tokens are applied when dark mode is active.
The theme object must be a stable reference — see Preventing the infinite update loop.
// Define once at module/class scope — never inline in template or JSX
const theme: Partial<AtelierTheme> = {
// Brand accent — buttons, focus rings, active toolbar states
brand: '#6366f1',
brandDark: '#4f46e5',
brandBg: '#eef2ff',
// Amber — RTL and dark-mode accent
amber: '#f59e0b',
amberDeep: '#d97706',
amberBg: '#fffbeb',
// Surfaces (light mode)
bg: '#ffffff',
bg2: '#f8fafc',
bg3: '#f1f5f9',
bgCode: '#1e293b',
// Borders (light mode)
border: '#e2e8f0',
border2: '#cbd5e1',
border3: '#94a3b8',
// Text (light mode)
text: '#0f172a',
textH: '#111827',
textUi: '#374151',
textMd: '#4b5563',
textSm: '#6b7280',
textPh: '#9ca3af',
// Danger
danger: '#ef4444',
dangerBg: '#fef2f2',
dangerBd: '#fecaca',
// Dark-mode surface overrides (applied when darkMode is active)
darkBg: '#0b1220',
darkBg2: '#111827',
darkBg3: '#1f2937',
darkBgCode: '#0d1117',
darkBorder: '#374151',
darkBorder2: '#4b5563',
darkBorder3: '#6b7280',
darkText: '#f1f5f9',
darkTextH: '#f8fafc',
darkTextUi: '#e2e8f0',
darkTextMd: '#cbd5e1',
darkTextSm: '#94a3b8',
darkTextPh: '#64748b'
};Bind the theme like any other prop, always from a stable field: Angular [theme]="myTheme",
Vue :theme="myTheme", React theme={THEME}, Vanilla theme: { ... } in the constructor
options.
Dark mode
Dark mode is toggled by the moon/sun toolbar button. Programmatic control:
- React:
darkMode={true}prop - Vue:
editorRef.value?.element?.toggleDarkMode()(the wrapper exposes the raw element) - Angular and Vanilla: toolbar button only