Themes

Wrap the editor in a theme to get its light or dark look, and scope your own CSS to a single instance.

Applying a theme

Import Willow (light) or WillowDark (dark) from @svar-ui/react-editor and wrap the editor with it:

import { Editor, Willow } from "@svar-ui/react-editor";

<Willow>
	<Editor items={items} values={values} />
</Willow>

For the dark theme, swap in WillowDark:

import { Editor, WillowDark } from "@svar-ui/react-editor";

<WillowDark>
	<Editor items={items} values={values} />
</WillowDark>

Apply the theme once near the top of your app. It supplies the CSS variables every SVAR widget styles itself with, and any editors nested inside inherit it.

info

The theme files provided by react-editor package are actually the core themes, same as provided by react-core package. So if your app already applies a theme from any other SVAR widget (Gantt, Kanban, Grid, and so on), that wrapper is enough - you don't need a separate theme for the editor, and you shouldn't nest a second one. Import from @svar-ui/react-editor only when the editor is the sole SVAR widget on the page.

Disabling default fonts

Each theme loads its default font faces. Set fonts={false} to skip them and keep your app's own typography:

<Willow fonts={false}>
	<Editor items={items} values={values} />
</Willow>

fonts defaults to true.

Scoping style overrides

A custom class can be attached at two scopes:

• the editor-level css prop puts a class on the editor root, scoping overrides to one instance;
• an individual item's css prop puts a class on that single field.

Pass a class name to the editor css prop and prefix your selectors with it:

<Editor css="task-editor" items={items} values={values} />

.task-editor .wx-message {
	font-weight: 600;
}

To style just one field, set css on its item config instead:

const items = [
	{ comp: "text", key: "name", label: "Name", css: "highlight-field" }
];

<Editor items={items} values={values} />

.highlight-field {
	background: #fff8c4;
}

Overrides apply on top of the active theme. Common classes to target:

Class	Element
.wx-sections	Generated form body
.wx-editor-toolbar	Toolbar wrapper
.wx-topbar	Top toolbar wrapper
.wx-bottom	Bottom toolbar wrapper
.wx-message	Validation message under a field
.wx-overlay	Read-only empty-data overlay