Theming

Kritzel includes built-in light and dark themes. Themes are applied via CSS variables, making every visual aspect customizable.

Setting the Theme

On <kritzel-engine>

<kritzel-engine theme="dark"></kritzel-engine>

On <kritzel-editor>

The editor manages the theme internally and emits a themeChange event when it changes. The user can toggle the theme through the settings panel.

const editor = document.querySelector('kritzel-editor');
editor.addEventListener('themeChange', (event) => {
  console.log('Theme changed to:', event.detail); // 'light' or 'dark'
});

Built-in Themes

Light Theme (default)

Token	Value
Engine background	#ffffff
Controls background	#ffffff
Selected control	#007AFF
Primary text	#000000
Border	#ebebeb
Selection border	#007AFF
Selection handles	#ffffff

Dark Theme

Token	Value
Engine background	#1a1a1a
Controls background	#2a2a2a
Selected control	#0A84FF
Primary text	#ffffff
Border	#3a3a3a
Selection border	#0A84FF
Selection handles	#1a1a1a

Theme-Aware Colors

Tool palettes and object colors use ThemeAwareColor to adapt to the active theme:

interface ThemeAwareColor {
  light: string;  // Color value for light theme
  dark: string;   // Color value for dark theme
  label?: string; // Optional semantic label (e.g. 'Primary')
}

Example:

const color: ThemeAwareColor = {
  light: '#000000',
  dark: '#ffffff',
  label: 'Primary',
};

When the theme switches, all objects and tools automatically resolve to the appropriate color value.

KritzelTheme Interface

The KritzelTheme interface defines CSS variables for every component section. You can import and customize the built-in themes:

import { lightTheme, darkTheme } from 'kritzel-stencil';

Theme sections include: global, engine, controls, selection, dialog, contextMenu, utilityPanel, tooltip, menu, dropdown, portal, settings, splitButton, moreMenu, and more.

Each section contains granular color tokens (background, text, border, hover states, etc.) that map to CSS custom properties on the component host elements.