Skip to main content

Themes

Overview​

Kritzel allows you to fully customize the appearance of the editor through a dedicated theming interface. A theme is a JSON-like structure containing the editor's configurable properties. You can either choose one of the built-in themes or create your own.

Kritzel comes with two built-in themes, lightTheme and darkTheme, and offers the KritzelTheme interface for creating custom themes.

The full list of customizable properties can be found in the API Reference.

Switching the Theme​

To toggle between the default light and dark theme, pass the respective theme name to the theme prop.

Listening for Theme Changes​

Listen for the themeChange event to react whenever the active theme changes. The event provides the new theme name through event.detail.

Creating a Custom Theme​

Create a custom theme by overriding the groups and properties of KritzelTheme, then provide it through the editor's themes prop. Activate it by passing its name to the theme prop.

API Details​

For the full list of related APIs, see Theming.