Skip to main content

Themes

Overview​

Kritzel allows you to fully customize the appearance of the editor by providing 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​

In order to toggle between the default light and dark theme, pass the respective theme name to the [theme] binding.

Listening for Theme Changes​

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

Creating a Custom Theme​

Create a custom theme by overriding the groups and properties of KritzelTheme, and providing it as part of the editor's [themes] array . Similar to toggling the default themes, activate it by setting its name through the [theme] binding.

API Details​

For the full list of related APIs, see the following reference sections.